search

Home >Web Front-end >CSS Tutorial >CSS selector tidying up

CSS selector tidying up

高洛峰
高洛峰Original
2017-02-09 11:23:321695browse

Many people think CSS is very simple, but in fact it is not easy to write CSS well. Every point of CSS actually has a lot of content, just take In terms of selectors, CSS selectors can be roughly divided into five categories:

  • Element selector

  • Relationship selection

  • Attribute selector

  • Pseudo class selector

  • Pseudo object selector

Element Selector

Selector Name Description
* Wildcard selector Select all elements
E Element selector Select the specified element
#idName id selector Select elements whose id attribute is equal to idName
.className class selector Select elements whose class attribute contains className

The element selector is often used as long as you write CSS. The content of this section is very simple, nothing Something special to say.

Relationship Selector

Adjacent selectorSelects the F element immediately after the E elementBrother selectorSelect all brother elements F
Selector Name Description
E F Inclusion selector Selects all F elements contained within the E element
E>F Child selector Select all elements that are children of the E elementF
##E+ F
E~F

The child selector can only select word elements, but not grandchildren; and the inclusion selector will select all qualified descendants, including sons, grandchildren, grandchildren of grandchildren...

  • The adjacent selector will only select adjacent sibling elements that meet the conditions; while the sibling selector will select all sibling elements that meet the conditions, not necessarily adjacent elements.

  • In Android Browser4.2.* and below, there will be a bug when the pseudo-class selector

    :checked
    • is used together with the sibling selector, check the details.

  • Attribute Selector

SelectorDescriptionE[att]E[att=" val"]E[att~="val"]E [att|="val"]E[att^="val"]E[att$="val"]E[att*="val"]
Select the E element with att attribute
Select the E element that has the att attribute and the attribute value is equal to val
Select the E element that has the att attribute and one of the attribute values ​​​​is equal to val (including the case where there is only one value and the value is equal to val)
Selects the E element that has the att attribute and the attribute value is a string starting with val and separated by the connector -, if the attribute value is only is val, it will also be selected
Select the attribute with att and the attribute value is val The E element of the string starting with
selects the att attribute and the attribute value is val The E element of the string ending in
selects the att attribute and the attribute value contains val The E element of the string

Pseudo class selector

# that do not have any child elements (including text nodes) Matches the E element in the root element of the document. In HTML, the root element is always HTML##E:not(s)E:first-child E:last-childE:only-child##E:nth-child(n)E:nth-last-child(n)E:first-of-typeE:last-of-typeE:only-of-type E:nth-of-type(n)E:nth-last-of-type(n) of the same type

注意事项：

  • 超链接的4种状态(访问前，鼠标悬停，当前被点击，已访问)，需要有特定的书写顺序才能生效；a:hover 必须位于 a:link 和 a:visited 之后，a:active 必须位于 a:hover 之后。

  • E:first-child选择符，E必须是它的兄弟元素中的第一个元素，换言之，E必须是父元素的第一个子元素。与之类似的伪类还有E:last-child，只不过情况正好相反，需要它是最后一个子元素。

关于:not()的用法

假定有个列表，每个列表项都有一条底边线，但是最后一项不需要底边线。

 li:not(:last-child) {
    border-bottom: 1px solid #ddd;
}

上述代码的意思是：给该列表中除最后一项外的所有列表项加一条底边线。是不是很方便。

关于:nth-child()的用法

要使E:nth-child(n)生效，E元素必须是某个元素的子元素，E的父元素最高是body，即E可以是body的子元素。:first-child、:last-child、:only-child、:nth-last-child(n)也是一样。
nth-child(n)括号里的n可以是一个数字，一个关键字，或者一个公式。

:nth-child(length) /*参数是具体数字 length为整数*/
:nth-child(n) /*参数是n,n从0开始计算*/
:nth-child(n*length) /*n的倍数选择，n从0开始算*/
:nth-child(n+length) /*选择大于等于length后面的元素*/
:nth-child(-n+length) /*选择小于等于length前面的元素*/
:nth-child(n*length+1) /*表示隔几选一*/
:nth-child(2n) / :nth-child(even) /*表示偶数*/
:nth-child(2n+1) / :nth-child(odd) /*表示奇数*/

关于:...-child和:...-of-type的差异

这两个系列的属性确实很相似，对于不熟悉的人可能很难区分。

