通过使用基于关系的选择器和伪类选择器,创建纯CSS无JavaScript的下拉菜单
伪类选择器（Pseudo-classes selectors）
CSS伪类（pseudo-class）是加在选择器后面的用来指定元素状态的关键字。比如，:hover 会在鼠标悬停在选中元素上时应用相应的样式。
伪类和伪元素（pseudo-elements）不仅可以让你为符合某种文档树结构的元素指定样式，还可以为符合某些外部条件的元素指定样式：浏览历史(比如是否访问过 (:visited)， 内容状态(如 :checked ), 鼠标位置 (如:hover).
伪类列表
:link:visited:active:hover:focus:first-child:nth-child:nth-last-child:nth-of-type:first-of-type:last-of-type:empty:target:checked:enabled:disabled
实例: 使用伪类选择器
- 创建如下 HTML:
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Sample document</title> <link rel="stylesheet" href="style1.css"> </head> <body> <p>Go to our <a class="homepage" href="http://www.example.com/" title="Home page">Home page</a>.</p> </body> </html> - 编辑CSS:
a.homepage:link, a.homepage:visited { padding: 1px 10px 1px 10px; color: #fff; background: #555; border-radius: 3px; border: 1px outset rgba(50,50,50,.5); font-family: georgia, serif; font-size: 14px; font-style: italic; text-decoration: none; } a.homepage:hover, a.homepage:focus, a.homepage:active { background-color: #666; } - 保存文件用浏览器查看HTML文件 (将鼠标放到链接上查看效果):
Go to our Home page
基于关系的选择器
CSS还有多种基于元素关系的选择器。通过它们你可以更精确的选择元素。
| 选择器 | 选择的元素 |
A E |
任何是元素A的后代元素E (后代节点指A的子节点，子节点的子节点，以此类推) |
A > E |
任何元素A的子元素 |
E:first-child |
任何元素的第一个子元素E |
B + E |
任何元素B的下一个兄弟元素E |
B ~ E |
B元素后面的拥有共同父元素的兄弟元素E |
你可以任意组合以表达更复杂的关系。
你还可以使用星号（*）来表示”任意元素“。
一个HTML表格有id 属性，但是它的行和单元格没有单独的id:
<table id="data-table-1">
...
<tr>
<td>Prefix</td>
<td>0001</td>
<td>default</td>
</tr>
...下面的规则使表格每行的第一个单元格字体为粗体，使第二个单元格使用等宽字体。这条规则只影响id为data-table-1的表格:
#data-table-1 td:first-child {font-weight: bolder;}
#data-table-1 td:first-child + td {font-family: monospace;}最终效果:
|
一般情况下，如果你提高了某个选择器的的确定度，你便提高它的优先级。
使用这个技巧，可以避免为大量标签指定 class 或 id 属性。CSS（引擎）会帮你做的。
在复杂设计中速度非常重要，避免使用复杂的依赖元素关系的规则可以使你的样式更有效率。
更多关于表格的例子，见 Tables。
实例: 使用基于关系的选择器和伪类选择器
通过使用基于关系的选择器和伪类选择器，你可以构造出复杂的叠加算法。这是一个常用的技巧，比如可以用来创建纯CSS无JavaScript的下拉菜单（pure-CSS dropdown menus）。关键点就是创建下面这类规则：
div.menu-bar ul ul {
display: none;
}
div.menu-bar li:hover > ul {
display: block;
}然后将这些规则应用到下面的HTML结构中：
<div class="menu-bar">
<ul>
<li>
<a href="example.html">Menu</a>
<ul>
<li>
<a href="example.html">Link</a>
</li>
<li>
<a class="menu-nav" href="example.html">Submenu</a>
<ul>
<li>
<a class="menu-nav" href="example.html">Submenu</a>
<ul>
<li><a href="example.html">Link</a></li>
<li><a href="example.html">Link</a></li>
<li><a href="example.html">Link</a></li>
<li><a href="example.html">Link</a></li>
</ul>
</li>
<li><a href="example.html">Link</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div> 一个HTML表格有id 属性，但是它的行和单元格没有单独的id:
<table id="data-table-1">
...
<tr>
<td>Prefix</td>
<td>0001</td>
<td>default</td>
</tr>
...下面的规则使表格每行的第一个单元格字体为粗体，使第二个单元格使用等宽字体。这条规则只影响id为data-table-1的表格:
#data-table-1 td:first-child {font-weight: bolder;}
#data-table-1 td:first-child + td {font-family: monospace;}最终效果:
|
一般情况下，如果你提高了某个选择器的的确定度，你便提高它的优先级。
使用这个技巧，可以避免为大量标签指定 class 或 id 属性。CSS（引擎）会帮你做的。
在复杂设计中速度非常重要，避免使用复杂的依赖元素关系的规则可以使你的样式更有效率。
更多关于表格的例子，见 Tables。