-1- 元素选择器（标签选择器）
语法：标签名{}
h1{ } p{ }
-2- id选择器
选中对应id属性值的元素
语法：#id属性值{}
注意：id属性值是独一无二的存在
#p1{ }
-3- class选择器
选中对应class属性值的元素
语法：.class属性值{}
注意：id选择器和class选择器很像，只不过class属性值可以复用
.p1{ }
-4- 通配选择器
选中页面中所有的元素
语法：*{}
-5- 复合选择器
基本语法格式：元素1,元素2{样式声明}
注意：
元素1元素2之间用逗号隔开
逗号可以理解为和的意思
并集选择器通常用于集体声明
例：
要求1：把熊大熊二改成蓝色
要求2：把熊大熊二改成蓝色且把小猪佩奇一家
同时改成蓝色
html代码如下（示例）：
<body> <!--并集选择器--> <div class="nav1"> 熊大 </div> <p>熊二</p> <span>光头强</span> <ul class="pig"> <li>小猪佩奇</li> <li>猪爸爸</li> <li>猪妈妈</li> </ul> </body>
代码如下（示例）：
/*并集选择器,可以选择多组标签,同时为他们定义相同样式*/
/*要求1:把熊大熊二改成蓝色*/
/*并集选择器,可以选择多组标签,同时为他们定义相同样式*/ /*要求1:把熊大熊二改成蓝色*/ /*.nav1,p { color: blue; }*/ /*要求2:把熊大熊二改成蓝色且把小猪一家改成蓝色*/ .nav,p,.pig li { color: blue ; }
交集选择器又称标签指定式选择器
作用：选择出同时符合两个标签的内容
格式：1.由两个选择器构成，其中第一个为标签选择器，第二个为class选择器或id选择器；2.两个选择器之间不能有空格
例如：老师要求他的班级中所有学生把头发染成红色
div.student{ color: red; }
-6- 关系选择器
后代选择器(以空格 分隔)
子元素选择器(以大于 > 号分隔）
相邻兄弟选择器（以加号 + 分隔）
普通兄弟选择器（以波浪号 ～ 分隔）
后代选择器用于选取某元素的后代元素。
以下实例选取所有
元素插入到
元素中:
div p { background-color:yellow; }
子元素选择器（Child selectors）只能选择作为某元素直接/一级子元素的元素。
以下实例选择了
元素中所有直接子元素
：
div>p { background-color:yellow; }
相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。
以下实例选取了所有位于
元素后的第一个
元素:
div+p { background-color:yellow; }
后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。
以下实例选取了所有
元素之后的所有相邻兄弟元素
:
div~p { background-color:yellow; }
-7- 属性选择器
具有特定属性的HTML元素样式不仅仅是class和id。
注意：IE7和IE8需声明!DOCTYPE才支持属性选择器！IE6和更低的版本不支持属性选择器。
[title] { color:blue; } [title=runoob] { border:5px solid green; }
-8- 伪类选择器
-伪类用来描述一个元素的特殊状态
比如：第一个元素，被点击的元素，鼠标移入的元素···
-特点：一般请情况下，使用：开头
1、 :first-child 第一个子元素
2、 :last-child 最后一个子元素
3、 :nth-child() 选中第n个子元素
特殊值： n 所有的
2n或even 选中偶数
2n+1或odd 选中奇数
—以上这些伪类都是根据所有的子元素进行排序
1、:first-of-type
2、:last-of-type
3、:nth-of-type()
功能跟上面相似，
—不同的是，这是在同类型的子元素中去选择
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> /*去掉项目符号*/ ul { list-style: none; } /* 需求一：将ul里的第一个li自动一直设置为红色 */ /* ul>li:first-child{color:red} */ /* ul>li:last-child{color:blue} */ /* ul>li:not(:nth-child(3)){color: green;} */ /* ul>li:not(:nth-of-type(3)){color: green;} */ /* li:nth-child(1) { color: pink; } */ /* li:nth-of-type(1){ background-color: red; } */ li:not(:first-of-type){ font-size: 50px; } </style> </head> <body> <h1>沁园春·雪</h1> <h3>毛泽东</h3> <ul> <span>测试</span> <p>北国风光，千里冰封，万里雪飘。</p> <li>望长城内外，惟余莽莽；大河上下，顿失滔滔。</li> <li>山舞银蛇，原驰蜡象，欲与天公试比高。</li> <li>须晴日，看红装素裹，分外妖娆。</li> <li>江山如此多娇，引无数英雄竞折腰。</li> <li>惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。</li> <li>一代天骄，成吉思汗，只识弯弓射大雕。</li> </ul> </body> </html>
沁园春·雪
毛泽东
测试
北国风光，千里冰封，万里雪飘。
望长城内外，惟余莽莽；大河上下，顿失滔滔。
山舞银蛇，原驰蜡象，欲与天公试比高。
须晴日，看红装素裹，分外妖娆。
江山如此多娇，引无数英雄竞折腰。
惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。
一代天骄，成吉思汗，只识弯弓射大雕。
-9- 伪元素选择器
::first-letter表示第一个字母，例如：p::first-letter{}
<style> p::first-letter{ font-size: 30px; color: blueviolet; } </style>
::first-line表示第一行（第一行内容根据屏幕大小来决定显示多少字），例如： p::first-line{}
<style> p::first-line{ color: blue; } </style>
::selection表示选中的内容
p::selection{ color: aqua; } ::bef
ore表示元素的开始，::after表示元素的最后，before和after必须结合content属性来使用
p::after{ content: "hahaha"; color: red; } p::before{ content: "hehehe"; color: coral; }
