Tag selector, class selector, id selector
The three most basic selectors in css.
The tag selector is simple and straightforward, which is to perform style rendering for all tags of this type by directly searching for the tag name; the
class selector declares the class and defines the value in the tag, and combines it with ".xxx" in the css to find and render;
id selector Declare the class and define the value in the tag, find and render through the combination of "#xxx" in the css.
Compound selector
One of the most common selectors in commonly used codes, through the combination of three basic selectors for more accurate label selection.
In addition, when we use composite selectors, we must understand the weight problem. If you repeatedly select and define a label, it will render according to the weight of your selector. The one with the highest weight can be rendered, and the inline style has the highest weight. If the low-weight selector wants to render successfully, you can add it after the style! important to explain.
Descendant selector
If I only want to render the background color of the p tag in class="Mine". Difficult to achieve through basic selectors.
.Mine p {
background-color：pink；
}
Because p is wrapped in the .Mine label, he is the descendant of .Mine. Combining the basic selectors can get the desired effect. Any combination of the three can be combined. It is not recommended to exceed three descendants at most.
Child selector
If there are multiple p tags in the offspring, but I don't want to render all p tags, at this time, we can select the child selector. It should be noted here that the offspring must be the pro-sons of the parent box .
.Mine>p {
background-color：pink；
}
In the selector by> Connect, you can select only the children. Even if the descendants of p contain many p tags, the selector will not take them for effect rendering. He will only find the parent-son p tags in .Mine , Render it separately.
Parallel selector
If the two tags are not related, but most of them are in the same style when rendering, if only the basic selector is used, the same code may have to be written two or three times repeatedly, which will cause code redundancy.
.Mine,.Mine2 {
background-color：pink；
}
Use the parallel selector to uniformly render irrelevant but repetitive codes in a large area, which is not only concise but also very convenient.
Link pseudo-class selector
:link a:link //选择所有未访问链接
:visited a:visited //选择所有访问过的链接
:hover a:hover //选择鼠标在链接上面时
:active a:active //选择活动链接
The four selectors related to the link are passed after a: to select different semantics, remember to define in order when inputting (LV bag HAO), otherwise it will not show the rendering effect it should.
The above selectors belong to all the selectors included in css, and the selectors have been further expanded in css3.
Attribute selector
When a large number of the same tags are piled together and want to distinguish them and render them separately, in the past we would think of using the class selector to define and render separately, but css3 helped us simplify it. For example, if there is a bunch of input tags, we can Only select tags with value attributes for rendering.
input[value] : {
background-color:pink;
}
But when the attributes are the same, for example, all tags carry the value attribute, at this time we can:
input[value="Mine"] : {
background-color:pink;
}
Separately select the input tag whose value is equal to Mine, which will make our operation more convenient.
Of course, we can further filter the attribute value through regular expressions.
input[value^="Mine"] : {
//属性值开头包含Mine的标签
background-color:pink;
}
input[value$="Mine"] : {
//属性值结尾包含Mine的标签
background-color:pink;
}
input[value*="Mine"] : {
//属性值中包含Mine的标签
background-color:pink;
}
nth-child selector
On the basis of the descendant selector, css3 has expanded the nth-child selector for us, because the descendant selector has drawbacks, first take the child selector as an example, if we only want the first subtag to be rendered , It is impossible for us to use the child selector to select directly, unless the child tags are all different. But nth-child can help us do this:
.Mine:first-child： {
//选出父标签下的第一个子标签
background-color:pink;
}
.Mine:last-child： {
//选出父标签下的最后一个子标签
background-color:pink;
}
.Mine:nth-child（n）： {
//选出父标签下的第n个子标签
background-color:pink;
}
Here is a separate explanation for the third selector. The parentheses can be either a numeric value or an expression. If it is a numeric value, it is the nth subtag. There are two optional attributes odd and even, which represent the selected tag is odd or even. Use the formula (an + b). Description: a represents the size of a loop, N is a counter (starting from 0), and b is the offset.
nth-of-type selector
.Mine:first-of-type： {
//选出父标签下的第一个子标签
background-color:pink;
}
.Mine:last-of-type： {
//选出父标签下的最后一个子标签
background-color:pink;
}
.Mine:nth--of-type（n）： {
//选出父标签下的第n个子标签
background-color:pink;
}
Compared with the previous type of selector, there is no difference in general semantics, but the following operations will have different results:
.Mine p:nth--of-type（n）： {
//选出父标签下的第n个子标签
background-color:pink;
}
.Mine p:nth-child（n）： {
//选出父标签下的第n个子标签
background-color:pink;
}
The semantics of the first one is to sort in order first, and then to match the previous p tags after the nth tag is retrieved, and the semantics of the second one is to first select the p tags in the subcategory, and then select them in order.
css3 pseudo element selection tag
In the past, we were doing some small box layouts. After that, we might need to place icon icons in front of the box, or place small drop-down arrows at the back of the box. The way we usually think of is to set the span tag in the box and then do it for the three tags Modification of the style, although the effect can be achieved, the code will inevitably be cumbersome. And through this pseudo-element selector, I can directly add tags in the css style:
.Mine :: before {
content:"我"
}
.Mine :: after {
content:"某某某"
}
<div>叫</div>
Through this case, we only wrote the word "call" in the main html, and then in post-rendering, we will find that the page displayed is "My name is XX". It can be said to be quite convenient, remember to follow the content attribute when using tags, otherwise it will be invalid.
::before ::after is a row element, its width and height cannot be set, and manual conversion is required
summary
The nine most commonly used CSS selectors in the front end have been shown in detail here. We have to choose a more suitable selector according to different actual situations. However, the several types of selectors listed in css3 have compatibility issues. Pay extra attention when
选择器 示例 示例说明 CSS
.class .intro 选择所有class="intro"的元素 1
#id #firstname 选择所有id="firstname"的元素 1
* * 选择所有元素 2
element p 选择所有<p>元素 1
element,element div,p 选择所有<div>元素和<p>元素 1
element element div p 选择<div>元素内的所有<p>元素 1
element>element div>p 选择所有父级是 <div> 元素的 <p> 元素 2
element+element div+p 选择所有紧接着<div>元素之后的<p>元素 2
[attribute] [target] 选择所有带有target属性元素 2
[attribute=value] [target=-blank] 选择所有使用target="-blank"的元素 2
[attribute~=value] [title~=flower] 选择标题属性包含单词"flower"的所有元素 2
[attribute|=language] [lang|=en] 选择 lang 属性以 en 为开头的所有元素 2
:link a:link 选择所有未访问链接 1
:visited a:visited 选择所有访问过的链接 1
:active a:active 选择活动链接 1
:hover a:hover 选择鼠标在链接上面时 1
:focus input:focus 选择具有焦点的输入元素 2
:first-letter p:first-letter 选择每一个<p>元素的第一个字母 1
:first-line p:first-line 选择每一个<p>元素的第一行 1
:first-child p:first-child 指定只有当<p>元素是其父级的第一个子级的样式。 2
:before p:before 在每个<p>元素之前插入内容 2
:after p:after 在每个<p>元素之后插入内容 2
:lang(language) p:lang(it) 选择一个lang属性的起始值="it"的所有<p>元素 2
element1~element2 p~ul 选择p元素之后的每一个ul元素 3
[attribute^=value] a[src^="https"] 选择每一个src属性的值以"https"开头的元素 3
[attribute$=value] a[src$=".pdf"] 选择每一个src属性的值以".pdf"结尾的元素 3
[attribute*=value] a[src*="runoob"] 选择每一个src属性的值包含子字符串"runoob"的元素 3
:first-of-type p:first-of-type 选择每个p元素是其父级的第一个p元素 3
:last-of-type p:last-of-type 选择每个p元素是其父级的最后一个p元素 3
:only-of-type p:only-of-type 选择每个p元素是其父级的唯一p元素 3
:only-child p:only-child 选择每个p元素是其父级的唯一子元素 3
:nth-child(n) p:nth-child(2) 选择每个p元素是其父级的第二个子元素 3
:nth-last-child(n) p:nth-last-child(2) 选择每个p元素的是其父级的第二个子元素，从最后一个子项计数 3
:nth-of-type(n) p:nth-of-type(2) 选择每个p元素是其父级的第二个p元素 3
:nth-last-of-type(n) p:nth-last-of-type(2) 选择每个p元素的是其父级的第二个p元素，从最后一个子项计数 3
:last-child p:last-child 选择每个p元素是其父级的最后一个子级。 3
:root :root 选择文档的根元素 3
:empty p:empty 选择每个没有任何子级的p元素（包括文本节点） 3
:target #news:target 选择当前活动的#news元素（包含该锚名称的点击的URL） 3
:enabled input:enabled 选择每一个已启用的输入元素 3
:disabled input:disabled 选择每一个禁用的输入元素 3
:checked input:checked 选择每个选中的输入元素 3
:not(selector) :not(p) 选择每个并非p元素的元素 3
::selection ::selection 匹配元素中被用户选中或处于高亮状态的部分 3
:out-of-range :out-of-range 匹配值在指定区间之外的input元素 3
:in-range :in-range 匹配值在指定区间之内的input元素 3
:read-write :read-write 用于匹配可读及可写的元素 3
:read-only :read-only 用于匹配设置 "readonly"（只读） 属性的元素 3
:optional :optional 用于匹配可选的输入元素 3
:required :required 用于匹配设置了 "required" 属性的元素 3
:valid :valid 用于匹配输入值为合法的元素 3
:invalid :invalid 用于匹配输入值为非法的元素 3
Here are all the selectors in css for reference.