The matching conditions of this selector are more tolerant than the matching conditions of E[attr="value"]. The latter requires precise matching, while E[attr~="value"] does not require precise matching. As long as it is This element can be matched if there is a value in the attribute value list (the attribute value list is separated by spaces).
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</title>
<style type="text/css">
li{
list-style:none;
float:left;
height:20px;
line-height:20px;
width:20px;
border:1px solid #333;
border-radius:10px;
border-radius:10px;
border-radius:10px;
text-align:center;
color:green;
margin-right:5px;
}
li[id~="five"]{
color:red;
}
</style>
</head>
<body>
<div class="antzone">
<ul>
<li>1</li>
<li>2</li>
<li id="third">3</li>
<li>4</li>
<li id="five-good">5</li>
<li id="five good">6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
</body>
</html>The above code can set the font color of the sixth li element to red. Special attention should be paid to the fact that the attribute list must be separated by spaces.
Of course, multiple selectors can also be used together. The code is as follows:
li[id~="five"][title~="girl"]{
color:red;
}Next Section