Record it for yourself, deepen your impression, so as not to keep forgetting
css selector
.class//类选择器
#id//id选择器
*//选择所有元素
p//选择所有p元素
div,p//选择所有div和p元素
div p//选择p标签里的p元素
div>P//选择所有div标签里面的p元素
div+p//选择所有紧跟在div标签后的第一个p元素
[attitude]
示例：[target]//选择所有具有target属性的元素
[attribute=value]
示例：[target=-blank]//选择所有target属性为“-blank”的元素
[attribute~=value]
示例：[title~=flower]//选择标题属性包含flower的元素
:link
示例：a:link//选择所有未访问过的链接
：visited//选择所有已访问过的链接
：active//选择活动链接
：hover//当鼠标悬停在元素上
：focus
input:focus//选择所有具有焦点的元素
p:first-letter//选择所有p元素的第一个字母
p:first-line//选择所有p元素的第一行
p:first-child//选择所有以p元素为父元素的第一个子元素
p:before//在p元素之前插入内容
p:after//在p元素之后插入内容
p~ul//选择p元素之后的每一个ul元素
a[src^="https"]//选择每一个src属性以https开头的a元素
a[src$=".pdf"]//选择每一个src属性的值以".pdf"结尾的元素
a[src*="runoob"]//选择每一个src属性的值包含子字符串"runoob"的元素
p:first-of-type//选择每个p元素是其父级的第一个p元素
p:last-of-type//选择每个p元素是其父级的最后一个p元素
p:only-of-type//选择其父级唯一一个p元素
p:only-child//选择每个p元素是其父级唯一的子元素
p:nth-child(2)//选择每个p元素是其父级的第二个子元素
p:nth-of-type(2)//选择每个p元素是其父级的第二个p元素
:not(p)//选择每个不为p元素的元素
::selection//匹配元素中被用户选中或高亮部分的元素
input:checked//选择每个选中的输入元素
input:disabled//选择每个被禁用的元素
input:enabled//选择每一个已启用的输入元素
:root//选择文档的根元素
p:empty//选择没有子元素的p元素
:required//用于匹配设置了 "required" 属性的元素
:valid//用于匹配输入值为合法的元素
:invalid//用于匹配输入值为非法的元素
:optional//用于匹配可选的输入元素priority
!important>Inline Styles>ID Selectors>Classes, Pseudo-Classes, Attributes>Elements, Pseudo-Elements>Inheritance>Wildcards
Pseudo-classes and pseudo-elements
3. Pseudo-class and pseudo-element selectors
3.1. Pseudo-classes for marking state
-
:link Select unvisited hyperlinks
-
:visited Select a visited link
-
:hover Select the element hovered by the mouse
-
:active selects the element in the point
-
:focus selects the focused element
3.2. Pseudo-classes for filtering functions
-
:empty selects elements with no child elements
-
:checked Select the input element in the checked state is only valid for radio and checkbox
-
:disabled Select disabled form elements
-
:first-child selects the first element under the current selector
-
:last-child selects the last element under the current selector
-
:nth-child(an+b) Select the element at the specified position, and the parameter supports the situation of an+b. For example, li:nth(2n+1), you can select all the elements whose sequence number of the li element is an integer multiple of 2+1, That is, the li elements with serial numbers of 1, 3, 5, 7, and 9
-
:nth-last-child(an+b) Similar to above, but select from the back.
-
:only-child Select the only child element of the element, if the parent element of the element has only one child element, it will take effect, if there are other sibling elements, it will not take effect
-
:only-of-type Select only one element type. Will take effect if the element's parent element has only one child element of its current type.
3.3. Pseudo-element selectors
Pseudo-element selectors are used to set certain special effects on fragrant elements. Pseudo-element selectors are not real DOM elements, so they are called pseudo-elements. The commonly used ones are as follows:
-
::first-line applies the style to the first line of the element
-
::first-letter applies styles to the first letter or first text of an element
-
::before inserts content before an element
-
::after inserts content after an element
-
::selection Add style to the element selected by the cursor
1. The elements constructed by pseudo-elements are virtual, so js cannot be used to operate
2. first-line and first-letter are not used in inline styles, and will be invalid in inline styles
3. If you use before and first-letter at the same time, the first content should be counted from before, if the first in before is non-text content, then first-letter will also be applied to this non-text content, but not will take effect.
4. According to CSS3, a pseudo-class is represented by a colon (:), and a pseudo-element is represented by two colons (::)