目录
一、基础选择器
要想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。在CSS中，执行这一任务的样式规则部分被称为选择器。
1、 标签选择器（元素选择器）
标签选择器是指用HTML标签名作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。其基本语法格式如下：
标签名{属性1：属性值1; 属性2：属性值2; ...}标签选择器最大的优点是能快速为页面中同类型的标签统一样式，同时这也是它的缺点，不能设计差异化样式。
h1 {
color: red;
}
p {
color: green;
}2、 id选择器
id选择器使用“#”进行标识，后面紧跟id名，基本语法格式如下：
#id名{属性1：属性值1; 属性2：属性值2; ...} <标签名1></标签名1> <标签名2 id="id值1"></标签名2>该语法中，id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。用法基本与类选择器相同。
一个标签的id值只能为一个，不能为多个，也不能重复，例如，id=“box1 box2”；是错的
<div class="lin">林黛玉</div> <!-- 使用类选择器 -->
<div id="xue">薛宝钗</div> <!-- 使用id选择器 -->
<style>
.lin { /*类选择器， 在元素中使用class属性*/
color: blue;
}
#xue { /*id选择器， 在元素中使用id属性*/
color: red;
}
</style>3、 类选择器
类选择器使用“.”（英文点）进行标识，后面紧跟类名，其基本语法格式如下：
定义： .类名{属性1：属性值1; 属性2：属性值2; ...} 调用： <标签名 class="类名1 类名2"></标签名>类选择器最大的优势是可以为元素对象定义单独或相同的样式。
<div class="demo">这是一个div</div>
.demo {
color: red;
}小技巧：
长名称或词组可以使用中横线来为选择器命名。text-color-red
不要纯数字、中文等命名，尽量使用英文字母来表示。见名知意
4 、多类名选择器
我们可以给标签指定多个类名，从而达到更多的选择目的。
<!--在class属性中使用多个类名，表示同时满足多个样式 -->
<div class="font20 red fontWeight">西游记</div>
<div class="font20">红楼梦</div>
<div class="font14 fontWeight">三国演义</div>
<div class="font14">水浒传</div>
<style>
.font20 {
font-size: 20px;
}
.font14 {
font-size: 14px;
}
.red {
color: red;
}
.fontWeight {
font-weight: bold;
}
</style>-
id选择器和类选择器区别
W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。
类选择器（class）好比人的名字，可以重复使用，如：李伟、张伟
id选择器（id）好比人的身份证号，是唯一的，不允许重复，只能使用一次。
id一个标签只能有一个id值，一个标签可以拥有多个class值
id不能使用其他已经使用过的id值，class可以。
5、 通配符选择器
通配符选择器用“*”号表示，它是所有选择器中作用范围最广的，能匹配页面中所有的元素。其基本语法格式如下：
* {属性1：属性值1; 属性2：属性值2; ...}例如下面的代码，使用通配符选择器定义CSS样式，清除所有HTML元素的默认边距。
* {
margin: 0; /*定义外边距*/
padding: 0; /*定义内边距*/
}注意：权重很低 通配选择器较少使用。
6 、伪类选择器
分为三类：链接伪类选择器、结构（位置）伪类选择器（CSS3）、目标伪类选择器
伪类选择器用于向某些选择器添加特殊的效果。比如给链接添加特殊效果，比如可以选择第1个，第n个元素。
伪类选择器使用“:”冒号来表示，比如 :link{}
(1) 链接伪类选择器 (l o v e h a t e)
链接伪类选择器主要针对于a标签
a:link /*未访问的链接*/ a:visited /*已访问的链接*/ 访问是指浏览器有没有访问过此链接，点过一次就访问过 a:hover /*鼠标移动到链接上*/ a:active /*选定的链接*/
注意：
a:hover 必须在 a:link 和 a:visited 之后。
a:active 必须在 a:hover 之后，需要严格按顺序才能看到效果。
visited只能修改颜色，在未访问状态下设置了背景颜色的条件下 可以设置背景颜色 其他不能做改变。所以，写的时候顺序尽量不要颠倒，按照l o v e h a t e来记忆
<style>
a:link { /*未访问的链接*/
color: grey;
}
a:visited { /*已访问的链接 表示已经点击过一次的状态*/
color: orange;
}
a:hover { /*鼠标移动到链接上*/
color: red;
}
a:active { /*选定的链接 鼠标点击不松开的状态*/
color: blue;
}
</style>实际工作中，链接伪类选择器使用简写即可。
a { /*a是标签选择器，所有的链接*/
font-weight: 700;
font-size: 16px;
color: grey;
}
a:hover { /*:hover 是链接伪类选择器 鼠标移动到链接上*/
color: red; /*鼠标经过时，文本由原来的灰色变为红色*/
}小米：#ff6700
京东：#f10215
支付宝：#00bbee
微信：#348903
(2) 结构（位置）伪类选择器（CSS3新增的选择器）
第一种：结构上 数
-
:first-child 获取第一个子元素
在 HTML 中，文本本身是 HTML 元素的父节点，HEAD 和 BODY 是 HTML 元素的子节点。
-
:last-child 获取最后一个子元素。注意：IE8不支持X:last-child。
-
:nth-child(n) 选取某个元素的一个或者多个特定的子元素。可以使用数字（n从1开始）、关键字（even偶数、odd奇数）或公式<2n-1>（n从0开始，当表达式的值小于等于0时，将不选择任何子元素）。
-
:nth-last-child(n) 选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始获取。可以使用数字（n从1开始）、关键字（even偶数、odd奇数）或公式（n从0开始）。
:first-child{}
p:first-child { /* 选择所有元素的第一个子元素,如果第一个子元素为p则匹配成功*/
color: red;
}
p:last-child { /*选择所有元素的最后一个子元素,如果最后一个子元素为p则匹配成功*/
color: blue;
}
/* nth-child(n): 选择所有元素下第n个子元素 */
p:nth-child(2) { /*选择所有元素的第二个子元素,如果第二个子元素为p则匹配成功*/
color: blue;
}
span:nth-child(odd) { /* 选择所有元素下为奇数的子元素 如果为span则匹配成功*/
background-color: blueviolet;
}
span:nth-child(even) {/* 选择所有元素下为偶数的子元素 如果为span则匹配成功*/
background-color: blueviolet;
}
p:nth-child(3n) { /*选择所有元素下为三的倍数的那个子元素 如果为span则匹配成功*/
color: purple;
}
p:nth-last-child(2) { /*选择所有元素的倒数二个子元素,如果倒数二个子元素为p则匹配成功*/
color: pink;
}
<div>body下面的第一个div</div>
<div>body下面的第二个div</div>
<div>body下面的第二个div</div>
<span>第1个span</span>
<span>第2个span</span>
<div>
<span>div中的span1</span>
<span>div中的span2</span>
</div>第二种：先把类型选出来，在数
-
:first-of-type 选择特定元素的第一个子元素
-
:last-of-type 选择特定元素的最后一个子元素
-
:nth-of-type(n) 只计算父元素中指定的某种类型的子元素
-
:nth-last-of-type(n) 只计算父元素中指定的某种类型的子元素，从这个元素的最后一个元素开始获取
/* 选择父元素中的第一个p子元素 */ p:first-of-type { background-color: red; } /* 选择父元素中的最后一个p子元素 */ p:last-of-type { background-color: blue; } /* 选择父元素中的第二个span子元素 */ span:nth-of-type(2) { color: yellowgreen; font-weight: bold; } /* 选择父元素中倒数第二个span子元素 */ span:nth-last-of-type(2) { color: cornflowerblue; font-weight: bold; } /* 选择父元素中为2的倍数的span子元素 */ span:nth-of-type(2n) { font-weight: bold; color: brown; } /* 选择父元素中倒数 2的倍数的span子元素 */ span:nth-last-of-type(2n) { font-weight: bold; color: brown; } <span>body下面的第一个span子元素</span> <p>body下面的第一个p子元素</p> <p>body下面的第二个p子元素</p> <div> <span>div中的第一个span子元素</span> <span>div中的第二个span子元素</span> <p>div下面的第一个p子元素</p> </div> 区别在于： span:first-child span必须是在父元素的第一个子元素才能选中 即选中父元素中第一个子元素 且第一个子元素为span --- 结构 span:first-of-type表示的是 选中 父元素中 第一个span元素 即使span不是父元素的第一个元素也能被选中 ，即选中父元素中第一个子元素为 冒号 前边的元素 --- 类型
其他结构伪类选择器：
-
:only-child匹配没有任何兄弟元素的元素 (结构）
div:only-child 先看没有兄弟的元素，在对应的是不是div，是就满足此条件）
（如果就写 :only-child，前面不写值的话，那么全部都会选中，因为这就是相当于html被选中了，里面的所有标签就被选中了。）
<style>
:only-child { /* 匹配所有没有任何兄弟的元素 */
color: indigo;
}
.div1:only-child { /* 匹配没有任何兄弟的元素 且这个元素的class值有div1 */
color: hotpink;
}
</style>
<body>
<div></div>
<div>
<div class="div1">div下面唯一的没有任何兄弟元素的div子元素</div>
</div>
<p></p>
<p></p>
<p>1</p>
<span>没有兄弟span元素</span>
</body>-
:only-of-type匹配所有元素 这个元素没有其他相同类型的兄弟元素
p:only-of-type(先找所有p标签，然后看p与p之间是不是兄弟，不是兄弟就满足此条件，除标签p以外的标签是p的兄弟没关系）
<style>
:only-of-type { /* 匹配所有元素 */
font-size: 30px;
}
/* 匹配所有元素，且p元素没有任何一个同类型的兄弟元素 p元素有p标签兄弟元素，匹配不成功 */
p:only-of-type {
font-size: 30px;
}
/* 匹配span元素，且span元素没有任何一个同类型的兄弟元素 匹配成功 */
span:only-of-type {
font-size: 30px;
}
/* 匹配li元素，且span元素没有任何一个同类型的兄弟元素 匹配成功 */
li:only-of-type {
font-size: 28px;
}
</style>
<body>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<span>body下没有兄弟的span元素</span>
<li>body下没有兄弟的li元素</li>
</body>-
:empty 选择的元素里面没有任何的内容 或 子节点（都可以是子节点，除了html）（必须给高度） 里面有空格或者换行都算是有内容，如果里面有注释标签，那么就不表示子节点
:empty { /* 匹配所有没有内容和子节点的元素 */
width: 100px;
height: 50px;
background-color: red;
}
p:empty { /* 匹配所有没有内容和子节点的元素 且这个元素为p元素 */
width: 100px;
height: 50px;
background-color: red;
}
<body>
<div></div>
<p></p>
<p></p>
<p>1</p>
</body>-
:root 匹配文档的根节点 html
:root { /*匹配文档的根元素*/ background-color: #dde6ef; }E:nth-child和E:nth-of-type的区别：
-
E:nth-child ：对父元素里面所有孩子排序选择(序号是固定的)，先找到第n个孩子，然后看看是否与E匹配
-
E:nth-of-type：对元素里面指定子元素进行排序，先去匹配，然后再找第n个孩子
-
为了方便记忆，把CSS的结构伪类选择器归为四类：
通用子元素（不同类型）过滤器：:nth-child(n)（顺序过滤）和 :nth-last-child(n)（逆序过滤）
通用子类型元素（同一类型）过滤器：:nth-of-type(n)（顺序过滤）和 :nth-last-of-type(n)（逆序过滤）
特定位置的子元素：:first-child, :last-child, :first-of-type, :last-of-type
特定状态的元素：:root（根节点）
:only-child（独子元素：某标签只有一个子元素 则子元素被选中）
span为某个元素唯一的子元素 则唯一子元素span选中 span:only-child { background-color: red; }:only-of-type（独子类型元素：）
p某个元素中唯一的span元素 则唯的span子选中 p:only-of-type {background-color: red;}:empty（孤节点）
当前span元素没有任何子元素包括文本、空格、换行符等，若其有一个子元素 但被注释了，也不能匹配成功注释 也是一个标签 叫 注释标签span:only-of-type {background-color: red;}
(3)目标伪类选择器
:target选择器用于选取页面中的某个target元素。那什么是target元素呢？target元素，说白了就是该元素的id被当做页面的超链接来使用。如下示例：（h2为目标元素）当点击个人生活链接时，对应的目标就更改样式。
<a href="#live">个人生活</a> <h1 id="live1">个人生活</h1> <h2 id="live">个人生活</h2> <p> 家庭 刘德华的父亲刘礼在启德机场做过消防员的工作。20世纪60年代，刘礼开了一间小吃杂货店以赚钱维持家用。刘德华在家中还有三位姐姐，一位妹妹以及一位弟弟（刘德盛）。 </p>h2:target { color: red; }
3339
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
