目录
1. 基本选择器
2. 层次（结构）选择器
3. 属性选择器
4. 伪类选择器
5. 伪元素选择器
一，基本选择器
- 通配选择器[ * ]
- 元素选择器[Element]
- id选择器[ #id ]
- 类选择器 .class
- 群组选择器【select1, select2, select3 ...】
*{margin: 0;padding: 0} //选择页面中的所有元素并设置margin和padding值为0
.demo *{background:#000} //选择类名为demo的元素下面的所有元素并设置背景为黑色
ul{background:#fff} //选择列表ul元素
#demo{do something}
ul.demo{do something} //这样只会选择有demo类名的ul元素
.section-1,.section-2,.section-3{do something} //给三个页面元素定义公用的样式
二 ，层次选择器（结构选择器）
- 后代选择器[ E F ]:会选择E元素后代中的所有F元素，子代或者孙子代等
- 子元素选择器[ E>F ]：会选择E元素里面第一层级的元素（子代）
- 相邻兄弟选择器 [ E+F ]:E和F是同级元素，并且F紧跟在E后面
- 通用兄弟选择器[ E~F ] :E和F有相同的父元素，并且F在E之后，E~F将选中E元素后面所有的F元素
<div class="parent">
<div class="child"></div>
<div class="child2">
<div class="c-child">
<div class="c-c-child"></div>
</div>
</div>
</div>
.parent div{do something} //会选择parent里面的所有div，不管是子元素.child还是孙元素.c-child和.c-c-child
.parent > div{do something} //只会选择.parent元素的直系子元素，也就是只会选择到 .child元
.child +div{do something} //会选中class为child2的div元素
.child ~ div { do something }//会选中class 为 child2的div
三， 属性选择器（下面的E都是可以不带的）
- 「 E[attr] 」：选择有某个属性的元素
- 「 E[attr=val] 」: 这个用来选取具有属性值，并且属性值为val的元素
- 「 E[attr|=val] 」: 用来选择具有属性attr且属性的值为val或以val-开头的元素(其中 - 是不可或缺的)
- 「 E[attr~=val] 」: 当某个元素的某个属性具有多个用空格隔开的属性值，此时使用E[attr~=val]只要attr属性多个属性值中有一个于val匹配元素就会被选中
- 「 E[attr*=val] 」:用来选择具有属性attr并且只要属性值中包含val字符串的元素。也就是说只要所选属性中有val字符串，不管是不是多个用空格分隔的属性值，都将被选中
- 「 E[attr^=val] 」:用来选择属性attr的属性值是以val开头的所有元素，注意它与E[attr|=val]的区别，attr|=val中-是必不可少的，也就是说以val-开头
- 「 E[attr$=val] 」:这个选择器刚好跟E[attr^=val]相反，用来选择具有attr属性且属性值以val结尾的元素
html:
<div id="demo">
<a href="" id="test" title="test first"></a>
<a href="www.taobao.com" class="taobao web" title="second-test"></a>
<a href="#" id="show" title="testlink">
</div>
1, a[id]{ dosomething } //选择1,3 a标签
2，a[id=test] { dosomething } //选择了第一个a标签
3，a[title|=second]{ dosomething } //选择了第二个a标签
4，a[ title~ = test]{ dosomething } //选择了第一个a标签
5，a[ title*= test ]{dosomething } //会选择1,2 a标签
6，a[ href^ = http] {do} //会选择第二个a标签
7，a[ href$= com ]{do } //会选择第二个a标签
四 ，伪类选择器
1， 动态伪类选择器
1 E:link{do something} //选择定义了超链接但链接还未被访问过的元素
2 E:visited{do something} //选择定义了超链接并且链接已经被访问过的元素
3 E:active{do something} //选择匹配的E元素，且元素被激活，常用在锚点和按钮上
4 E:hover{do something} //选择鼠标停留的匹配的E元素
5 E:focus{do something} //选择匹配的E元素，且元素获得焦点
2 ， 目标伪类选择器【E:target 】
这个玩意儿有点难理解查看这里的实例
感觉就是对于页面内的a标签的锚点有作用
3，语言伪类选择器「E:lang(language)」：用来选择指定了lang属性的元素，其值为language
html:
<html lang="en-US"></html>
css:
:lang(en-US) {do something}
4，状态伪类选择器:「E:checked,E:enabled,E:disabled」
E:checked{do something} //匹配表单中被选中的单选按钮或复选按钮
E:enabled{do something} //匹配所有起用的表单元素
E:disabled{do something} //匹配所有禁用的表单元素
5，结构伪类选择器
E:first-child：用来选取特定元素的第一个子元素
E:last-child：用来选取特定元素的最后一个子元素
E:root：用来匹配元素E所在的文档中的根元素，在html文档中根元素就始终是html
E:nth-child(n)：选取某个父元素的一个或多个特定的子元素，其中的n可以是数值(从1开始)，也可以是包含n的表达式，也可以是odd(奇数)，even(偶数)
E:nth-last-child(n)：使用方法于E:nth-child()是相同的，不同的是E:nth-last-child()选择的元素是从父元素的最后一个子元素开始算起
E:nth-of-type(n)：只计算父元素中指定的某种类型的子元素，当某个元素的子元素类型不只是一种时，使用nth-of-type来选择会比较有用
E:nth-last-of-type(n)：用法同E:nth-of-type()相同，不同的是:nth-last-of-type()也是从父元素的最后一个子元素开始算起
E:first-of-type：类似于:first-child和:last-child，不同的就是指定了元素的类型
E:last-of-type：类似于:first-child和:last-child，不同的就是指定了元素的类型
E:only-child：匹配的元素E是其父元素的唯一子元素，也就是说匹配元素的父元素只有一个子元素
E:only-of-type：用来选择一个元素，他的这种类型的元素的个数在他父元素的所有子元素中是一个，[查看例子](https://segmentfault.com/a/1190000003088878)
E:empty：用来选择没有任何内容的元素，哪怕是一个空格都没有的元素
实例
html:
<ul>
<li>1</li>
<li>2</li>
<div>3</div> <div>4</div>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
ul > li:first-child {do something} //用来选取ul中的第一个li元素
ul > li:last-child {do something} //用来选取ul中的最后一个li元素
ul > li:nth-child(2n+1) {do something} //用来选取ul中的第2n+1(奇数)个元素,不管是不是li元素
ul > li:nth-of-type(3){do something} //会选中内容为5的li元素
ul > li:first-of-type{do something} //会选中内容为1的li元素
**注意 ul > li:nth-child(2n+1) {do something} //用来选取ul中的第2n+1(奇数)个元素,不管是不是li元素 **
<div class="demo">
<p>1-1</p>
<p>1-2</p>
</div>
<div class="demo">
<p>2-1</p>
</div>
.demo > p:only-child{do something}//会选取到内容为2-1的p元素
p:only-of-type { color: red;} //会选取2-1的p标签，因为p类型的元素的父元素的子元素中p类型的元素只有一个的就是下面的p元素满足
6，否定伪类选择器：「E:not(F)」可以用来选取所有除了F外的所有元素。
input:not([type=submit]){do something} //可以用来给表单的所有input元素定义样式，除了submit按钮之外
伪元素选择器
1，「::first-letter」::first-letter用来选择文本块的第一个字母,常用于文本排版方面。
2，「::first-line」::first-line用于匹配元素的第一行文本，也是常用于文本排版。
3，「::before,::after」
::before,::after同我们之前熟用的:before和:after使用方法相同，它们不是指存于标记中的内容，是配合使用content属性可以插入额外内容的位置，尽管生成的内容不会成为DOM的一部分，但它同样可以设置样式。
4，「::selection」
css3新定义的伪元素::selection用来匹配突出显示的文本。但是使用前需要确认浏览器对它的支持程度。
浏览器默认的情况下，我们选中的文本背景是蓝色，字体是白色。通过使用::selection，我们可以改变它的效果
但是需要注意的是，::selection仅接受两个属性，一个是background，一个是color。
网友评论