This selector is more precise than the E[attr] selector. In addition to having the specified attributes, it must also have the specified attribute values.
The code example is as follows:
<!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="third"]{
color:red;
}
</style>
</head>
<body>
<div class="antzone">
<ul>
<li>1</li>
<li title="antzone" id="theid">2</li>
<li id="third">3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
</body>
</html> The above code can set the font in the li element with the id attribute and the attribute value third to red.
This selector can also be used together to improve the accuracy of matching. The code is as follows:
li[title="antzone"][id="theid"]{
color:red;
}The above code can have both title and id attributes and the attribute values are antzone and antzone respectively. The font in theid's li element is set to red.
Next Section