In normal development, it is really convenient to use CSS selectors. There is no need to define multiple class names to improve flexibility. This article is used for recording. Please correct me if there are any inaccuracies.
CSS Selectors Reference Manual
Let’s take a look at the reference manual for CSS selectors first. It’s best to wrap value in “quotes” when using it, otherwise it can only match letters
(markdown’s table syntax has "|", so you want to enter "|" using |escape accomplish)
| Selector | describe |
|---|---|
| [attribute] | Used to select elements with specified attributes |
| [attribute=value] | Used to select elements with specified attributes and values. |
| [attribute~=value] | Used to select elements that contain the specified vocabulary in their attribute values. |
| [attribute|=value] | Used to select elements with an attribute value starting with the specified value, which must be a whole word. |
| [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 whose attribute value contains the specified value. |
The html code used in this article:
<!-- html-->
<div>
<span class="title">css属性选择器</span>
<ul>
<li class="myli title">0</li>
<li class="title" id="li">1</li>
<li class="myli-2-end">2</li>
<li class="start-myli-3">3</li>
<li>与世无争的咸鱼</li>
<li class="my">5</li>
</ul>
</div>
[attribute]: Select the element containing this attribute
*[attribute]: * represents all tags, that is, select all tags containing attribute
/*选取所有包含class属性的元素 css*/
*[class] {
background-color: skyblue;
}
Effect:
Select the label with id
/*选取所有包含id属性的元素 css*/
*[id] {
background-color: skyblue;
}
li[class]: Select elements with class attributes in li (compared to *, only select li tags)
/*选取li中包含class属性的元素 css*/
li[class] {
background-color: skyblue;
}
Effect:
[attribute=value]: Select the element containing this attribute
It should be noted here that attribute=value is an exact match. If there are multiple values for the attribute, it will not be selected. In this example, the class of the first li contains the class name "myli", so it will not be selected.
/*选取所有class=title的元素 css*/
*[class="title"] {
background-color: skyblue;
}
Effect:
[attribute~=value]: Select elements whose attribute value contains the specified vocabulary
Compared with [attribute=value], here is an incomplete match, as long as the attribute contains value, the first li can be selected in this example
/*选取所有class中包含值为title的元素 css*/
*[class~="title"] {
background-color: skyblue;
}
Effect:
[attribute|=value]: Selects elements with an attribute value beginning with the specified value, which must be a whole word.
Note: The element with class="myli" will not be selected here, that is, if there are multiple values for the attribute, it will not be matched. In this example, the class of the first li contains myli and title will not be selected, which is very detail
/*选取所有class中以myli开头的li css*/
li[class|="myli"] {
background-color: skyblue;
}
Effect:
select match my
/*选取所有class中以my开头的li css*/
li[class|="my"] {
background-color: skyblue;
}
Effect:
[attribute^=value]: Matches every element whose attribute value starts with the specified value.
Compared with [attribute|=value], the usage of ^ can be selected as long as it starts with value
/*选取所有class中以my开头的li css*/
li[class^="my"] {
background-color: skyblue;
}
Effect:
If it is not exactly equal to value, it will not be matched. At this time, when modifying the match to the myli field, the last li will not be selected
/*选取所有class中以myli开头的li css*/
li[class^="myli"] {
background-color: skyblue;
}
Effect:
[attribute$=value]: Matches every element whose attribute value ends with the specified value.
Contrary to ^, $ matches the ending character
/*选取所有class中以end结尾的li css*/
li[class$="end"] {
background-color: skyblue;
}
Effect:
[attribute*=value]: Matches every element whose attribute value contains the specified value.
/*选取所有class中包含myli的li css*/
li[class*="myli"] {
background-color: skyblue;
}
Effect:
In addition, the writing method of multiple conditional selection
/*选取所有class中即包含myli和title的li css*/
li[class*="myli"][class*="title"] {
background-color: skyblue;
}
Effect:
