属性选择器可以根据元素的属性及属性值来选择元素
实例
<div title='标题'>div标签</div>
<style>
div[title] { color: red; }
</style>
实例
<input type='text' />
<style>
input[type='text'] { background: red; }
</style>
实例
<input type='text' class='input warning' />
<style>
input[class~='warning'] { background: red; }
</style>
实例
<input type='text' class='warning' />
<style>
input[class^='warn'] { background: red; }
</style>
实例
<input type='text' class='warning' />
<style>
input[class$='ing'] { background: red; }
</style>
关系选择器可以根据元素与元素之间所处关系来选择元素
后代选择器可以选择作为某元素后代的元素
实例
<p>
<span>文本</span>
</p>
<style>
p span {color: red;}
</style>
子元素选择器只能选择作为某元素子元素的元素
实例
<p>
<span>红色文本</span>
<span>文本</span>
</p>
<style>
p>span {color: red;}
</style>
相邻兄弟选择器可选择紧接在另一元素后的元素,且二者有相同父元素
实例
<ul>
<li>文本</li>
<li>红色文本</li>
<li>红色文本</li>
</ul>
<style>
li+li { color: red; }
</style>
*声明:内容来源于网络收集和整理,版权归原著所有,如来源信息有误或侵犯权益,请联系站长作修改和删除处理。