CSS 选择器

要将 CSS 样式应用于特定的 HTML 元素，首先需要找到该目标元素。

在 CSS 中，执行这一任务的样式规则部分称为选择器。选择器可以分为：简单选择器和组合选择器。

在属性声明块前面的部分，叫做选择器（用于向文档中的一组元素类型应用某些规则）。

h1 { color:red; }

1

h1 { color:red; }

可以理解为选择器是一个公式，通过表达式可以选中一系列的元素，然后样式就可以运用到选择的元素上。

简单选择器

tag{}    .className{}    #id{}    *{}    [att]{}    :link{}

1

tag{}    .className{}    #id{}    *{}    [att]{}    :link{}

简单选择器可以进行组合，需要同时得到满足。

img[src$=jpg]{}    #banner:hover{}

1

img[src$=jpg]{}    #banner:hover{}

[1] 标签（元素）选择器

标签选择器是指用 HTML 标签名作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。

// 标签名{属性声明1;属性声明2;属性声明3;...}
   p{color:blue;}      // 其优点在于：能够快速的为页面中同类型的标签统一设定样式，但不能设计差异化样式(缺点)。

1 2	// 标签名{属性声明1;属性声明2;属性声明3;...} p{color:blue;} // 其优点在于：能够快速的为页面中同类型的标签统一设定样式，但不能设计差异化样式(缺点)。

[2] 类选择器

类选择器使用“ . ”（英文点号）进行标识，后面紧跟类名。标签属性，使用 class="类名" 即可。

//  类名{属性声明1;属性声明2;属性声明3;...}
 .className    // 必须以字母开头，区分大小写，可多次出现；其优势在于，可以为元素对象定义单独或相同的样式。

// 小技巧：长名称或词组可以使用中横线"-"来为选择器命名（如，courses-hot）;不建议使用下划线"_"来命名CSS选择器。
// 兼容：在ie6中使用_tips的选择器命名是无效的，同时能良好的区分JS变量命名（推荐使用"_"）；
// 另，不要使用纯数字、中文等命名，尽量使用英文字母来表示。

// 类名{属性声明1;属性声明2;属性声明3;...}

.className // 必须以字母开头，区分大小写，可多次出现；其优势在于，可以为元素对象定义单独或相同的样式。

// 小技巧：长名称或词组可以使用中横线"-"来为选择器命名（如，courses-hot）;不建议使用下划线"_"来命名CSS选择器。

// 兼容：在ie6中使用_tips的选择器命名是无效的，同时能良好的区分JS变量命名（推荐使用"_"）；

// 另，不要使用纯数字、中文等命名，尽量使用英文字母来表示。

<div class="courses_hot cRed"></div>

1.多类名选择器      .courses_hot.cRed{color: red;}          // 可以给标签指定多个类名，从而达到更多的选择目的
// 样式显示效果与HTML元素中类名的先后顺序没有关系，受CSS样式的继承、层叠和优先级影响；HTML元素属性中，各个类名用空格隔开。

2.结合元素的类选择器        div.cRed{color: red;}

1.多类名选择器 .courses_hot.cRed{color: red;} // 可以给标签指定多个类名，从而达到更多的选择目的

// 样式显示效果与HTML元素中类名的先后顺序没有关系，受CSS样式的继承、层叠和优先级影响；HTML元素属性中，各个类名用空格隔开。

2.结合元素的类选择器 div.cRed{color: red;}

[3] id 选择器

id 选择器使用 “#” 进行标识，后面紧跟 id 名（HTML 元素的 id 属性值）。

// #id名{属性声明1;属性声明2;属性声明3;...}
   #idName      // 只能出现一次，可以这样理解：元素的id值是唯一的，只能对应于文档中某一个具体的元素

1 2	// #id名{属性声明1;属性声明2;属性声明3;...} #idName // 只能出现一次，可以这样理解：元素的id值是唯一的，只能对应于文档中某一个具体的元素

在实际中，浏览器并不会检查 ID 的唯一性，设置多个同名 ID，可以为这些具有相同 ID 的元素应用相同样式；

但，在编写 DOM 脚本时只能识别该 id 的第一个元素。

[4] 通配符选择器 *

通配符选择器用 “*” 表示，它是所有选择器中作用范围最广的，能够匹配页面中所有的元素。

// *{属性声明1;属性声明2;属性声明3;...}
 * { color: red; }
 * { margin:0;padding:0; }         // cssRset中，清除所有HTML元素的默认边距

 // 通配符选择器在实际中应用场景比较少，了解即可

