选择器-类-ID-伪类

类选择器（Class selectors）

通过设置元素的 class 属性，可以为元素指定类名。类名由开发者自己指定。 文档中的多个元素可以拥有同一个类名。

在写样式表时，类选择器是以英文句号（.）开头的。

ID选择器（ID selectors）

通过设置元素的 id 属性为该元素制定ID。ID名由开发者指定。每个ID在文档中必须是唯一的。

在写样式表时，ID选择器是以#开头的。

//如果多于一个规则指定了相同的属性值都应用到一个元素上，CSS规定拥有更高确定度的选择器优先级更高。ID选择器比类选择器更具确定度, 而类选择器比标签选择器（tag selector）更具确定度。

你也可以将多个选择器组合起来构成更确定的选择器。

比如，选择器.key 选中所有class属性为 key的元素. 选择器 p.key 选中所有class属性为key的<p> 元素。

除了class 和 id，你还可以用方括号的形式指定其他属性。比如，选择器 [type=‘button‘] 选中所有 type 属性为 button 的元素。

如果样式中包含冲突的规则，且它们具有相同的确定度。那么，后出现的规则优先级高。

如果你遇到规则冲突，你可以增加其中一条的确定度或将之移到后面以使它具有更高优先级。

伪类选择器（Pseudo-classes selectors）

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

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

伪类列表

• :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
• <a target="_blank" href="https://www.ancii.com/link/v1/7DZIIP7vza1Pnnr0kWwZDn3SutAen2PjulOkyfBdUhuQgRbRbeZ9sE92fNY7N1InRa4sWLWIqjt4vRXIX145QQ/" rel="nofollow" title=":disabled">:disabled</a>

  实例: 使用基于关系的选择器和伪类选择器
  通过使用基于关系的选择器和伪类选择器，你可以构造出复杂的叠加算法。这是一个常用的技巧，比如可以用来创建纯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>