属性选择器 - CSS（层叠样式表） | MDN (opens new window)
CSS 选择器 - CSS（层叠样式表） | MDN (opens new window)
# 属性选择器
属性选择器可以根据元素的属性及属性值来选择元素。
- Elector[attr]
Elector[attr] ：选择具有attr属性的Elector元素。
<div title='标题'>div标签</div>
<style>
div[title] { color: red; }
</style>
- Elector[attr=val]
Elector[attr=val] ：选择具有attr属性且属性值等于val的Elector元素。
<input type='text' />
<style>
input[type='text'] { background: red; }
</style>
- Elector[attr~=val]
Elector[attr~=val] ：选择具有attr属性且属性值包含val的Elector元素。
<input type='text' class='input warning' />
<style>
input[class~='warning'] { background: red; }
/style>
- Elector[attr^=val]
Elector[attr^=val] ：选择具有attr属性且属性值以val开头的Elector元素。
<input type='text' class='warning' />
<style>
input[class^='warn'] { background: red; }
</style>
- Elector[attr$=val]
Elector[attr$=val] ：选择具有attr属性且属性值以val结尾的Elector元素。
<input type='text' class='warning' />
<style>
input[class$='ing'] { background: red; }
</style>
# 关系选择器
关系选择器可以根据元素与元素之间所处关系来选择元素
- 后代选择器
后代选择器 可以选择作为某元素后代的元素。
<h1> <strong> strong标签 </strong> </h1>
<style>
h1 strong { color: red; }
</style>
- 子元素选择器
子元素选择器 只能选择作为某元素子元素的元素(不包含孙子元素)。
<h1> <strong> 显示红色字 </strong><strong> 不显示红色字 </strong> </h1>
<style>
h1>strong { color: red; }
</style>
- 相邻兄弟选择器
相邻兄弟选择器 可选择紧接在另一元素后的元素，且二者有相同父元素。
<ul>
<li>不显示红字1</li>
<li>显示红字2</li>
<li>显示红字3</li>
</ul>
<style>
li+li { color: red; }
</style>