// *{属性声明1;属性声明2;属性声明3;...}

* { color: red; }

* { margin:0;padding:0; } // cssRset中，清除所有HTML元素的默认边距

// 通配符选择器在实际中应用场景比较少，了解即可

[5] 属性选择器 属性选择器根据元素的属性及属性值来获取拥有该属性的元素（IE6- 不支持）。

E[att]   选中具有某个属性的元素(也就是说，属性值中存在att属性即可)
E[att=val]   选中属性值是某个特殊值的元素（也就是说，属性值完全等于val）
E[att~=val]   选中某个属性值包含某个值的元素且这个值是用空格来分隔的
    如，.sports{}等同于[class~=sports]{}    // 类选择器是这种选择器的一个特例

E[att*=val]  属性值中包含了val字符，并且可以在任意位置
E[att|=val]  匹配具有att属性，且属性值是以"val"开头并用"-"分割的元素E
E[att^=val]  匹配具有att属性，且属性值以val开头的元素E    // 属性值是一个符号或有空格，需要用引号
E[att$=val]  匹配具有att属性，且属性值为以val结尾的元素E

E[att] 选中具有某个属性的元素(也就是说，属性值中存在att属性即可)

E[att=val] 选中属性值是某个特殊值的元素（也就是说，属性值完全等于val）

E[att~=val] 选中某个属性值包含某个值的元素且这个值是用空格来分隔的

如，.sports{}等同于[class~=sports]{} // 类选择器是这种选择器的一个特例

E[att*=val] 属性值中包含了val字符，并且可以在任意位置

E[att|=val] 匹配具有att属性，且属性值是以"val"开头并用"-"分割的元素E

E[att^=val] 匹配具有att属性，且属性值以val开头的元素E // 属性值是一个符号或有空格，需要用引号

E[att$=val] 匹配具有att属性，且属性值为以val结尾的元素E

[6] 伪类选择器（都是以冒号开头）

伪类选择器（用冒号表示），用于向某些选择器添加特殊的效果，比如，给链接添加特殊效果或选择第 n 个元素。

[6-1] 链接伪类选择器   // 伪类顺序（love-hate）？↓

~~:link（未访问的链接）~~

~~:visited（已访问的链接）~~

~~:focus（获得焦点的链接）~~

:hover（鼠标移动到链接上）

~~:active（选定的链接）~~

a:link{background-color:pink;} /*品红，未访问*/ a:visited{color:orange;} /*字体颜色为橙色，已被访问*/ /* visited伪类只能设置字体颜色、边框颜色、outline颜色的样式 */ a:focus{background-color:lightgrey;} /*浅灰，拥有焦点*/ a:hover{background-color:lightblue;} /*浅蓝，鼠标悬停*/ a:active{background-color:lightgreen;} /*浅绿，正被点击*/ // 用于链接时，顺序不能变；且，前两个只能用于链接，后两个可以用到其他元素上。 // 在实际开发中，通常设置a元素的初始样式，然后对:hover进行设定，其他的状态很少使用。 a{ font-size:14px; color:gray; } a:hover{ color:red; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

  a:link{background-color:pink;}    /*品红，未访问*/
  a:visited{color:orange;}    /*字体颜色为橙色，已被访问*/
     /* visited伪类只能设置字体颜色、边框颜色、outline颜色的样式 */
  a:focus{background-color:lightgrey;}    /*浅灰，拥有焦点*/
  a:hover{background-color:lightblue;}    /*浅蓝，鼠标悬停*/
  a:active{background-color:lightgreen;}    /*浅绿，正被点击*/

// 用于链接时，顺序不能变；且，前两个只能用于链接，后两个可以用到其他元素上。
// 在实际开发中，通常设置a元素的初始样式，然后对:hover进行设定，其他的状态很少使用。
     a{
        font-size:14px;
        color:gray;
     }
     a:hover{
        color:red;
     }

[6-2] UI 元素伪类选择器

UI 元素伪类包括 :enabled、:disabled、:checked 三个，主要针对于 form 元素，IE8- 浏览器不支持。

