Selectors are a very important block of knowledge in CSS. Generally speaking, it is roughly divided into five categories: basic selectors, relational selectors, pseudo-class selectors, pseudo-element selectors, and attribute selectors. Here first add the attribute selector.
attribute selector
When we talked about elements earlier, we have already said that some attributes can be used to represent some characteristics of elements. Now we can use these features to select the element, such as class selector and id selector, which are actually selectors constructed using the values of the attributes class and id, which can be regarded as a special treatment for the class and id attributes , and other attributes have to follow step by step.
In general, attribute selectors are relatively free to match. They can be selected according to attributes, attribute values, or some attribute values. The specific rules are as follows:
| Selector | describe |
|---|---|
| [attribute] | Used to select elements with specified attributes |
| [attribute=value] | Used to select elements with specified attributes and values |
| [attribute\^=value] | Matches every element whose attribute value begins with the specified value |
| [attribute$=value] | Matches every element whose attribute value ends with the specified value |
| [attribute*=value] | Matches every element that contains the specified value in the attribute value |
| [attribute~=value] | Used to select elements whose attribute value contains the specified word |
| [attribute|=value] | Used to select elements with attribute values starting with the specified value, which must be a whole word |
Let's use these four a elements to practice concretely:
<a href="https://ke.qq.com" target="_blank">腾讯课堂</a>
<a href="css-basic.pdf" >CSS学习文档</a>
<a href="css.png" >CSS 脑图</a>
<a href="http://imweb.io" title=“IMWeb”>IMWeb学院</a>
Requirements are as follows:
- Check the title attribute link
- Select the link opened in the new window (you can add an icon at the back to distinguish other links)
- Select different file type links (the corresponding icons can be added later to indicate the resource type)
- Check the absolute path link
The corresponding selectors are as follows:
/* 选中 title 属性链接 */
a[title] {}
/* 选中新窗口打开的链接 */
a[target="_blank"] {}
/* 选中 pdf */
a[href$=".pdf"] {}
/* 选中 png */
a[href$=".png"] {}
/* 选中绝对路径链接 */
a[href^="http://"],
a[href^="https://"] {}
Selector Reference Manual
After talking about so many selectors, it is estimated that it will be indigestible for a while. But it doesn’t matter, we can take it slow, we can watch the video a few more times, or we can have an impression and continue to learn the following content, and then come back and digest it. At the same time, here are some very valuable selector documents for you, which can be convenient for you to learn and consult.
The first is the selector reference of W3school. The classification is very detailed, which is very suitable for introductory learning:
- CSS element selectors
- CSS Class Selectors Explained
- CSS ID selector in detail
- Attribute selectors explained | W3School
- CSS descendant selector
- CSS child element selector
- CSS adjacent sibling selector
- CSS pseudo-classes
- CSS pseudo-elements
Or refer directly to the selector manual:
- Selector Reference Manual | MDN (click the corresponding selector for the English link, you can replace en-US with zh-CN in the address bar)
- CSS Selectors | Beginner Tutorial
- Selector Reference Manual | W3School
- Selectors Level 3 | W3 (Official Reference Manual, English)
- Selectors Level 4 | W3 (Draft Generation 4 Selectors)
selector optimization
Now we know that there are many kinds of selectors, but the time it takes to parse each selector is not the same for browsers. So when we use selectors, it is also necessary to understand how to write optimal selectors.
selector efficiency
According to website efficiency expert Steve Souders , the various CSS selectors are listed below in order of their efficiency
- id selector (#myid)
- Class selector (.myclassname)
- Tag selector (div, h1, p)
- Adjacent selector (h1 + p)
- child selector (ul > li)
- descendant selector (li a)
- Wildcard selector (*)
- Attribute selector (a[rel="external"])
- Pseudo-class selector (a:hover,li:nth-child)
Take the following p element as an example:
<p id="test" class="red">我用来测试选择器的优化</p>
We can select it in many ways, such as p, .red, #test, [class="red"]and so on. But in terms of execution efficiency, the id selector is the best, followed by the class selector, then the element selector, and finally the attribute selector.
Selector Interpretation Order
Generally speaking, in specific projects, the HTML structure is more complex, so the use of relational selectors is very common. For relational selectors, our reading habit is from left to right, but browsers interpret selectors and follow the principle of reading from the right to the left of the selector .
For example, for the selector .list .item .item-tt, the browser first looks for yes , then continues to look .item-ttfor the parent element , and then looks for it , so that the final selector matching is completed..item.list
So if the path chain is shorter, the efficiency will be improved accordingly. It is recommended that the level of the selector should not exceed 4 layers at most. If .demo .list .item .item-tt .tt-linkthere are 5 layers, it can be shortened to less than 4 layers according to the actual situation, such as.demo .item-tt .tt-link