See the Pen by Li Xinyang (-xinyang) on CodePen.

    选择器可被看做表达式，通过它可以选择相应的元素并应用不同的样式。

    • 简单选择器
    • 元素选择器
    • 组合选择器

    简单选择器

    简单选择器可组合使用。

    标签选择器
    类选择器

    以 . 开头，名称可包含字母，数字，-，_，但必须以字母开头。它区分大小写并可出现多次。

    1. <div>
    2.   <p>Sample Paragraph</p>
    3.   <p class="special bold">Sample Paragraph</p>
    4.   <p>Sample Paragraph</p>
    5. </div>
    7. <style type="text/css">
    8.   p {
    9.     color: blue
    10.   }
    11.   .special {
    12.     color: orange;
    13.   }
    14.   .bold {
    15.     font-weight: bold;
    16.   }
    17. </style>
    id 选择器

    #idName 以 # 开头且只可出现一次，其命名要求于 .className 相同。

    通配符选择器
    1. <div>
    2.   <p>Sample Paragraph</p>
    3. </div>
    5. <style type="text/css">
    6.   * {
    7.     color: blue;
    8.   }
    9. </style>
    属性选择器

    [attr] 或 [attr=val] 来选择相应的元素。#nav{...} 既等同于 [id=nav]{...}。IE7+

    [attr|=val] 可以选择val开头及开头紧接-的属性值。IE7+

    [attr^=val] 可选择以val开头的属性值对应的元素，如果值为符号或空格则需要使用引号 ""。IE7+

    [attr$=val] 可选择以val结尾的属性值对应的元素。IE7+

    [attr*=val] 可选择以包含val属性值对应的元素。IE7+

    伪类选择器

    常用伪类选择器：

    • :link IE6+
    • :visited IE7+
    • :hover IE6中仅可用于链接
    • :active IE6/7中仅可用于链接
    • :enabled IE9+
    • :disabled IE9+
    • :checked IE9+
    • :first-child IE8+
    • :last-child IE9+
    • :nth-child(even) 可为 odd even 或数字 IE9+
    • :nth-last-child(n) n从 0 开始计算 IE9+
    • :only-child 仅选择唯一的元素 IE9+
    • :only-of-type IE9+
    • :first-of-type IE9+
    • :last-of-type IE9+
    • :nth-of-type(even) IE9+
    • :nth-last-of-type(2n) IE9+

    不常用伪类选择器：

    • :empty 选中页面中无子元素的标签 IE9+
    • :root 选择 HTML 根标签 IE9+
    • :not() 参数为一般选择器 IE9+
    • :target 被锚点选中的目标元素 IE9+
    • :lang() 选中语言值为某类特殊值的元素 IE7+

    NOTE：element:nth-of-type(n) 指父元素下第 n 个 元素，element:nth-child(n) 指父元素下第 n 个元素且元素为 element，若不是，选择失败。具体细节请在使用时查找文档。

    1. <div>
    2.   <a href="http://sample-site.com" title="Sample Site">Sample Site</a>
    3. </div>
    4. <style type="text/css">
    5.   /* 伪类属性定义有顺序要求！ */
    6.   a:link {
    7.     color: gray;
    8.   a:visited {
    9.     color:red;
    10.   }
    11.   a:hover {
    12.     color: green;
    13.     /* 鼠标悬停 */
    14.   }
    15.   a:active {
    16.     color: orange;
    17.     /* 鼠标点击 */
    18.   }
    19. </style>

    其他选择器

    伪元素选择器
    • ::first-letter IE6+
    • ::first-line IE6+
    • ::before{content: "before"} 需与 content 一同使用 IE8+
    • ::after{content: "after"} 需与 content 一同使用 IE8+
    • ::selection 被用户选中的内容（鼠标选择高亮属性）IE9+ Firefox需用 -moz 前缀
    组合选择器
    • 后代选择器 .main h2 {...}，使用 表示 IE6+
    • 子选择器 .main>h2 {...}，使用>表示 IE7+
    • 兄弟选择器 h2+p {...}，使用+表示 IE7+
      • h2~p {...}，使用~表示（此标签无需紧邻）IE7+
    选择器分组

    继承、优先、层级

    继承

    子元素继承父元素的样式，但并不是所有属性都是默认继承的。通过文档中的 inherited: yes 来判断属性是否可以自动继承。

    自动继承属性：

    • color
    • font
    • text-align
    • list-style
    • …

    非继承属性：

    • background
    • border
    • position
    • …
    优先

    CSS Specificity Calculator 可以在找到。更多关于 CSS 优先级别的信息可以在这里找到（英文）。

    计算方法：

    • a = 行内样式
    • b = id 选择器的数量
    • c = 类、伪类的属性选择器的数量
    • d = 标签选择器和伪元素选择器的数量

    NOTE：从上到下优先级一次降低，且优先级高的样式会将优先级低的样式覆盖。大致公式（并不准确）如下。

    改变优先级
    • 改变样式声明先后顺序
    • 提升选择器优先级
    层叠