5.1 属性选择器

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

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>

5.2 关系选择器

关系选择器可以根据元素与元素之间所处关系来选择元素。

后代选择器

后代选择器可以选择作为某元素后代的元素。

<h1> <strong> strong标签 </strong> </h1><style>h1 strong { color: red; }</style>

子元素选择器

子元素选择器只能选择作为某元素子元素的元素。

<h1> <strong> 显示红色字 </strong><a><strong> 不显示红色字 </strong></a> </h1><style>h1 > strong { color: red; }</style>

相邻兄弟选择器

相邻兄弟选择器可选择紧接在另一元素后的元素，且二者有相同父元素。

<ul> <li>不显示红字1</li> <li>显示红字2</li> <li>显示红字3</li></ul><style>li + li { color: red; }</style>