Table of contents
The function of the selector
As a selector, as the name suggests, it is to select the label elements in the page . We use CSS to beautify the page, so only after the elements in the page are selected, can we set the corresponding attributes for them . (For example, we play the red Police, SC2, War3 games, that is, the unit is selected first, and then the unit can be commanded to take action.)
base selector
1) Tab selector
Features:
- Can quickly select all tags of the same type
- Just because it chooses a type of label, it cannot make differentiated choices . (Many times we still need to set styles for specific labels)
code example
<!--
基本格式如下
标签名 {
设置属性
}
-->
<style>
p {
color: red;
}
div {
color: green;
}
</style>
<div>
标签选择器
</div>
<p>
类选择器
</p>
<div>
id选择器
</div>
<p>
通配符选择器
</p>The effect is as follows
2) Class selector
Features:
- Because of each label, we can specify the class name, so the class selector can select different labels in a differentiated way
- At the same time, because the class name can be repeated, that is, multiple tags use the same class name, so multiple tags can be selected flexibly
Syntax details:
- Used in CSS . The beginning indicates a class selector
- You need to set the class attribute in the label you want to select
- A class can be used by multiple tags, and a tag can also use multiple classes ( multiple class names need to be separated by spaces )
- If the class name is longer, it is recommended to use - split
- Try not to use pure numbers, Chinese and tag names for class names, which are prone to problems
code example
<!--
基本格式如下
.类名 {
设置属性
}
-->
<style>
.box {
font-size: 50px;
}
.green {
background-color: green;
}
.red {
background-color: red;
}
</style>
<!-- 多个类名之间以空格分割 -->
<div class="box green">类选择器</div>
<div class="red">类选择器</div>
<div class="box green">类选择器</div>The effect is as follows
It can be clearly seen that the .box selector selects the first and third lines and sets the font size, while the .green and .red selectors both correctly select the corresponding lines.
3) id selector
Features:
- Because for each label, we can specify the id specifically, so the id selector can differentiate the label with a specific id
- But because the id cannot be repeated, the id selector cannot select multiple tags (but multiple tags can also be selected through a composite id selector)
Syntax details:
- Use the id selector at the beginning of # in CSS
- The element id in html does not need to have #
- id is unique and cannot be used with multiple tags
code example
<!--
基本格式如下
#id {
设置属性
}
-->
<style>
#label1 {
background-color: blue;
}
</style>
<!-- 多个类名之间以空格分割 -->
<div id="label1">id选择器</div>
<div id="label2">id选择器</div>The effect is as follows
4) Wildcard selector
Features:
- Use * to select all the tags in the page, generally used to specify the most basic attributes in the html page
code example
<!--
基本格式如下
* {
设置属性
}
-->
<style>
* {
color:chocolate;
}
</style>
<!-- 多个类名之间以空格分割 -->
<div id="label1">通配符选择器</div>
<div id="label2">通配符选择器</div>
<div id="label3">通配符选择器</div>
<div id="label4">通配符选择器</div>
<div id="label5">通配符选择器</div>
<div id="label6">通配符选择器</div>The effect is as follows
compound selector
1) descendant selector
Descendant selectors are also called containment selectors, the main purpose is to select some child elements under the parent element
The basic format is as follows:
element1 element2....... { set attribute }
- Element 1 and element 2 should be separated by spaces
- Element 1 is the parent, element 2 is the subset, element 2 is selected, element 1 will not be selected
- Element 2 is not necessarily a son, but also a grandson, great-grandson and other descendants
- Can be any combination of selectors (class selector, id selector, etc.)
- The number of elements is not limited to two
code example
<style>
ul li{
color: blue;
}
</style>
<div>
<ul>
<li>标签选择器</li>
<li>类选择器</li>
<li>id选择器</li>
<li>通配符选择器</li>
</ul>
</div>
<div>
<ol>
<li>后代选择器</li>
<li>子选择器</li>
<li>并集选择器</li>
<li>伪类选择器</li>
</ol>
</div>The effect is as follows
Code example (demonstration that the selected child element may not be a son, as long as it is its descendant)
<!--
基本格式如下
元素1 元素2 .... {
设置属性
}
-->
<style>
div li{
color: blue;
}
</style>
<div>
<ul>
<li>标签选择器</li>
<li>类选择器</li>
<li>id选择器</li>
<li>通配符选择器</li>
</ul>
</div>
<div>
<ol>
<li>后代选择器</li>
<li>子选择器</li>
<li>并集选择器</li>
<li>伪类选择器</li>
</ol>
</div>The effect is as follows
Code example: (here demonstrates that descendant selectors can be any combination of base selectors)
<!--
基本格式如下
元素1 元素2 .... {
设置属性
}
-->
<style>
.one #test{
color: blue;
}
</style>
<div class="one">
<ul id="test">
<li>标签选择器</li>
<li>类选择器</li>
<li>id选择器</li>
<li>通配符选择器</li>
</ul>
</div>
<div>
<ol>
<li>后代选择器</li>
<li>子选择器</li>
<li>并集选择器</li>
<li>伪类选择器</li>
</ol>
</div>The effect is as follows
2) Child selector
The usage of the sub-selector is similar to that of the descendant selector, but the biggest difference is that the sub-selector can only select the sub-labels that meet the conditions , and cannot select tags such as grandchildren and great-grandchildren, while the descendant selector can select all of its descendants meet the conditions .
The basic format is as follows:
element1>element2 { set attribute }
- The number of elements is not limited to two, it can be many
- Elements are separated by >
- You can only choose your own son, not grandson, great-grandson and other elements
code example
<!--
基本格式如下
元素1>元素2 .... {
设置属性
}
-->
<style>
.two>a {
color: red;
}
</style>
<div class="two">
<a href="#">链接1</a>
<p>
<a href="#">链接2</a>
</p>
</div>The effect is as follows
3) Union selector
Multiple sets of tags can be selected
The basic format is as follows:
element1, element2 { set attribute }
- Split each element by
- All elements listed can be selected at the same time
- A union selector can be a combination of any base selectors
- It is recommended to write the union selector vertically , that is, each element occupies one line, and the last selector cannot add a comma.
code example
<!--
基本格式如下
元素1,
元素2,
.... {
设置属性
}
-->
<style>
/* 这里演示使用一下前面的子选择器和后代选择器 */
.one>ul,
div ol li {
color: brown;
}
</style>
<div class="one">
<ul id="test">
<li>标签选择器</li>
<li>类选择器</li>
<li>id选择器</li>
<li>通配符选择器</li>
</ul>
</div>
<div>
<ol>
<li>后代选择器</li>
<li>子选择器</li>
<li>并集选择器</li>
<li>伪类选择器</li>
</ol>
</div>The effect is as follows
4) Pseudo-class selectors
Pseudo-class selectors (abbreviation: pseudo-classes) are defined by colons, which define the state of the element, such as click to press, click to complete, etc., through the pseudo-class to modify the style for the state of the element. Here we mainly introduce the following two types of pseudo-class selectors.
1. Chaining pseudo-class selectors
a:link selects unvisited links
a:visited selects links that have already been visited
a:hover selects the link the mouse pointer is hovering over
a:active Select the active link (the link that the mouse has pressed but has not popped up yet)
Precautions:
- When setting, it needs to be set in the order of LVHA . For example, when you need to set hover and active, put active in front of hover, which will cause active to fail
- The browser's a tag has a default style, but it is generally necessary to formulate a style during development
code example
<style>
a:link {
color: black;
}
a:visited {
color: green;
}
a:hover {
color: red;
}
a:active {
color: blue;
}
</style>
<a href="#">超链接</a>Because the color change is displayed in conjunction with the mouse, the results are not displayed here. You can copy the code yourself and run it to feel it.
2. :focus pseudo-class selector
:focus selects the input form element that gets the focus
code example
<style>
.one>input:focus {
color: red;
}
</style>
<div class="one">
<input type="button" value="按钮">
<input type="button" value="按钮">
<input type="button" value="按钮">
<input type="button" value="按钮">
</div>The effect is as follows
In this effect, the button we clicked turns red, and when another button is clicked, the red color will also shift.
Summarize
This blog introduces the eight selectors of CSS in detail, which are more important. Therefore, reasonable and correct selection of elements in CSS is the basis for modifying element properties. Finally, if this blog is helpful to you, please comment and like it Collect and pay attention, thank you very much!!!