CSS学习笔记（一）——选择器归类整理+CSS优先级要点
CSS选择器整理+CSS优先级
- 一、CSS3选择器分类
- （一）基本选择器
- 1、通配选择器
- 2、元素选择器
- 3、ID选择器
- 4、类选择器
- 5、群组选择器
- （二）层次选择器
- 1、后代选择器（包含选择器）
- 2、子选择器
- 3、相邻兄弟选择器
- 4、通用兄弟选择器
- （三）动态伪类选择器
- （四）目标伪类选择器
- （五）UI元素状态伪类选择器
- （六）结构伪类选择器
- （七）否定伪类选择器
- 补充：CSS伪类/元素
- （八）属性选择器
- 二、CSS三大特性
- （一）继承性
- （二）层叠性
- 层叠次序
- （三）优先性
- 1、多重样式优先级顺序
- 2、权重计算
一、CSS3选择器分类
CSS3选择器分类如下图所示：
（一）基本选择器
基本选择器有通配选择器，元素选择器，ID选择器，类选择器和群组选择器五种。
1、通配选择器
CSS2 引入了一种新的简单选择器 - 通配选择器（universal selector），显示为一个星号（*）。该选择器可以与任何元素匹配，就像是一个通配符。
如下面的规则可以使文档中的每个元素都变为红色。
*{color:red;}
2、元素选择器
选择指定类型的HTML元素为它设置样式。
p {color:red;}
3、ID选择器
选择ID属性为指定id值的任意类型元素为其设置样式。
如下面的样式
#intro {color:red;}
就会被下面的元素使用并显示
<p id="intro">段落1p>
4、类选择器
选择class属性为指定class属性值的元素进行样式设置。
如样式
.intro {color:red;}
将会被元素使用：
<p class="intro">段落1p>
5、群组选择器
用逗号将多个选择器匹配到的元素合并来设置样式，有的会把它称为并集选择器。
如：
.intro,p,#intro1 {color:red;}
（二）层次选择器
其中包括四种选择器：后代选择器（包含选择器）、子选择器、相邻兄弟选择器、通用选择器。
1、后代选择器（包含选择器）
后代选择器可以选择作为某元素后代的元素。
可以定义后代选择器来创建一些规则，使这些规则在某些文档结构中起作用，而在另外一些结构中不起作用，实现根据上下文结构选择元素。
语法结构：
元素E 元素F {属性名:属性值;}
该选择器会选择匹配被包含在匹配的E元素内的F元素，进行响应样式的设置。
如
div p {color:red;}
上面这个规则只会把作为div元素后代的p元素文本字体变红。
语法解释：
在后代选择器中，规则左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符（combinator）。每个空格结合符可以解释为“… 在 … 找到”、“… 作为 … 的一部分”、“… 作为 … 的后代”，但是要求必须从右向左读选择器。
空格前后的元素还可以使用交集选择器与其他选择器相交合并进行选择匹配。
如下所示：
<html>
<head>
<meta charset="utf-8">
<title>title>
<style>
div#sidebar {background-color:blue;}
div#maincontent {background-color:white;}
div#sidebar a.sidebar{background-color:white;}
div#maincontent a.maincontent {background-color:red;}
style>
head>
<body>
<div id="sidebar">
<a class="sidebar" href="//www.baidu.com" target="_blank">div_sidebara>
<br/>
<a href="//www.baidu.com" target="_blank">diva>
div>
<div id="maincontent">
<a class="maincontent" href="//www.baidu.com" target="_blank">div_maincontenta><br/>
<a href="//www.baidu.com" target="_blank">div_maincontenta>
div>
body>
html>
补充：交集选择器
将多种选择器不加间隔的写在一起，可将这多种选择器的选择结果的交集作为交集选择器的选择元素。
也就是匹配到的元素需要满足前面多种选择器的条件，先找匹配到选择器1的元素，再在其中选择匹配到选择器2的元素，如此类推。
如下面的样式中就包含了交集选择器和后代选择器。
<style>
div#sidebar {background-color:blue;}
div#maincontent {background-color:white;}
div#sidebar a.sidebar{color:white;}
div#maincontent a.maincontent[title] {color:red;}
style>
2、子选择器
与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素（儿子元素）的元素。
如果不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，就可使用子元素选择器。
语法结构：
元素E>元素F {属性名:属性值;}
用“>”符号将前后两个元素联结，该选择器会选择匹配，作为所匹配的E元素的子元素的，F元素。
语法解释：
子选择器使用了大于号（子结合符）。
子结合符两边可以有空白符，这是可选的。
如果从右向左读，选择器 h1 > strong 可以解释为“选择作为 h1 元素子元素的所有 strong 元素”。
3、相邻兄弟选择器
相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。
语法结构：
元素E+元素F {属性名:属性值;}
例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：
h1+p {margin-top:50px;}
这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。
语法解释：
相邻兄弟选择器使用了加号（+），即相邻兄弟结合符（Adjacent sibling combinator）。
与子结合符一样，相邻兄弟结合符旁边可以有空白符。
请看下面这个文档树片段：
<div>
<ul>
<li>List item 1li>
<li>List item 2li>
<li>List item 3li>
ul>
<ol>
<li>List item 1li>
<li>List item 2li>
<li>List item 3li>
ol>
div>
在上面的片段中，div 元素中包含两个列表：一个无序列表，一个有序列表，每个列表都包含三个列表项。这两个列表是相邻兄弟，列表项本身也是相邻兄弟。不过，第一个列表中的列表项与第二个列表中的列表项不是相邻兄弟，因为这两组列表项不属于同一父元素（最多只能算堂兄弟）。
请记住，用一个结合符只能选择两个相邻兄弟中的第二个元素。请看下面的选择器：
li + li {font-weight:bold;}
上面这个选择器只会把列表中的第二个和第三个列表项变为粗体。第一个列表项不受影响。
相邻兄弟结合符还可以结合其他结合符：
html > body table + ul {margin-top:20px;}
这个选择器解释为：选择紧接在 table 元素后出现的所有兄弟 ul 元素，该 table 元素包含在一个 body 元素中，body 元素本身是 html 元素的子元素。
4、通用兄弟选择器
通用兄弟选择器是用来选择位于同一个父元素中的某个特定元素之后的任意指定种类的元素进行样式设置。（所有的同级兄弟，不要求严格相邻）
语法结构：
元素E~元素F {属性名:属性值;}
<html>
<head>
<title>title>
<meta charset="utf-8">
<style>
h1~p {color:blue;}
h1+p {color:red;}
style>
head>
<body>
<h1>标题1h1>
<p>和h1是相邻兄弟的段落p>
<hr/>
<p>和h1不相邻的兄弟段落p>
body>
html>
如上面代码所示，和h1相邻的兄弟段落会由相邻兄弟选择器将字体设置为红色，和h1不相邻的兄弟段落会由通用兄弟选择器将字体设置为蓝色。
（三）动态伪类选择器
| 选择器 | 类型 | 功能描述 |
|---|---|---|
| E:link | 链接伪类选择器 | 选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过。常用于链接描点上 |
| E:visited | 链接伪类选择器 | 选择匹配的E元素，而且匹配元素被定义了超链接并已被访问过。常用于链接描点上 |
| E:active | 用户行为选择器 | 选择匹配的E元素，且匹配元素被激活。常用于链接描点和按钮上 |
| E:hover | 用户行为选择器 | 选择匹配的E元素，且用户鼠标停留在元素E上。IE6及以下浏览器仅支持a:hover |
| E:focus | 用户行为选择器 | 选择匹配的E元素，而且匹配元素获取焦点 |
（四）目标伪类选择器
| 选择器 | 功能描述 |
|---|---|
| E:target | 选择匹配E的所有元素，且匹配元素被相关URL指向 |
“＃锚的名称” 是在一个文件中链接到某个元素的URL，这个被链接的元素就是目标元素(target element)。
:target 选择器可用于选取当前活动的目标元素（目标元素当因点击URL而被链接到时，显示出选择器设置的样式）。
实例如下：
<html>
<head>
<meta charset="utf-8">
<title>title>
<style>
p:target
{
border: 2px solid #D4D4D4;
background-color: #e5eecc;
}
style>
head>
<body>
<h1>这是标题h1>
<p><a href="#news1">跳转至内容1a>p>
<p><a href="#news2">跳转至内容2a>p>
<p>请点击上面的链接，:target 选择器会突出显示当前活动的 HTML 锚（目标元素）。p>
<p id="news1"><b>内容 1...b>p>
<p id="news2"><b>内容 2...b>p>
<p><b>注释：b> Internet Explorer 8 以及更早的版本不支持 :target 选择器。p>
body>
html>
当点击超链接跳转至id为news1的元素时，该元素样式会按照由前面选择器p:target 设置的样式进行突出显示；同样当跳转至id为news2的元素时，news2元素也会进行突出显示，而news1元素则不再突出显示（因为此时它不是当前活动着的）。
（五）UI元素状态伪类选择器
| 选择器 | 类型 | 功能描述 |
|---|---|---|
| E:checked | 选中状态伪类选择器 | 匹配选中的复选按钮或者单选按钮表单元素 |
| E:enabled | 启用状态伪类选择器 | 匹配所有启用的表单元素 |
| E:disabled | 不可用状态伪类选择器 | 匹配所有禁用的表单元素 |
（六）结构伪类选择器
| 选择器 | 功能描述 |
|---|---|
| E:first-child | 作为父元素的第一个子元素的元素E。与E:nth-child(1)等同 |
| E:last-child | 作为父元素的最后一个子元素的元素E。与E:nth-last-child(1)等同 |
| E:root | 选择匹配元素E所在文档的根元素。在HTML文档中，根元素始终是html，此时该选择器与html类型选择器匹配的内容相同 |
| E F:nth-child(n) | 选择父元素E的第n个子元素F，参数是元素的索引，索引从1开始。其中n可以是整数（1，2，3）、关键字（even，odd）、可以是公式（an+b）【公式中，a代表一个循环的大小，N是一个计数器（从0开始），以及b是偏移量，如2n+1】 |
| E F:nth-last-child(n) | 选择父元素E的倒数第n个子元素F。此选择器与E:nth-child(n)选择器计算顺序刚好相反，但使用方法都是一样的，其中：nth-last-child(1)始终匹配最后一个元素，与last-child等同 |
| E:nth-of-type(n) | 选择父元素内具有指定类型的第n个E元素 |
| E:nth-last-of-type(n) | 选择父元素内具有指定类型的倒数第n个E元素 |
| E:first-of-type | 选择父元素内具有指定类型的第一个E元素，与E:nth-of-type(1)等同 |
| E:last-of-type | 选择父元素内具有指定类型的最后一个E元素，与E:nth-last-of-type(1)等同 |
| E:only-child | 选择父元素只包含一个子元素，且该子元素匹配E元素 |
| E:only-of-type | 选择父元素只包含一个同类型子元素，且该子元素匹配E元素（只包含一个E类型子元素） |
| E:empty | 选择没有子元素的元素，而且该元素也不包含任何文本节点 |
注：
（1）“ul>li:nth-child(3)”表达的并不是一定选择列表ul元素中的第3个子元素li，仅有列表ul中第3个li元素前不存在其他的元素，命题才有意义，否则不会改变列表第3个li元素的样式。
（2）:nth-child(n) 中参数只能是n，不可以用其他字母代替。
（3）:nth-child(odd) 选择的是奇数项，而使用:nth-last-child(odd) 选择的却是偶数项
注释：
（1）:nth-of-type(n)选择器匹配同类型中的第n个同级兄弟元素，如指定每个p元素匹配同类型中的第2个同级兄弟元素的背景色：
p:nth-of-type(2)
{background:blue;}
（七）否定伪类选择器
| 选择器 | 功能描述 |
|---|---|
| E:not(F) | 匹配所有除元素F外的E元素 |
:not 选择器匹配不是指定元素/选择器的每个元素。
如为每个并非p元素的元素设置背景颜色：
:not(p)
{background-color:#ff0000;}
也可以是E:not(s) { 属性名:属性值; }，为不符合s选择符的元素E设置样式。
如1.选择所有不包含class3的元素
:not(.class3)
2.选择含有子元素的pre元素
:empty 选择器匹配的是没有子元素（包括文本节点）的每个元素
pre:not(:empty)
3.选择所有样式不为abc的p元素改变字体颜色
p:not(.abc){
color:#f00;
}
<p class="abc">否定伪类选择符 E:not()p>
<p id="abc">否定伪类选择符 E:not()p>
<p class="abcd">否定伪类选择符 E:not()p>
<p>否定伪类选择符 E:not()p>
则只有第一个class为abc的p元素字体颜色不发生改变，其他的p元素字体颜色变为红色。
补充：CSS伪类/元素
CSS伪类是用来添加一些选择器的特殊效果。
由于状态的变化是非静态的，所以元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。
CSS伪元素同样是用来添加一些选择器的特殊效果。
CSS伪元素控制的内容和元素是没有差别的，但是它本身只是基于元素的抽象，并不存在于文档中，所以称为伪元素。
下表列出了所有的CSS伪类/元素。
| 选择器 | 示例 | 示例说明 |
|---|---|---|
| :link | a:link | 选择所有未访问链接（伪类） |
| :visited | a:visited | 选择所有访问过的链接（伪类） |
| :active | a:active | 选择正在活动链接（伪类） |
| :hover | a:hover | 把鼠标放在链接上的状态（伪类） |
| :focus | input:focus | 选择元素输入后具有焦点（伪类） |
| :first-letter | p:first-letter | 选择每个p元素的第一个字母（伪元素） |
| :first-line | p:first-line | 选择每个p元素的第一行（伪元素） |
| :first-child | p:first-child | 选择器匹配属于任意元素的第一个子元素的 p元素（伪类） |
| :before | p:before | 在每个p元素之前插入内容（伪元素） |
| :after | p:after | 在每个p元素之后插入内容（伪元素） |
| :lang(language) | p:lang(it) | 向带有指定 lang 属性开始的p元素添加样式（伪类） |
注：
lang 属性规定了元素内容的语言。
（lang=“no”；页面文本无语言声明）
如：
html:lang(en) {background-color: silver;}
*:lang(fr) {quotes: 'q ' ' q';}
/* quote属性是设置引号的格式，这里把引号设置为‘q’，*/
/* 当body中使用<q>标签时，就是使用‘q’…‘q’来作为引号 */
注意: 值是整个单词，单独像lang=“en”，或者使用连字符(-)如lang =“en-us”。
（八）属性选择器
css属性选择器就是指可以根据元素的属性及属性值来选择元素。
具有特定属性的HTML元素样式不仅仅是class和id。
注意: IE7和IE8需声明!DOCTYPE才支持属性选择器。IE6和更低的版本不支持属性选择器。
| 选择器 | 功能描述 |
|---|---|
| [attribute] | 用于选取带有指定属性的元素。 |
| [attribute=value] | 用于选取带有指定属性和值的元素。 |
| [attribute~=value] | 用于选取属性值中包含指定词汇的元素。 |
| [attribute|=value] | 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。 |
| [attribute^=value] | 匹配属性值以指定值开头的每个元素。 |
| [attribute$=value] | 匹配属性值以指定值结尾的每个元素。 |
| [attribute*=value] | 匹配属性值中包含指定值的每个元素。 |
注意：
1.[attribute]选择器选择具有指定属性的元素。element1 [attribute]也称为简单属性选择器。简单属性选择器根据属性的存在选择任何元素，而不管属性的值。
2.[attribute = value] 选择器选择具有指定属性和值的元素。element1 [attr =“value"] 也称为精确属性值选择器。element1 [attr =“value”] 基于属性的精确和完整值选择任何元素。（当属性值是一个单词时可以不带引号，当它是一个字符串时需要加上引号，否则可能引起歧义。）
3.[attribute〜= value] 选择器选择具有包含指定单词的属性值的元素。element1 [attr〜=“value”] 也称为部分属性值选择器。部分属性值选择器基于属性的空格分隔值的一部分选择任何元素。（也就是这个value作为属性的部分值必须要与其他部分有空格分隔。）
如对于样式：
p[title~=flower]
{background:red;}
属性title="klematis flower"的元素会被选择按设定样式显示，但属性title="flowers"的元素则不会被选择进行样式设置。
4.[attribute|= value] 选择器用于选择指定属性具有指定值开始的元素。选择器选择任何具有指定属性“attribute”的元素，其值为连字符分隔的值列表，从选择器中提供的值“value”开始。
选择器中提供的值是整个单词，无论是单独像lang=“en”，或者像连字符(-)连接的如lang ="en-us"都可以。
如下示例：
<html>
<head>
<title>title>
<meta charset="utf-8">
<style>
p[class|=top-text]
{
color:red;
}
style>
head>
<body>
<p class="top-text-p1">段落1p>
<p class="top-p2">段落2p>
<p class="top-text p3">段落3p>
<p class="top text">段落4p>
<p class="top-text-p5 p5">段落5p>
body>
html>
最终五个段落中，只有段落1和段落5被选择将字体颜色设置为红色，因为只有这两个段落的class属性值是以“top-text”开头且后面直接跟有连字符或者后面不再跟有内容。
5.[attribute^=value] 选择器匹配元素属性值带指定的值开始的元素。只要被匹配的元素属性值是以指定值开始即可被选择，指定值之后可以跟任意其他内容，比如空格、剩下的单词等等。如选择器div[class^=text]可以匹配上class值为“text”、“textone”、“text one”、“text-one”等等的div元素。
6.[attribute$=value] 选择器匹配元素属性值带指定的值结尾的元素。只要被匹配的元素属性值是以指定值结束即可被选择，指定值之前可以有任意其他内容。如选择器div[class$=text]可以匹配上class值为“text”、“onetext”、“first text”、“first_text”等等的div元素。
7.[attribute*=value] 选择器匹配元素属性值包含指定值的元素。只要属性值中包含有指定值即被选择，没有别的特殊条件。
二、CSS三大特性
CSS有三大特性，分别是继承性，层叠性，优先级。
（一）继承性
继承性是指被包在内部的标签将拥有外部标签的样式，即子元素可以继承父元素的属性。
<html>
<head>
<meta charset="utf-8">
<title>title>
<style>
div{color:red;}
style>
head>
<body>
<div>
<p>小狗p>
<span>小猫span>
div>
body>
html>
例如上面的代码，将div元素字体颜色设置为红色后（背景的红色需要用background-color来设置），它的子标签会继承父元素的属性，因而字体也显示为红色。
注意点：
- 不是所有属性都可以被继承，只有以color/font-/text-/line-开头的属性才可以被继承
- 在css中的继承不仅是儿子才可以继承，只要是后代就可以继承
- 特殊性之一：a标签的字体颜色不能被继承，因为a标签是有一个默认的字体颜色属性，所以给父元素设置颜色是不能改变a标签字体的颜色
- 特殊性之二：h标签字体的大小也是不能被继承的，因为h1-h6的标签也是有一个默认的字体大小属性
- 特殊性之三：div标签的高度如果不设置，则由内容来决定（没有内容高度为0），宽度默认由父元素继承过来
（二）层叠性
css是层叠样式表，层叠性是css处理冲突的能力，注意：层叠性只有在多个选择器选中一个“同一个标签”，然后又设置了“同一个属性”为“不同的属性值”，才会发生层叠性。
层叠次序
当同一个 HTML 元素被不止一个样式定义时，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。
1、浏览器缺省设置
2、外部样式表
3、内部样式表（位于 head 标签内部）
4、内联样式（在 HTML 元素内部）
（三）优先性
当多个选择器选中同一个标签时,并且给同一个标签设置相同的属性时,如何层叠就由优先级来决定。
优先级用于浏览器是通过判断哪些属性值与元素最相关以决定并应用到该元素上的。
优先级仅由选择器组成的匹配规则决定的。
优先级就是分配给指定的CSS声明的一个权重，它由匹配的选择器中的每一种选择器类型的数值决定。
1、多重样式优先级顺序
下列是一份优先级逐级增加的选择器列表，其中数字 7 拥有最高的优先权：
1、通用选择器（*）
2、元素(类型)选择器
3、类选择器
4、属性选择器
5、伪类
6、ID 选择器
7、内联样式
!important 规则例外
当 !important 规则被应用在一个样式声明中时，该样式声明会覆盖CSS中任何其他的声明，无论它处在声明列表中的哪里。使用 !important 不是一个好习惯，因为它改变了你样式表本来的级联规则，从而使其难以调试。
2、权重计算
以下是对于上图的解释：
- 内联样式表的权值最高 1000
- ID 选择器的权值为 100
- Class 类选择器的权值为 10
- HTML 标签选择器的权值为 1
或者：
将优先级表示为用逗号隔开的四个数字（四位数）就会相当简单，比如：1, 1, 1, 1 或0, 2, 0, 1
第一个数字(a)通常就是0，除非在标签上使用style属性；
第二个数字(b)是该选择器上的id的数量的总和；
第三个数字(c)是用在该选择器上的其它属性选择器和伪类的总和。这里包括类class (.example) 和属性选择器(比如 li[id=red])；
第四个数字(d)计算元素(就像table、p、div等等)和伪元素(就像:first-line等)；
通用选择器(*)是0优先级。
CSS 优先级法则：
- 选择器都有一个权值，权值越大越优先；
- 当权值相等时，后出现的样式表设置要优于先出现的样式表设置；
- 创作者的规则高于浏览者：即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式；
- 继承的CSS 样式不如后来指定的CSS 样式；
- 在同一组属性设置中标有"!important"规则的优先级最大；