CSS 选择器及其优先级

选择器	格式	优先级权重
id 选择器	#id	100
类选择器	#classname	10
属性选择器	a[ref=“eee”]	10
伪类选择器	li:last-child	10
标签选择器	div	1
伪元素选择器	li::after	1
相邻兄弟选择器	h1+p	0
子选择器	ul>li	0
后代选择器	li a	0
通配符选择器	*	0

注意事项：

!important 声明的样式的优先级最高；
如果优先级相同，则最后出现的样式生效；
继承得到的样式的优先级最低；
通用选择器（*）、子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以它们的权值都为 0 ；
样式表的来源不同时，优先级顺序为：内联样式 > 内部样式 > 外部样式 > 浏览器用户自定义样式 > 浏览器默认样式。

1. ID 选择器

为标有特定“id”的html元素来指定特定的样式，以“#”来定义。

<style>
    #green{
        color: green;
    }
</style>
<body>
    <h1 id="green">我是绿色的</h1>
    <h2 id="no"> 我没有被设置，我不是绿色的</h2>
</body>

2. 属性选择器

参考文档：www.w3school.com.cn/css/css_sel…

为具有指定属性的html元素设置样式。

2-1. 如果希望选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器。

*[title] {color:red;}

2-2. 可以只对有 href 属性的锚（a 元素）应用样式：

a[href] {color:red;}

2-3. 可以根据多个属性进行选择，只需将属性选择器连接在一起即可。

例如，为了将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色，可以这样写：

a[href][title] {color:red;}

2-4. 属性与属性值必须完全匹配

<p class="important warning">This paragraph is a very important warning.</p>

p[class="important warning"] {color: red;}

2-5. 根据部分属性值选择

如果需要根据属性值中的词列表的某个词进行选择，则需要使用波浪号（~）。

假设您想选择 class 属性中包含 important 的元素，可以用下面这个选择器做到这一点：

p[class~="important"] {color: red;}

2-6. 子串匹配属性选择器

类型	描述
[abc^="def"]	选择 abc 属性值以 "def" 开头的所有元素
[abc$="def"]	选择 abc 属性值以 "def" 结尾的所有元素
[abc*="def"]	选择 abc 属性值中包含子串 "def" 的所有元素

例如：如果希望对指向 W3School 的所有链接应用样式，不必为所有这些链接指定 class，再根据这个类编写样式，而只需编写以下规则：

a[href*="w3school.com.cn"] {color: red;}

2-7. 特定属性选择类型

*[lang|="en"] {color: red;}

上面这个规则会选择 lang 属性等于 en 或以 en- 开头的所有元素。因此，以下示例标记中的前三个元素将被选中，而不会选择后两个元素：

<p lang="en">Hello!</p>
<p lang="en-us">Greetings!</p>
<p lang="en-au">G'day!</p>
<p lang="fr">Bonjour!</p>
<p lang="cy-en">Jrooana!</p>

3. 类选择器

在 CSS 中，类选择器以一个点号显示：

.center {text-align: center}
// p 元素有 center 类。这意味着将遵守 ".center" 选择器中的规则。
<p class="center">
    This paragraph will also be center-aligned.
</p>

4. 伪类选择器

用来描述一个元素的特殊状态。比如第一个元素、某个元素的子元素、鼠标点击的元素。

静态伪类: 只能用于超链接的样式

:link 超链接点击之前
:visited 链接被访问过之后

动态伪类：针对所有标签都适用的样式

:hover “悬停”：鼠标放到标签上的时候
:active “激活”：鼠标点击标签，但是不松手时。
:focus 是某个标签获得焦点时的样式（比如某个输入框获得焦点）

使用举例：

a:link 未访问的链接显示的样式；
a:visited 已访问的链接显示的样式；
a:hover 鼠标挪动到链接上(重要)显示的样式；
a:active 激活的链接（鼠标在链接上长按住未松开）显示的样式；

5. 伪元素选择器

伪元素用于设置元素指定部分的样式。

参考文档：www.w3school.com.cn/css/css_pse…

5-1. `::first-line` 伪元素

