原创作品，未经许可不得转载
若页面中有多个<div>元素，运用在之前的课程中学到的知识，可以像下面这样设置页面中所有<div>的样式：
<!DOCTYPE html>
<html>
<head>
<title>CSS基础课程</title>
<style type="text/css">
div {
padding: 20px 10px;
margin: 20px;
background-color: #0000ff;
text-align: center;
}
</style>
</head>
<body>
<div>第一个DIV</div>
<div>第二个DIV</div>
<div>第三个DIV</div>
</body>
</html>
若是只想将样式应用在第二个<div>呢？
可以给第二个元素设置name属性，然后使用属性选择器只选取有此属性的元素：
<!DOCTYPE html>
<html>
<head>
<title>CSS基础课程</title>
<style type="text/css">
div[name=div1] {
padding: 20px 10px;
margin: 20px;
background-color: #0000ff;
text-align: center;
}
</style>
</head>
<body>
<div>第一个DIV</div>
<div name="div1">第二个DIV</div>
<div>第三个DIV</div>
</body>
</html>
上面的代码中，首先给第二个<div>设置了name属性，属性的值为div1。
然后，将<style>中的div选择器修改成了div[name=div1]。这就是属性选择器的语法。属性是被中括号（[]）括起来的。
div[name=div1]的意思是：将样式作用于<div>元素，并且它的name属性的值为div1。
如果将选择器div[name=div1]修改为div[name]，则表示选取的是<div>元素，并且有name属性，但不用管name属性的值是什么，只要有name属性就会被选中：
<!DOCTYPE html>
<html>
<head>
<title>CSS基础课程</title>
<style type="text/css">
div[name] {
padding: 20px 10px;
margin: 20px;
background-color: #0000ff;
text-align: center;
}
</style>
</head>
<body>
<div>第一个DIV</div>
<div name="div1">第二个DIV</div>
<div name="div2">第三个DIV</div>
</body>
</html>
上方的示例中，第二个和第三个<div>都有name属性，所以选择器div[name]的样式能作用在第二个和第三个<div>元素。