CSS selector

Selectors are used in CSS to specify our The HTML element you want to format.

1 selector list

If there are multiple CSS selectors that use the same style, then these selectors can be organized into a list.

h1 {
 color: blue;
}< br>
.special {
 color: blue;
}

The above two tags use the same style and can be written as two separate rules, or they can be combined, and a comma is added between them to form a selector list.

h1, .special {
 color: blue;
}

Note: When using selector lists, if any A selector is invalid (there is a syntax error) and the entire rule is ignored.

2 selector types

2.1 Tags, Classes, and ID Selectors

Type selectors are sometimes called "tag names selector " or "element selector" because it selects an HTML tag/element in the document.

A class selector starting with a period (.) will select all elements in the document that have this class applied.

The ID selector starts with # instead of a period, which is the same usage as the class selector.

2.1.1 Global selector

Global selection The filter, denoted by an asterisk (*), selects everything in the document (or everything in the parent element.

More readable global selectors, e.g.:

If I want to select the first child element of any <article> element, no matter what it is, make it bold.

article :first-child {
}
< /code>

This may seem confusing for element selectors

article:first-child
To avoid this confusion, we can add a global selector to the :first-child selector so that what the selector does is easy can understand. The selector is selecting any first child of the <article> element:
article *:first-child {
}
 
2.2 Attribute Selector
Selector
Example
Description
[attr]
a[title]
 matches elements with an attribute named attr -- the value in square brackets. 
[attr=value]
a[href='https://example.com'] 
Matches elements with an attribute named attr whose value is exactly value - the string in quotes. 
[attr~=value]
p[class~='special'] 
Matches an element with an attribute named attr whose value is exactly value, or matches an element with an attr The element of the em> attribute has one or more values, at least one of which matches value. Note that several values ​​in a column are separated by spaces. 
`[attr
=value]`
`div[lang
2.2.1 String matching selector
Selector
Example
Description
[attr^=value]
li[class^='box-']
 matches elements with an attribute named attr whose value begins with a value substring. 
[attr$=value]
li[class$='-box']
Matches elements with an attribute named attr whose value ends with a value substring
 
[attr*=value]
li[class*='box']
match An element with an attribute named attr has at least one occurrence of the value substring anywhere in the value string. 
If you want to match attribute values ​​​​with case insensitivity, you You can use the i value before the closing bracket. This flag tells the browser to match ASCII characters in a case-insensitive manner. Without this tag, the value is matched according to the way the document language handles case, which is case-sensitive in HTML.
li[class^='a' i] {
 color: red;
}

 <h1>Case-insensitivity</h1>
< ul>
 <li class='a'> ;Item 1</li>
 <li class='A'>Item 2</li>
 <li class='Ab'>Item 3</li>< /span>
</ul>
< span >2.3 Pseudo-class pseudo-element selector/span>
 2.3.1 Pseudo-class selector
It is used to select elements in a specific state, such as when they is the first element of this type, or when the mouse pointer hovers over the element. Pseudo-elements begin with double and single colons :.
Application case:
For example, if you want to make the first paragraph of an article bold and the font bigger.
.first {
 font-size: 120 %;
 font-weight: bold;
} 
< span ><article>
 <p class span>='first'>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo
 melon azuki bean garlic.</ p>

 <p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard
 greens greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
 </article>
Using the above styles can indeed achieve the requirements, but this When a paragraph is added at the beginning of the article, it is necessary to change class='first' to the first paragraph, which is troublesome. At this point you can use the pseudo-class selector class='first'.
article p:first-child { 
 font-size: 120%;
 font-weight: bold;
} 
<article>
 < span ><p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo
 melon azuki bean garlic. </< span >p>

 <p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard
 greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
< ;/article>
In this way, the first tag style under the article can always be maintained Bold fonts become larger.
There are several other pseudo-class selectors
:last-child The last element of the parent element. 
:only-child matches an element without any sibling elements. The equivalent selector can also be written as :first-child:last-child or :nth-child(1):nth-last-child(1), of course, The former will be weighted a little lower. 
:invalid Indicates any input or other form element whose content has not been validated, This pseudo-class is useful for highlighting field errors to the user. 
User behavior pseudo-classes are also called dynamic pseudo-classes. It behaves as if a class is added to the element when the user interacts with the element.
:hover——上面提到过，只会在用户将指针挪到元素上的时候才会激活，一般就是链接元素。
:focus——只会在用户使用键盘控制，选定元素的时候激活。
常见的伪类类型
选择器
描述
:active
在用户激活（例如点击）元素的时候匹配。
:any-link
匹配一个链接的:link和:visited状态。
:blank
匹配空输入值的``元素。
:checked
匹配处于选中状态的单选或者复选框。
:current 
匹配正在展示的元素，或者其上级元素。
:default
匹配一组相似的元素中默认的一个或者更多的 UI 元素。
:dir
基于其方向性（HTMLdir属性或者 CSSdirection属性的值）匹配一个元素。
:disabled
匹配处于关闭状态的用户界面元素
:empty
匹配除了可能存在的空格外，没有子元素的元素。
:enabled
匹配处于开启状态的用户界面元素。
:first
匹配分页媒体的第一页。
:first-child
匹配兄弟元素中的第一个元素。
:first-of-type
匹配兄弟元素中第一个某种类型的元素。
:focus
当一个元素有焦点的时候匹配。
:focus-visible
当元素有焦点，且焦点对用户可见的时候匹配。
:focus-within
匹配有焦点的元素，以及子代元素有焦点的元素。
:future 
匹配当前元素之后的元素。
:hover
当用户悬浮到一个元素之上的时候匹配。
:indeterminate
匹配未定态值的 UI 元素，通常为复选框。
:in-range
用一个区间匹配元素，当值处于区间之内时匹配。
:invalid
匹配诸如<input>的位于不可用状态的元素。
:lang
基于语言（HTMLlang属性的值）匹配元素。
:last-child
匹配兄弟元素中最末的那个元素。
:last-of-type
匹配兄弟元素中最后一个某种类型的元素。
:left
在分页媒体 中，匹配左手边的页。
:link
匹配未曾访问的链接。
:local-link
匹配指向和当前文档同一网站页面的链接。
:is()
匹配传入的选择器列表中的任何选择器。
:not
匹配作为值传入自身的选择器未匹配的物件。
:nth-child
匹配一列兄弟元素中的元素——兄弟元素按照an+b形式的式子进行匹配（比如 2n+1 匹配元素 1、3、5、7 等。即所有的奇数个）。
:nth-of-type
匹配某种类型的一列兄弟元素（比如，<p>元素）——兄弟元素按照an+b形式的式子进行匹配（比如 2n+1 匹配元素 1、3、5、7 等。即所有的奇数个）。
:nth-last-child
匹配一列兄弟元素，从后往前倒数。兄弟元素按照an+b形式的式子进行匹配（比如 2n+1 匹配按照顺序来的最后一个元素，然后往前两个，再往前两个，诸如此类。从后往前数的所有奇数个）。
:nth-last-of-type
匹配某种类型的一列兄弟元素（比如，<p>元素），从后往前倒数。兄弟元素按照an+b形式的式子进行匹配（比如 2n+1 匹配按照顺序来的最后一个元素，然后往前两个，再往前两个，诸如此类。从后往前数的所有奇数个）。
:only-child
匹配没有兄弟元素的元素。
:only-of-type
匹配兄弟元素中某类型仅有的元素。
:optional
匹配不是必填的 form 元素。
:out-of-range
按区间匹配元素，当值不在区间内的的时候匹配。
:past 
匹配当前元素之前的元素。
:placeholder-shown
匹配显示占位文字的 input 元素。
:playing 
匹配代表音频、视频或者相似的能“播放”或者“暂停”的资源的，且正在“播放”的元素。
:paused 
匹配代表音频、视频或者相似的能“播放”或者“暂停”的资源的，且正在“暂停”的元素。
:read-only
匹配用户不可更改的元素。
:read-write
匹配用户可更改的元素。
:required
匹配必填的 form 元素。
:right
在分页媒体 中，匹配右手边的页。
:root
匹配文档的根元素。
:scope
匹配任何为参考点元素的的元素。
:valid
匹配诸如<input>元素的处于可用状态的元素。
:target
匹配当前 URL 目标的元素（例如如果它有一个匹配当前URL 分段的元素）。
:visited
匹配已访问链接。
2.3.2 伪元素选择器
伪元素和伪类的形式差不多，但是是表现得像往标记文本中加入全新的 HTML 元素一样，伪元素开头为双冒号::。
Application case:
For example, you want to make the first line of an article bold and larger.
 If you use span to implement, when you can't know the size of the screen or the font size, you can't accurately select the first line, so the pseudo-element selector can be fully implemented this style.
article p::first-line {
 font-size: 120%;
 font-weight: bold;
} 
<article>
 <p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo
 melon azuki bean garlic. </ p>

 <p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard
 greens greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
 </article>
Special pseudo-element::before  with the ::after and cotent attributes to insert content into your document using CSS.
.box::before {
 content< /span>: 'This should show before the other content.'
} 
<p class='box'>Content in the box in my HTML page.</p>
These pseudo element doesn't do this very often on web browsers, the more recommended usage is to insert some icon as a visual cue, or insert an empty string and style it to be a visual hint.
Common pseudo-element types
 
Selector
Description
::after 
Matches a styleable element that appears after the actual content of the original element. 
::before
Matches a styleable element that appears before the actual content of the original element. 
::first-letter
Matches the first letter of an element. 
::first-line
Matches the first line of the element containing this pseudo-element. 
::grammar-error
Matches parts of the document that contain browser-marked grammar errors. 
::selection
Matches the selected part of the document. 
::spelling-error
Matches parts of the document that contain browser markup for spelling errors. 
2.4 Relationship selectors
Relation selectors are all for the second element.
2.4.1 Descendant selector
use spaces Separate (" "), combine two selectors, for example, the element of the second selector is selected, and the rest of the same elements that have the same ancestor as the second selector will be selected. (No matter how many generations will be selected)
.box p {
 color: red;
} 
<div  class='box'>
 <p>Text in .box</p>
 <div class= 'box2'>
 <p>Text in .box2</p>
 </div>
 <p>Text in .box</p>
</div> 
<p>Text not in .box</p>
2.4.2 Child relationship selector
 
The child relationship selector is a greater than sign (>), which will only match when the selector selects a direct child element. (only selects all identical elements of the first generation)
2.4.3 Adjacency sibling selector
Adjacency The sibling selector ( + ) is used to select an element that is immediately next to another element that is at the same level in the inheritance relationship.
For example, if you want to set the p tag immediately following h1, design the style, if you add another tag between them , the style cannot be applied.
h1 + p {
 font-weight< /span>: bold;
 background-color: #333;
 color: #fff;
 padding: .5em;
} 
<article>
 <h1> span>A heading</h1>
 <!--<h2>Hahaha</h2>--> 
 <p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo
 melon azuki bean garlic .</p>

 <p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard
 greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
</article>
 2.4.4 Generic sibling selector 
Select sibling tags of a tag, even if they are not directly adjacent, you still You can use the generic sibling selector (~)
h1 ~ p {
 font-weight< /span>: bold;
 background-color: #333;
 color: #fff;
 padding: .5em;
}
<article>
 <h1> span>A heading</h1>
 <p>I am a paragraph .</p>
 <div>I am a div </div>
 <p>I am another paragraph.</ p>
</article>
Use the relationship selector to combine any of the above selectors to achieve the purpose of selecting an element.