::first-line 伪元素用于向文本的首行添加特殊样式（只适用于块级元素）。

下面的例子为所有

元素中的首行添加样式：

p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}

5-2. `::first-letter` 伪元素

::first-letter 伪元素用于向文本的首字母添加特殊样式（只适用于块级元素）。

下面的例子设置所有

元素中文本的首字母格式：

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

5-3. `::before` 伪元素

::before 伪元素可用于在元素内容之前插入一些内容。

下面的例子在每个 <h1> 元素的内容之前插入一幅图像：

h1::before {
  content: url(smiley.gif);
}

5-4. `::after` 伪元素

::after 伪元素可用于在元素内容之后插入一些内容。

下面的例子在每个 <h1> 元素的内容之后插入一幅图像：

h1::after {
  content: url(smiley.gif);
}

5-5. ::selection 伪元素

::selection 伪元素匹配用户选择的元素部分。

以下 CSS 属性可以应用于 ::selection：

color
background
cursor
outline

下例使所选文本在黄色背景上显示为红色：

::selection {
  color: red; 
  background: yellow;
}

总结：所有 CSS 伪元素

::after	p::after	在每个 p 元素之后插入内容。
::before	p::before	在每个 p 元素之前插入内容。
::first-letter	p::first-letter	选择每个 p 元素的首字母。
::first-line	p::first-line	选择每个 p 元素的首行。
::selection	p::selection	选择用户选择的元素部分。

6. 相邻兄弟选择器

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

例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：

h1 + p {margin-top:50px;}

这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。

<style type="text/css">
    h1 + p {margin-top:50px;}
</style>
// ...
<body>
    <h1>This is a heading.</h1>
    <p>This is paragraph.</p>
    <p>This is paragraph.</p>
    <p>This is paragraph.</p>
    <p>This is paragraph.</p>
    <p>This is paragraph.</p>
</body>

7. 子选择器

如果只选择某个元素的子元素，请使用子元素选择器。

参考文档：www.w3school.com.cn/css/css_sel…

例如，如果希望选择只作为 h1 元素子元素的 strong 元素，可以这样写：

h1 > strong {color:red;}

这个规则会把第一个 h1 下面的两个 strong 元素变为红色，但是第二个 h1 中的 strong 不受影响：

<h1>This is 
    <strong>very</strong> 
    <strong>very</strong> important.
</h1>
<h1>This is 
    <em>really 
        <strong>very</strong>
    </em> important.
</h1>

8. 后代选择器

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

参考文档：www.w3school.com.cn/css/css_sel…

举例来说，如果希望只对 h1 元素中的 em 元素应用样式，可以这样写：

h1 em {color:red;}

上面这个规则会把作为 h1 元素后代的 em 元素的文本变为红色。其他 em 文本（如段落或块引用中的 em）则不会被这个规则选中：

<h1>This is a <em>important</em> heading</h1>
<p>This is a <em>important</em> paragraph.</p>

9. 通配符选择器

    * {
        // ...
    }

CSS 选择器

CSS 选择器及其优先级

1. ID 选择器

2. 属性选择器

2-1. 如果希望选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器。

2-2. 可以只对有 href 属性的锚（a 元素）应用样式：

2-3. 可以根据多个属性进行选择，只需将属性选择器连接在一起即可。

2-4. 属性与属性值必须完全匹配

2-5. 根据部分属性值选择

2-6. 子串匹配属性选择器

2-7. 特定属性选择类型

3. 类选择器

4. 伪类选择器

静态伪类: 只能用于超链接的样式

动态伪类：针对所有标签都适用的样式

5. 伪元素选择器

5-1. ::first-line 伪元素

5-2. ::first-letter 伪元素

5-3. ::before 伪元素

5-4. ::after 伪元素

5-5. ::selection 伪元素

总结：所有 CSS 伪元素

6. 相邻兄弟选择器

7. 子选择器

8. 后代选择器

9. 通配符选择器

5-1. `::first-line` 伪元素

5-2. `::first-letter` 伪元素

5-3. `::before` 伪元素

5-4. `::after` 伪元素