:enabled，元素可用时的状态：input:enabled{color:#ccc;}

:disabled，元素不可用时的状态；input:disabled{color:#ccc;}

:checked，选中时的状态；input:checked{color:red;}

input:enabled{ border: 1px solid black; background-color: transparent; } input:disabled{ border: none; background-color: gray; } input:checked{ outline: 2px solid lightblue; } <button onclick = "btn.disabled = false;">按钮可用</button> <button onclick = "btn.disabled = true;">按钮不可用</button> <input type="button" id="btn" value="按钮"> <br> <label>Male<input type="radio" name="sex" /></label> <label>Female<input type="radio" name="sex" /></label>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

input:enabled{
    border: 1px solid black;
    background-color: transparent;
}
input:disabled{
    border: none;
    background-color: gray;
}
input:checked{
    outline: 2px solid lightblue;
}

<button onclick = "btn.disabled = false;">按钮可用</button>
<button onclick = "btn.disabled = true;">按钮不可用</button>
<input type="button" id="btn" value="按钮">
<br>
<label>Male<input type="radio" name="sex" /></label>
<label>Female<input type="radio" name="sex"  /></label>

[6-3] 结构（位置）伪类选择器（假设 E 为父元素，F 为子元素，n 可以是数字、关键字或公式） // IE8- 不支持

[ 不限元素类型 ] :nth-child(n)、:nth-last-child(n)、first-child、last-child、:only-child

// 以 p:first-child 为例，代表的并不是 p 的第一个子元素，而是 p 元素是某个元素的第一个子元素

E F:nth-child(n) 选择父元素的第 n 个子元素，不论元素的类型
E F:nth-last-child(n) 选择父元素的倒数第 n 个子元素
E F:first-child 父元素的第一个子元素，与 E F:nth-child(1) 等同
E F:last-child 父元素的最后一个子元素，与 E F:nth-last-child(1) 等同
E F:only-child 选择父元素中只包含一个子元素

// :first-child和:last-child只有IE6-浏览器不支持 // n可以是整数(从1开始)，也可以是公式，也可以是关键字(even、odd) p:first-child 　　代表的并不是<p>的第一个子元素，而是<p>元素是某元素的第一个子元素 p > i:first-child 匹配所有<p>元素中的第一个<i>元素 p:first-child i 　　匹配所有作为第一个子元素的<p>元素中的所有<i>元素 li:nth-child(odd){color: red;} li:nth-last-child(3){color: green;} li:first-child{color: blue;} li:last-child{color: yellow;} div:only-child{background-color:lightgrey;} <ul> <li><div>第一个DIV</div></li> <li><div>第二个DIV</div></li> <li><div>第三个DIV</div></li> <li><div>第四个DIV</div></li> <li><div>第五个DIV</div></li> <li><div>第六个DIV</div></li> </ul>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

// :first-child和:last-child只有IE6-浏览器不支持
// n可以是整数(从1开始)，也可以是公式，也可以是关键字(even、odd)

p:first-child    　　代表的并不是<p>的第一个子元素，而是<p>元素是某元素的第一个子元素
p > i:first-child     匹配所有<p>元素中的第一个<i>元素
p:first-child i 　　  匹配所有作为第一个子元素的<p>元素中的所有<i>元素

li:nth-child(odd){color: red;}
li:nth-last-child(3){color: green;}
li:first-child{color: blue;}
li:last-child{color: yellow;}
div:only-child{background-color:lightgrey;}

<ul>
    <li><div>第一个DIV</div></li>
    <li><div>第二个DIV</div></li>
    <li><div>第三个DIV</div></li>
    <li><div>第四个DIV</div></li>
    <li><div>第五个DIV</div></li>
    <li><div>第六个DIV</div></li>
</ul>

[ 指定类型 ] :nth-of-type(n)、:nth-last-of-type(n)、:first-of-type、:last-of-type、:only-of-type

// 以 E F:first-of-type 为例，指的是 E（父元素）中第一个 F 类型的子元素。

E F:nth-of-type(n) 选择父元素的具有指定类型的第 n 个子元素

E F:nth-last-of-type(n) 选择父元素的具有指定类型的倒数第 n 个子元素

E F:first-of-type 选择父元素中具有指定类型的第 1 个子元素，与 E F:nth-of-type(1) 相同

E F:last-of-type 选择父元素中具有指定类型的最后 1 个子元素，与 E F:nth-last-of-type(1) 相同

E F:only-of-type 选择父元素中只包含一个同类型的子元素

.box div:nth-of-type(even){color: red;} .box p:nth-last-of-type(3){color: green;} .box div:first-of-type{color: blue;} .box p:last-of-type{color: yellow;} .box div:only-of-type{color: pink;} <div class="box"> <div>第一个div</div> <p>第一个p</p> <div>第二个div</div> <p>第二个p</p> <div class="in">第三个div</div> <p>第三个p</p> </div> <div class="box"> <div>第四个div</div> </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

.box div:nth-of-type(even){color: red;}
.box p:nth-last-of-type(3){color: green;}
.box div:first-of-type{color: blue;}
.box p:last-of-type{color: yellow;}
.box div:only-of-type{color: pink;}

<div class="box">
    <div>第一个div</div>
    <p>第一个p</p>
    <div>第二个div</div>
    <p>第二个p</p>
    <div class="in">第三个div</div>
    <p>第三个p</p>
</div>
<div class="box">
    <div>第四个div</div>
</div>

[6-4] 其他不常用伪类选择器

:empty    选中没有子元素的元素
:root 选中 html 根标签
:not()    选中不包含某个选择器的元素（括号里的参数是某个简单选择器）
:target    可以选中一些被锚点选中为目标的元素（用于选取当前活动的目标元素）
:lang()    可以选中 lang 值是一些特殊值的元素（匹配某个语言，IE7- 浏览器不支持）

p:lang(en) 匹配语言为"en"的<p> // :not选择器常用于导航之间的竖线处理，如li:not(:last-of-type) :root{color:red;} div:not{background-color: lightgrey;} p:empty{height:30px;width:30px;background:pink;} :target{color:blue;} <body> <a href="#test">测试</a> <div>第一个div</div> <p>第一个p</p> <div id="test">第二个div</div> <p>第二个p</p> <p></p> </body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

p:lang(en) 匹配语言为"en"的<p>
// :not选择器常用于导航之间的竖线处理，如li:not(:last-of-type)
:root{color:red;}
div:not{background-color: lightgrey;}
p:empty{height:30px;width:30px;background:pink;}
:target{color:blue;}

<body>
    <a href="#test">测试</a>
    <div>第一个div</div>
    <p>第一个p</p>
    <div id="test">第二个div</div>
    <p>第二个p</p>
    <p></p>
</body>

另，不仅可以使用单一伪类，也可以伪类结合使用。

// 顺序无关 div:hover:first-child{background-color: lightgreen;} div:last-of-type:active{background-color: lightblue;} <div>第一个div</div> <div>第二个div</div>

1
2
3
4
5
6

// 顺序无关
div:hover:first-child{background-color: lightgreen;}
div:last-of-type:active{background-color: lightblue;}

    <div>第一个div</div>
    <div>第二个div</div>

[7] 伪元素选择器（前面有两个冒号） { content属性、计数器？↓ }

伪元素，“伪装成元素”，但不是元素，这与生成内容（主要指由浏览器创建的内容，而不是由标志或内容来表示）相关。生成内容主要由 ::before 和 ::after 伪元素来实现，当然伪元素还包括 ::first-line、::first-letter 和 ::selection。

E::first-letter 文本的第一个单词或字（如中文、日文、韩文等）

所有前导标点符号应与第一个字母一同应用该样式；只能与块级元素关联；只有当选择器部分和左大括号之间有空格时，IE6- 浏览器才支持（因为 first-letter 中存在连接符的原因）。

div:first-letter{color: red;}

1

div:first-letter{color: red;}

E::first-line 文本第一行（首行特殊样式）

只能与块级元素关联; 只有当选择器部分和左大括号之间有空格时，IE6- 才支持。

div:first-line{color: red;}

1

div:first-line{color: red;}

E::selection 可改变被选中文本的样式 // IE8- 浏览器不支持

Firefox 浏览器需要添加 -moz- 前缀；只支持双冒号写法；只支持颜色和背景颜色两个样式

div::selection{color: red;}

1

div::selection{color: red;}

在 E 元素内部的开始位置和结束位置创建一个元素，该元素为行内元素，且必须要结合 content 属性使用。

E:after、E:before 在旧版本里是伪元素，CSS3 规范中“:”用来表示伪类，“::”表示伪元素，但是在高版本浏览器中E:after 和 E:before 会被自动识别为 E::after、E::before，这样做的目的是用来做兼容处理。

E:before（IE7- 浏览器不支持）在元素内容的最开始插入生成内容

默认这个伪元素是行内元素，且继承元素可继承的属性；IE7- 浏览器中必须声明 !DOCTYPE，否则不起作用

div:before{content:"前缀"}

1

div:before{content:"前缀"}

E:after（IE7-浏览器不支持）在元素内容的最后插入生成内容

默认这个伪元素是行内元素，且继承元素可继承的属性；IE7- 浏览器中必须声明 !DOCTYPE，否则不起作用

div:after{content:"后缀"}

1

div:after{content:"后缀"}

组合（复合）选择器

组合选择器，由两个或多个基础选择器，通过不同的方式组合而成，目的是为了更准确更精细的选择目标元素。

[1] 交集选择器

~ 由两个选择器构成，第一个为标签选择器，第二个为 class 选择器，两个选择器之间不能有空格，如 div.sch。

交集选择器是“并且”（即...又...）的意思，如 p.one 指的是类名为 one 的段落标签。使用相对较少，不推荐。

[2] 后代选择器 .main h2{color:red;}

~，又称为包含选择器，用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格来分隔。当标签发生嵌套时，内层标签就称为外层标签的后代。

简单来说就是，它能选择任何包含在内的标签。

[3] 子选择器（IE6- 不支持） .main>h2{color:red;}

~，即子元素选择器，其只能选择作为某元素子元素的元素。其写法是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接。~~与后代选择器的区别是，后代指的是所有嵌套的“后辈”中选择，而子指的是直接嵌套中的“子”。~~

[4] 兄弟选择器

相邻~（IE6- 不支持） h2+p{color:red;}
通用~（IE7- 不支持） h2~p{color:red;}

[5] 选择器分组，又称并集选择器

~，各个选择器通过逗号连接而成。任何形式的选择器（包括标签选择器、类选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同或部分相同，就可以使用选择器分组为它们定义相同的 CSS 样式。

h1,h2,h3{color:gray;font-family:sans-serif;}       // 将要分组的选择器放在规则左边，并用逗号隔开

// 选择器分组是“和”的意思，就是说只要用逗号隔开，所有选择器都会执行后面的样式，通常用于集体声明。

h1,h2,h3{color:gray;font-family:sans-serif;} // 将要分组的选择器放在规则左边，并用逗号隔开

// 选择器分组是“和”的意思，就是说只要用逗号隔开，所有选择器都会执行后面的样式，通常用于集体声明。

CSS 三大特性：继承、优先级和层叠

CSS（层叠样式表）最基本的一个特性就是层叠。冲突的声明通过层叠进行排序，由此确定最终的文档表示。

[1] 继承 inherit

在某个元素上的样式，它里面的子元素是可以继承的，但并不是所有都可以自动继承。

继承属性：color、font、text-align、list-style...
非继承属性：background、border、position...

// 查看文档 — 查看是否可以继承（inherited：Yes/NO）

所谓继承性，是指书写 CSS 样式表时，子标签会继承父标签的某些样式，如文本颜色、字号等。

继承是从一个元素向其后代元素传递属性值所采用的机制。基于继承机制，样式不仅可以应用到指定的元素，还会应用到它的后代元素。有两个比较特殊的情况需要注意：一个是在 HTML 中，应用到 body 元素的背景样式可以传递到 html 元素；另一个是 a 标签不会继承父元素的文本样式。

[2] 优先级

[ CSS 特性 ] 定义 CSS 样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。关于 CSS 权重，需要通过一套公式进行计算，即 CSS Specifity，又称为 CSS 特性或非凡性，它是衡量 CSS 值优先级的标准。

选择器优先级（特殊性值）由选择器本身的组件确定。特殊性值表述为 4 个部分：
a=行内样式；b=ID选择器；c=类、伪类和属性选择器；d=标签选择器和伪元素选择器；

选择同一个元素的优先级一样，怎么办呢？

[3] 层叠 & 改变优先级

层叠：相同的属性会覆盖（优先级 / 后面覆盖前面）；不同的属性会合并；
改变优先级：改变先后顺序 or 提升选择器优先级 or !important（最后才考虑）

<p class="tip special">  提升优先级                   |      ！important</p>
                         p .special{color:red;}             .tip{color::blue !important;}
                        .tip{color:blue;}                   p .special{color:red;}

<p class="tip special"> 提升优先级 | ！important</p>

p .special{color:red;} .tip{color::blue !important;}

.tip{color:blue;} p .special{color:red;}

[ 重要声明 ] 有时某个声明可能非常重要，超过了所有其他声明，CSS2.1 称之为重要声明。重要声明在声明的结束分号之前插入 !important 来标志，如果 !important 放在任何其他位置，整个声明都将无效。

如果一个声明是重要声明，则超过所有的非重要声明。