E:first-of-type 总是能命中父元素的第1个为E的子元素，不论父元素第1个子元素是否为E；而E:first-child里的E元素必须是它的兄弟元素中的第一个元素，否则匹配失效。E:last-of-type 与E:last-child也是同理。
E:nth-of-type(n)总是能命中父元素的第n个为E的子元素，不论父元素第n个子元素是否为E；而E:nth-child(n)会选择父元素的第n个子元素E，如果第n个子元素不是E，则是无效选择符，但n会递增。
关于:nth-child()与:nth-of-type()的区别可以看这篇文章

用:empty区分空元素

选择不包含子元素的p元素：

p:empty

选择包含子元素的p元素：

p:not(:empty)

伪对象选择器

Selector Description
E:link Set the style of hyperlink a before it is visited
E:visited Set the style of hyperlink a when its link address has been accessed.
E:hover Set the element when the mouse is hovering Style
E:active Set the element when it is activated by the user (an event that occurs between mouse click and release) Style
E:focus Sets the style of the element when it becomes input focus (the element's onfocus event occurs). (Generally applied to form elements)
E:checked Matches the selected element E on the user interface. (Used when the input type is radio and checkbox)
E:enabled Matches the element E in the available state on the user interface. (Generally applied to form elements)
E: disabled Matches the disabled element E on the user interface. (Generally applied to form elements)
E:empty Matches elements E
##E:root
matches elements that do not contain the s selector E
Matches the first child element of the parent element E
Matches the last child element of the parent elementE
Match the only child element of the parent element E
Match the nth child element of the parent element E
Matches the nth child element from the bottom of the parent element E
Matches the first sibling element of the same type E
Matches the last sibling element of the same typeE
Matches the only sibling element of the same type E
Matches the nth sibling element of the same type E
Matches the penultimate nth sibling element E
选择器 描述
E:before/E::before 在目标元素E的前面插入的内容。用来和content属性一起使用
E:after/E::after 在目标元素E的后面插入的内容。用来和content属性一起使用
E:first-letter/E::first-letter 设置元素内的第一个字符的样式
E:first-line/E::first-line 设置元素内的第一行的样式
E::placeholder 设置元素文字占位符的样式。(一般用于input输入框)
E::selection 设置元素被选择时的字体颜色和背景颜色

注意事项：

  • ::placeholder在使用时需要加上各个浏览器的前缀；除了Firefox是 ::[prefix]placeholder，其他浏览器都是使用 ::[prefix]input-placeholder。

总结

选择器用得好其实可以让我们少些很多代码。其实还有一些东西没有展开来讲，比如:before和:after，后面专门写一篇文章来说。


Many people think CSS is very simple, but in fact it is not easy to write CSS well. Every point of CSS actually has a lot of content, just take In terms of selectors, CSS selectors can be roughly divided into five categories:

  • Element selector

  • Relationship selection

  • Attribute selector

  • Pseudo class selector

  • Pseudo object selector

Element Selector

Selector Name Description
* Wildcard selector Select all elements
E Element selector Select the specified element
#idName id selector Select elements whose id attribute is equal to idName
.className class selector Select elements whose class attribute contains className

The element selector is often used as long as you write CSS. The content of this section is very simple, nothing Something special to say.

Relationship Selector

Adjacent selectorSelects the F element immediately after the E elementBrother selectorSelect all brother elements F
Selector Name Description
E F Inclusion selector Selects all F elements contained within the E element
E>F Child selector Select all elements that are children of the E elementF
##E+ F
E~F

The child selector can only select word elements, but not grandchildren; and the inclusion selector will select all qualified descendants, including sons, grandchildren, grandchildren of grandchildren...

  • The adjacent selector will only select adjacent sibling elements that meet the conditions; while the sibling selector will select all sibling elements that meet the conditions, not necessarily adjacent elements.

  • In Android Browser4.2.* and below, there will be a bug when the pseudo-class selector

    :checked
    • is used together with the sibling selector, check the details.

  • Attribute Selector

SelectorDescriptionE[att]E[att=" val"]E[att~="val"]E [att|="val"]E[att^="val"]E[att$="val"]E[att*="val"]
Select the E element with att attribute
Select the E element that has the att attribute and the attribute value is equal to val
Select the E element that has the att attribute and one of the attribute values ​​​​is equal to val (including the case where there is only one value and the value is equal to val)
Selects the E element that has the att attribute and the attribute value is a string starting with val and separated by the connector -, if the attribute value is only is val, it will also be selected
Select the attribute with att and the attribute value is val The E element of the string starting with
selects the att attribute and the attribute value is val The E element of the string ending in
selects the att attribute and the attribute value contains val The E element of the string

Pseudo class selector

# that do not have any child elements (including text nodes) Matches the E element in the root element of the document. In HTML, the root element is always HTML##E:not(s)E:first-child E:last-childE:only-child##E:nth-child(n)E:nth-last-child(n)E:first-of-typeE:last-of-typeE:only-of-type E:nth-of-type(n)E:nth-last-of-type(n) of the same type

Note:

  • The 4 states of hyperlinks (before access, mouse hover, currently clicked, visited) require a specific writing order to take effect;a:hover must be located after a:link and a:visited, a:active must be located after a:hover.

  • E:first-child selector, E must be the first element among its sibling elements, in other words, E must be the first element of the parent element child elements. A similar pseudo-class is E:last-child, but the situation is just the opposite, it needs to be the last child element.

About the usage of :not()

Assume there is a list, each list item has a bottom line, but the last item No bottom line is required. 

 li:not(:last-child) {
    border-bottom: 1px solid #ddd;
}

The above code means: add a bottom line to all list items except the last item in the list. Isn't it very convenient?

About the usage of :nth-child()

For E:nth-child(n) to take effect, the E element must be a certain The highest parent element of E is body, that is, E can be a child element of body. The same goes for :first-child, :last-child, :only-child, :nth-last-child(n) .
nth-child(n)n in brackets can be a number, a keyword, or a formula. 

:nth-child(length) /*参数是具体数字 length为整数*/
:nth-child(n) /*参数是n,n从0开始计算*/
:nth-child(n*length) /*n的倍数选择，n从0开始算*/
:nth-child(n+length) /*选择大于等于length后面的元素*/
:nth-child(-n+length) /*选择小于等于length前面的元素*/
:nth-child(n*length+1) /*表示隔几选一*/
:nth-child(2n) / :nth-child(even) /*表示偶数*/
:nth-child(2n+1) / :nth-child(odd) /*表示奇数*/

About the difference between :...-child and :...-of-type

The attributes of these two series are indeed They are very similar and may be difficult to distinguish for those unfamiliar with them.

E:first-of-type Can always hit the first child element of the parent element that is E, regardless of whether the first child element of the parent element is E; and The E element in E:first-child must be the first element among its sibling elements, otherwise the match will fail. E:last-of-type is the same as E:last-child.
E:nth-of-type(n)Can always hit the nth child element of the parent element that is E, regardless of whether the nth child element of the parent element is E; and E:nth-child(n) will select the nth child element E of the parent element. If the nth child element is not E, it is an invalid selector, but n will be incremented.
For the difference between :nth-child() and :nth-of-type(), you can read this article

Use :emptyDistinguish between empty elements

Select p elements that do not contain child elements: 

p:empty

Select p elements that contain child elements: 

p:not(:empty)

Pseudo-object selector

Selector Description
E:link Set the style of hyperlink a before it is visited
E:visited Set the style of hyperlink a when its link address has been accessed.
E:hover Set the element when the mouse is hovering Style
E:active Set the element when it is activated by the user (an event that occurs between mouse click and release) Style
E:focus Sets the style of the element when it becomes input focus (the element's onfocus event occurs). (Generally applied to form elements)
E:checked Matches the selected element E on the user interface. (Used when the input type is radio and checkbox)
E:enabled Matches the element E in the available state on the user interface. (Generally applied to form elements)
E: disabled Matches the disabled element E on the user interface. (Generally applied to form elements)
E:empty Matches elements E
##E:root
matches elements that do not contain the s selector E
Matches the first child element of the parent element E
Matches the last child element of the parent elementE
Match the only child element of the parent element E
Match the nth child element of the parent element E
Matches the nth child element from the bottom of the parent element E
Matches the first sibling element of the same type E
Matches the last sibling element of the same typeE
Matches the only sibling element of the same type E
Matches the nth sibling element of the same type E
Matches the penultimate nth sibling element E
Content inserted before the target element E. Used with the content attribute in the target element E Content inserted later. Used with the content attribute Settings The style of the first character within the element Set the style of the first line within the elementSet the style of the element text placeholder. (Generally used for input input boxes)Set the font color and background color when the element is selected
Selector Description
##E:before/E::before
E:after/E::after
E:first-letter/E::first-letter
E:first-line/E::first-line
E::placeholder
E::selection
Note:

  • ::placeholder needs to be added with the prefix of each browser when using it; except Firefox It is ::[prefix]placeholder, other browsers use ::[prefix]input-placeholder.

Summary

Using selectors well can actually save us a lot of code. In fact, there are still some things that have not been discussed in detail, such as

:before and :after, which will be discussed in a separate article later.

For more articles related to CSS selector organization, please pay attention to the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Detailed explanation of the usage of user-select in css3Next article：Detailed explanation of the usage of user-select in css3

Related articles

See more