前言：本篇主要学习CSS中的选择器，包括CSS及CSS3中的，作为自己的学习总结。
第一部分：CSS初识
1.何为CSS？有什么作用？
CSS(Cascading Style Sheets):通常称为层叠样式表。
作用：主要负责HTML元素样式添加及页面的布局，是结构和样式分离，从而达到美化页面的目的。
2.CSS基本书写规则
使用CSS时，需要遵从一定的规范。具体解释如下：
???????h1 { ???????????color: red; ???????????font-size: 25px; ???????}1>.选择器用于指定CSS样式作用的HTML对象，花括号内设置具体样式。
2>.属性和属性值以“键值对”的形式出现，之间用英文“:”连接。
3>.多个属性之间用英文分号“;”隔开。
3.HTML中如何引入CSS?
行内式：在元素标签中嵌入style样式。
???<h1 style="color: red; font-size: 25px">Status:</h1>
内嵌式：在head中嵌入。
<head> ???<meta charset="UTF-8"> ???<meta name="viewport" content="width=device-width, initial-scale=1.0"> ???<meta http-equiv="X-UA-Compatible" content="ie=edge"> ???<title>Document</title> ???<style> ???????h1 { ???????????color: red; ???????????font-size: 25px; ???????} ???</style></head>外链式：在head标签中通过link标签引入。
<head> ???<meta charset="UTF-8"> ???<meta name="viewport" content="width=device-width, initial-scale=1.0"> ???<meta http-equiv="X-UA-Compatible" content="ie=edge"> ???<link rel="stylesheet" href="./index.css"> ???<title>Document</title></head>
注意三者优先级：行内式>内嵌式>外链式
第二部分：CSS选择器
选择器：将CSS样式应用于特定的HTML元素，首先需要找到目标元素。将实现这种功能的部分称为选择器。
1.标签选择器
使用标签名作为选择器，选中指定标签名的元素，为其设置样式。
1>任意标签都可当做选择器
2>所有名称相同的标签都会被选中。
???<style type="text/css"> ???????/* 选中所有p标签，设置颜色为绿色，字体为12px。 */ ???????p { ???????????color: green; ????????????font-size: 12px; ???????} ???</style>2.类选择器 -- "."
类选择器使用"."进行标识，后面紧跟类名。
所谓类就是元素的class属性，任何元素都可以有class属性，且class是可以重复的。
<p class="green">CSS通常称为CSS样式表或层叠样式表（级联样式表）</p> ???<p>CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等</p>
???????/* 使用类选择器为p元素设置不同的样式*/ ???????.green { ???????????color: green; ????????} ???????.red { ???????????color: red ???????}3.id选择器 -- "#"
id选择器用"#"进行标识，后面紧跟id名。
任何标签都可以有id属性，命名以字母开头，可以包含数字、下划线，区分大小写。
注意：W3C规定，同一个页面id名不能重复。
???<!-- 添加了两个id不一样的p元素 --> ???<p id="one">id选择器使用“#”进行标识，后面紧跟id名，其基本语法格式如下</p> ???<p id="last">id选择器使用“#”进行标识，后面紧跟id名，其基本语法格式如下</p>
???<style type="text/css"> ???????/* 通过id名分别为两个p元素设置样式 */ ???????#one { ???????????color: red; ???????} ???????#last { ???????????color: pink; ???????} ???</style>4.通配符选择器 -- "*"
通配符选择器用"*"表示，匹配页面中所有的元素，实际中很少用到。
???<p>id选择器使用“#”进行标识，后面紧跟id名，其基本语法格式如下</p> ???<p>id选择器使用“#”进行标识，后面紧跟id名，其基本语法格式如下</p>
???<style type="text/css"> ???????/* 通过*选中页面上的两个p元素 */ ???????* { ???????????color: pink; ???????} ???</style>5.后代选择器
选择器之间使用空格隔开的复合选择器就是后代选择器。
???<!-- div1的后代中包括两个p元素 --> ???<div id="div1"> ???????<p>div1中的后代元素</p> ???????<ul> ???????????<li><p>div1中的后代元素</p></li> ???????</ul> ???</div>
???????/* 使用后代选择器，选中div1中所有的p元素 */ ???????#div1 p { ???????????color: pink; ???????}6.交集选择器
选择器之间无任何修饰符的复合选择器就是交集选择器，比如p.p1，表示选中类名为p1的p元素。
???<p id="p1">div1中的后代元素</p> ???<ul> ???????<li> ???????????<p>div1中的后代元素</p> ???????</li> ???</ul>
???<style type="text/css"> ???????/* 使用交集选择器，只选中id为p1的p标签 */ ???????p#p1 { ???????????color: red; ???????} ???</style>7.并集选择器
选择器之间使用"，"连接的复合选择器就是并集选择器，比如选择器".p1, .p2"，同时为p1和p2设置样式。
???<!-- 为p元素设置p1和p2的类名 --> ???<p class="p1">div1中的后代元素</p> ???<ul> ???????<li> ???????????<p class="p2">div1中的后代元素</p> ???????</li> ???</ul>
???<style type="text/css"> ???????/* 使用并集选择器，为两个p元素设置样式 */ ???????.p1,.p2 { ???????????color: red; ???????} ???</style>8.子选择器
选择器之间使用">"连接的复合选择器就是子选择器，比如：div>p，选中了div中的子选择器。
???<div> ???????<!-- 此处p属于div的子选择器 --> ???????<p class="p1">div1中的后代元素</p> ???????<ul> ???????????<li> ???????????????<!-- 此处p属于li的子选择器，div的后代选择器 --> ???????????????<p class="p2">div1中的后代元素</p> ???????????</li> ???????</ul> ???</div>
???<style type="text/css"> ???????/* div中的儿子元素p会被设置成红色 */ ???????div>p { ??????????color: red; ???????} ???</style>9.兄弟选择器
选择器之间使用"+"连接的复合选择器就是兄弟选择器，比如：.p1+p，选中类名为p1的p元素紧挨着的下一个兄弟元素。
???<div> ???????<p>选择器中的兄弟元素</p> ???????<p class="p1">选择器中的兄弟元素</p> ???????<!-- p1紧挨着的兄弟元素 --> ???????<p>选择器中的兄弟元素</p> ???????<p>选择器中的兄弟元素</p> ???????<p>选择器中的兄弟元素</p> ???</div>
???????/* .p1中紧挨着的下一个兄弟元素被选中设置 */ ???????.p1+p { ??????????color: red; ???????}10.属性选择器
通过元素的属性，获取相应的元素并为其设置样式的选择器。
1>.[attribute]，根据属性名选择元素。
???????<p name=‘attr‘>属性选择器测试属性名</p> ???????<p name=‘attr1‘>属性选择器测试p元素</p> ???????<p name=‘attr2‘>属性选择器测试p元素</p>
???????/* 会选中所有有name属性的元素 */ ???????p[name] { ???????????color: red; ???????}2>.[attribute=value]，选中属性值为value的元素。
???????<p name=‘attr‘>属性选择器测试属性名</p> ???????<p name=‘attr1‘>属性选择器测试p元素</p> ???????<p name=‘attr2‘>属性选择器测试p元素</p>
???????/* 有name属性，且值为attr的p元素会被选中 */ ???????p[name=‘attr‘] { ???????????color: red; ???????}3>.[attribute^=value]，属性值以value开头的元素会被选中。(CSS3)
???????<p name=‘attr‘>属性选择器测试属性名</p> ???????<p name=‘name1‘>属性选择器测试p元素</p> ???????<p name=‘p2‘>属性选择器测试p元素</p>
???????/* 有属性name，且值以p开头的p元素会被选中 */ ???????p[name^=‘p‘] { ???????????color: red; ???????}4>.[attribute$=value]，属性值以value结尾的元素会被选中。(CSS3)
???????<p name=‘attr‘>属性选择器测试属性名</p> ???????<p name=‘p‘>属性选择器测试p元素</p> ???????<p name=‘p2‘>属性选择器测试p元素</p>
???????/* 有属性name，且值以p结尾的p元素会被选中 */ ???????p[name$=‘p‘] { ???????????color: red; ???????}5>.[attribute*=value]，属性值中包含value的元素会被选中。(CSS3)
???????<p name=‘attr‘>属性选择器测试属性名</p> ???????<p name=‘p‘>属性选择器测试p元素</p> ???????<p name=‘p2‘>属性选择器测试p元素</p>
???????/* 有属性name，且值中包含p的p元素会被选中 */ ???????p[name*=‘p‘] { ???????????color: red; ???????}11.伪类选择器
伪类：用于向某些选择器添加特殊的效果，作用和元素中的类相同。
如果我们想为元素的某些特殊状态设置样式，我们无法通过具体的class设置，比如a标签悬浮状态样式设置，我们可以用a:hover实现，它实现了和类相同的功能，但同时又不是真正的类，所以称其为伪类。
1>锚伪类
a:link {color: #FF0000} ??????? /* 未访问的链接 */a:visited {color: #00FF00} ???????????/* 已访问的链接 */a:hover {color: #FF00FF} ?????????????/* 鼠标移动到链接上 */a:active {color: #0000FF} ????????????/* 选定的链接 */注意：1.a:hover 必须被置于 a:link 和 a:visited 之后，才会有效。2.a:active 必须被置于 a:hover 之后，才会有效。
2>序选择器(与顺序相关) --> (CSS3)
第一类：选择子元素中的第一个或最后一个
注意： 带type和不带有type的区别
1>不带type表示选中E的父元素中的第一个元素且其必须是E类型，否则不选中(强调第一个)
2>带type表示选中E的父元素中的第一次出现的E元素，否则不选中(强调第一次)
???????<ul> ???????????<span>test</span> ???????????<li>篮球</li> ???????????<li>足球</li> ???????????<li>羽毛球</li> ???????????<li>乒乓球</li> ???????</ul>
???????/* li父元素ul的第一个元素不是li而是span，所以无法选中 */ ???????li:first-child { ???????????color: green; ???????} ???????/* 选中li父元素ul中的最后一个li元素 */ ???????li:last-child { ???????????color: green; ???????} ???????/* 选中li父元素ul中第一次出现的li，而非第一个 */ ???????li:first-of-type { ???????????color: red; ???????} ???????/* 选中li父元素ul中最后一次出现的li，而非最后一个 */ ???????li:last-of-type { ???????????color: red; ???????} 注意： 带type和不带有type的区别
1>不带type表示从E的父元素中的第一个元素索引开始计算。
2>type表相当于先将E的父元素中所有类型为E的子元素挑出来，重新计算索引。
???<div> ???????<ul class="u1"> ???????????<span>test</span> ???????????<li>篮球</li> ???????????<li>足球</li> ???????</ul> ???????<ul class="u2"> ???????????<li>篮球</li> ???????????<span>test</span> ???????????<li>足球</li> ???????</ul> ???</div>
????????/* li父元素ul中索引为2且为li的元素会被选中(选择器索引从1开始)，如果不是li元素则不会被选中 */ ???????li:nth-child(2) { ???????????color: red; ???????} ???<div> ???????<ul class="u1"> ???????????<span>索引为1奇数，但不是li元素</span> ???????????<li>索引为2偶数，是li元素</li> ???????????<li>索引为3奇数，是li元素</li> ???????????<li>索引为4偶数，是li元素</li> ???????</ul> ???</div>
???????li:nth-child(odd) { ???????????color: red; ???????} ???????li:nth-child(even) { ???????????color: yellow; ???????} ???<div> ???????<ul class="u1"> ???????????<span>索引为1奇数，但不是li元素</span> ???????????<li>索引为2偶数，是li元素</li> ???????????<li>索引为3奇数，是li元素</li> ???????????<li>索引为4偶数，是li元素</li> ???????</ul> ???</div>
???????/* n的取值0到li元素的长度个数，当-n+2表达式结果为0不再继续计算 */ ???????li:nth-of-type(-n + 2){ ???????????color: red; ???????} ???????li:nth-last-of-type(-n + 2){ ???????????color: red; ???????}E:nth-of-type(even) 作用相当于先把E元素过滤出来，然后选中所有的索引值为偶数的E元素。用法雷同不再举例
E:nth-of-type(odd)同E:nth-of-type(even)的用法相同。
12.伪元素选择器
伪元素：是HTML 中并不存在的元素，用于将特殊的效果添加到某些选择器。
CSS3中对伪元素的描述：
伪元素的由两个冒号::开头，然后是伪元素的名称 。
使用两个冒号::是为了区别伪类和伪元素（CSS2中并没有区别）。当然，考虑到兼容性，CSS2中已存的伪元素仍然可以使用一个冒号:的语法，但是CSS3中新增的伪元素必须使用两个冒号::
一个选择器只能使用一个伪元素，并且伪元素必须处于选择器语句的最后。
如何区分伪类和伪元素？
作用都是用于将特殊的效果添加到某些选择器，但是伪元素会在最后的结构上生成
伪元素选择器：
:first-letter，选中文本中的第一个字母
:first-line，选中文本中的第一行
???<div> ???????<p class="p1">These are the necessary steps:</p> ???????<p class="p3"> ???????????????These are the necessary steps<br/> ???????????????These are the necessary steps: ???????????????These are the necessary steps: ???????</p> ???</div>
????????/* 类名为p1的p元素内容中的第一个字母会被选中加粗 */ ???????p.p1:first-letter { ???????????font-weight: bold; ???????} ???????/* 类名为p3的p元素内容中的第一行会被选中加粗 */ ???????p.p3:first-line { ???????????font-weight: bold; ???????}CSS3伪元素选择器：
::after，在元素的前面添加内容
::before，在元素的后面添加内容
<head> ???<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> ???<title>Document</title> ???<style type="text/css"> ???????p::before { ???????????content: "p元素之前内容"; ???????????color: red; ???????} ???????p::after { ???????????content: "p元素之后内容"; ???????????color: yellow; ???????} ???</style></head><body> ???<div> ???????<p>测试伪元素</p> ???</div></body>最后生成的结构：
总结：本篇总结了自己学习过程中遇到的CSS选择器，通过总结又回顾了一次，加深了自己的理解，这里并没有列举完所有的选择器，大家可以一起学习完善。
CSS第一节--选择器(1)
原文地址：https://www.cnblogs.com/diweikang/p/9048991.html