通过使用基于关系的选择器和伪类选择器,创建纯CSS无JavaScript的下拉菜单

本文链接：https://blog.csdn.net/kollyQAQ/article/details/51136169

伪类选择器（Pseudo-classes selectors）

CSS伪类（pseudo-class）是加在选择器后面的用来指定元素状态的关键字。比如，:hover 会在鼠标悬停在选中元素上时应用相应的样式。

伪类和伪元素（pseudo-elements）不仅可以让你为符合某种文档树结构的元素指定样式，还可以为符合某些外部条件的元素指定样式：浏览历史(比如是否访问过 (:visited)，内容状态(如 :checked ), 鼠标位置 (如:hover).

伪类列表

实例: 使用伪类选择器EDIT

创建如下 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;}

最终效果:

Prefix 0001 default

更多细节

一般情况下，如果你提高了某个选择器的的确定度，你便提高它的优先级。

使用这个技巧，可以避免为大量标签指定 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>

例