css属性和关系选择器

属性选择器

属性选择器可以根据元素的属性及属性值来选择元素

Elector[attr] ：选择具有attr属性的Elector元素

实例

<div title='标题'>div标签</div> 
<style> 
 div[title] { color: red; } 
</style>

Elector[attr=val] ：选择具有attr属性且属性值等于val的Elector元素

实例

<input type='text' /> 
<style> 
 input[type='text'] { background: red; } 
</style>

Elector[attr~=val] ：选择具有attr属性且属性值包含val的Elector元素。

实例

<input type='text' class='input warning' /> 
<style> 
 input[class~='warning'] { background: red; } 
</style>

Elector[attr^=val]：选择具有attr属性且属性值以val开头的Elector元素

实例

<input type='text' class='warning' /> 
<style> 
 input[class^='warn'] { background: red; } 
</style>

Elector[attr$=val] ：选择具有attr属性且属性值以val结尾的Elector元素

实例

<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>