In CSS, selectors are used to specify the HTML elements on a web page that we want to style. It's the way elements and other parts combine to tell the browser which HTML element should be selected as the value of a CSS property in the application rule. The element selected by the selector is called " 选择器的对象".
selector class
There are many selectors in css, which are mainly divided 基础选择器into 复合选择器two categories.
- Basic selector: composed of a single selector, such as label selector, ID selector, etc.
- Composite selector: composed of multiple selectors, such as descendant selectors, descendant selectors, etc.
- Miscellaneous: keywords added to selectors, such as pseudo-class selectors, pseudo-element selectors
1. Basic selector
Basic selectors mainly include 标签选择器, ID选择器, 类选择器, 通配选择器, 属性选择器.
1.1 Label selector (Type Selectors)
Label selector, English translation type selector, alias is also called element selector. This selector selects all elements with the specified tag name.
grammar
tag-name{style-declaration}
example
<!-- html -->
<div>这是一段文字</div>
/* css */
div {
color: #fff;
background-color: royalblue;
}
renderings
1.2 ID Selectors (ID Selectors)
The ID selector id属性值selects an element that matches the
grammar
#id attribute value {style declaration }
example
<!-- html -->
<span id="name">Hello</span>
<span>World</span>
/* css */
#name {
color: red;
}
renderings
1.3 Class Selectors
Class attributes are defined as a space-separated list of items, each of which is a class name. A class selector selects all elements 类名that are the same .
grammar
.class-name{style-declaration}
example
<!-- html -->
<span class="red bg">第一句话。</span>
<span>第二句话。</span>
<span class="red">第三句话。</span>
/* css */
.red {
color: red;
}
.bg {
background-color: aqua;
}
renderings
1.4 Universal Selectors
In CSS, an asterisk (*) is a wildcard selector. It can match any type of HTML element.
grammar
* {style declarations}
example
<!-- html -->
<span class="red bg">第一句话。</span>
<span>第二句话。</span>
<span class="red">第三句话。</span>
/* css */
* {
color: red;
}
renderings
1.5 Attribute Selectors
Attribute selectors match elements by existing attribute names or attribute values.
grammar
[attr]
Represents an element with an attribute named attr .
[attr=value]
Represents an element with an attribute named attr and the attribute value is value .
[attr~=value]
Indicates an element with an attribute named attr , and the attribute is a space-separated list of values, at least one of which is value .
[attr^=value]
Indicates an element with an attribute named attr whose value starts with value .
[attr$=value]
Indicates an element with an attribute named attr whose value ends with value .
[attr=value]*
Represents an element with an attribute named attr , and the attribute value contains at least one *value* value.
[attr operator value i]
Add a letter i (or I) separated by spaces before the closing square bracket of the attribute selector to ignore case when matching attribute values.
[attr operator value s]
Adding a letter s (or S) separated by spaces before the closing square bracket of the attribute selector can be case-sensitive when matching attribute values.
example
<!-- html -->
<ul>
<li><a href="#internal">Internal link</a></li>
<li><a href="http://example.com">Example link</a></li>
<li><a href="#InSensitive">Insensitive internal link</a></li>
<li><a href="http://example.org">Example org link</a></li>
</ul>
/* css */
a {
color: blue;
}
/* 以 "#" 开头的页面本地链接 */
a[href^="#"] {
background-color: gold;
}
/* 包含 "example" 的链接 */
a[href*="example"] {
background-color: silver;
}
/* 包含 "insensitive" 的链接，不区分大小写 */
a[href*="insensitive" i] {
color: cyan;
}
/* 包含 "cAsE" 的链接，区分大小写 */
a[href*="cAsE" s] {
color: pink;
}
/* 以 ".org" 结尾的链接 */
a[href$=".Org" i] {
color: red;
}
renderings
2. Composite selector
A compound selector 选择器is 符号composed of multiple plus . Commonly used compound selectors include 后代选择器, 子代选择器, 相邻兄弟选择器, 通用兄弟选择器etc.
2.1 Descendant Combinator
A descendant selector 空格（" "）字符connects , if the element matched by the second selector has an element matching the first selector 祖先(parent, parent's parent, parent's parent's parent, etc.), then they will be selected.
grammar
selector1 selector2 {style declarations}
example
<!-- html -->
<div>
<span>第一段文字</span>
<section>
<span>第二段文字</span>
</section>
</div>
/* css */
div span {
color: red;
}
renderings
2.2 Child Combinator
Descendant selectors 大于号（">"） 字符connect , and if elements matched by the second selector have 直接父级elements matching the first selector, they will be selected.
grammar
selector1 > selector2 {style declarations}
example
<!-- html -->
<div>
<span>第一段文字</span>
<section>
<span>第二段文字</span>
</section>
</div>
/* css */
div > span {
color: red;
}
renderings
2.3 Intersection selector
An intersection selector is a direct connection of two selectors, if it is an element that matches both selectors at the same time, they will be selected.
grammar
selector1selector2 {style declarations}
example
<!-- html -->
<div>
<span class="name red">第一段文字</span>
<section>
<span class="name">第二段文字</span>
<span class="red">第三段文字</span>
</section>
</div>
/* css */
.name.red {
color: red;
}
renderings
2.4 Union selector
A union selector 英文逗号（","） 字符connects , and if elements match either of the two selectors, they will be selected.
grammar
selector1, selector2 {style declarations}
example
<!-- html -->
<div>
<span class="name red">第一段文字</span>
<section>
<span class="name">第二段文字</span>
<span class="red">第三段文字</span>
</section>
</div>
/* css */
.name,
.red {
color: red;
}
renderings
2.5 Adjacent Sibling Combinator
The union selector 加号（"+"） 字符connects , if the second element immediately follows the first element, and both elements are children of the same parent element, the second element will be selected.
grammar
selector1 + selector2 {style declaration }
example
<!-- html -->
<div>
<span class="name">第一段文字</span>
<section>
<span class="red">第二段文字</span>
<span class="name">第三段文字</span>
<span class="red">第四段文字</span>
<span class="red">第五段文字</span>
</section>
</div>
/* css */
.name + .red {
color: red;
}
renderings
2.6 General Sibling Combinator
The union selector 波浪号（"+"） 字符connects , if the second element is after the first element ( does not need to be immediately adjacent ), and both elements are child elements belonging to the same parent element, the second element will be selected .
grammar
selector1 ~ selector2 {style declarations}
example
<!-- html -->
<div>
<span class="name">第一段文字</span>
<section>
<span class="red">第二段文字</span>
<span class="name">第三段文字</span>
<span class="red">第四段文字</span>
<span class="red">第五段文字</span>
</section>
</div>
/* css */
.name ~ .red {
color: red;
}
renderings
3. Others
Keywords added to selectors, such as pseudo-class selectors, pseudo-element selectors
3.1 Pseudo-Classes
Pseudo-classes are keywords added to selectors to specify a special state of the selected element. A pseudo-class consists of a colon (:) followed by the name of the pseudo-class (for example, :hover). Functional pseudo-classes also contain a pair of parentheses to define parameters (for example, :dir()). An element with a pseudo-class attached to it is defined as an anchor element (for example, a button in button:hover).
grammar
selector:pseudo-class {style declaration }
This article only introduces the following commonly used pseudo-classes :hover, :active, :nth-child(), for more pseudo-classes, please jump to MDN pseudo-classes .
3.1.1 :hover
The :hover pseudo-class is for when the user is using a pointing device to virtual point at an element (without activating it). It is often used for mouse hover effects on the PC side.
Note:
:hoverThere are problems with the touch screen and should be avoided.
example
<!-- html -->
<a href="#">这是一个超链接</a>
/* css */
a {
background-color: powderblue;
}
a:hover {
background-color: gold;
}
renderings
Before mouseover:
After mouseover:
3.1.2 :active
The :active pseudo-class matches elements that are activated by the user. It allows the page to give feedback when the browser detects activation. When interacting with the mouse, it represents the time between when the user presses the button and when the button is released.
example
<!-- html -->
<a href="#">这是一个超链接</a>
/* css */
a:active {
color: gold;
}
renderings
Inactive state:
Activation status:
Remark
In the developer mode of the browser, you can manually set the element status under the element tag, which is very convenient for debugging styles.
3.1.3 :nth-child(val)
:nth-child(val) This pseudo-class first finds all sibling elements of the current element, and then sorts them starting from 1 in order of position. The result of selection is the set of elements matched in the pseudo-class :nth-child brackets. The val in the brackets can be one 数字, one 关键字or one 公式(an+b: n is an integer starting from 0).
example
<!-- html -->
<ul class="ul1">
<li><span>第一条</span></li>
<li><span>第二条</span></li>
<li><span>第三条</span></li>
<li><span>第四条</span></li>
</ul>
<ul class="ul2">
<li><span>第一条</span></li>
<li><span>第二条</span></li>
<li><span>第三条</span></li>
<li><span>第四条</span></li>
</ul>
<ul class="ul3">
<li><span>第一条</span></li>
<li><span>第二条</span></li>
<li><span>第三条</span></li>
<li><span>第四条</span></li>
</ul>
<ul class="ul4">
<li><span>第一条</span></li>
<li><span>第二条</span></li>
<li><span>第三条</span></li>
<li><span>第四条</span></li>
</ul>
<ul class="ul5">
<li><span>第一条</span></li>
<li><span>第二条</span></li>
<li><span>第三条</span></li>
<li><span>第四条</span></li>
</ul>
/* css */
/* 第一个元素 */
.ul1>li:nth-child(1) {
color: red;
}
/* 奇数行元素 */
.ul2>li:nth-child(odd) {
color: red;
}
/* 偶数行元素 */
.ul3>li:nth-child(even) {
color: red;
}
/* 奇数行元素 效果同odd */
.ul4>li:nth-child(2n+1) {
color: red;
}
/* 前三个元素 */
.ul5>li:nth-child(-n+3) {
color: red;
}
renderings
3.2 Pseudo-Elements
A pseudo-element is a keyword appended to the end of a selector that allows you to modify the style of a specific part of the selected element.
Note: Compared with pseudo-elements, pseudo-classes can change the element style according to the state.
grammar
selector::pseudo-element {style declaration }
Note: Only one pseudo-element can be used in a selector. Pseudo-elements must immediately follow the base selector in the statement.
Note: According toCSS3规范, double colons ( ) should be used::instead of single colons (:) to distinguish between pseudo-classes and pseudo-elements. However, since the old version of the W3C specification did not make a special distinction, most browsers currently support using both methods to represent pseudo-elements.
This article only introduces the following commonly used pseudo-elements ::after, ::before, :nth-child(), for more pseudo-classes, please jump to MDN pseudo-elements .
3.2.1 ::after (:after)
Pseudo element ::afteris used to create a virtual element as the last child element of the selected element. It is usually used in conjunction with contentthe attribute to add decorative content to the element. This virtual element is an inline element by default.
example
<!-- html -->
<p class="content">这是一段文字！</p>
/* css */
.content::after {
content: "这是伪元素";
color: red;
font-size: 12px;
}
renderings
3.2.2 ::before (:before)
Pseudo element ::beforeis used to create a virtual element as the first child element of the selected element. It is usually used in conjunction with contentthe attribute to add decorative content to the element. This virtual element is an inline element by default.
example
<!-- html -->
<q>一些引用</q>
/* css */
q::before {
content: "«";
color: blue;
}
q::after {
content: "»";
color: red;
}
renderings
