网易微专业之《前端工程师》学习笔记（4）-CSS不常用选择器（草
01.选择器有哪些
常用的标签、ID、类选择器不介绍了，这里讲的选择器兼容性，主流的都可以，IE低版本的不行。
- 属性选择器
1、[att]
<input disabled type="text" value="张三">
[disabled]{background-color:#eee;}
2、[att=val]
<input type="button" value="按钮">
[type=button]{color:blue;}
注：其实ID选择器也可以写出这种属性选择器的样子。
#nav{}==[id=nav]{}
3、[att~=val]
如何选中标题和内容呢，就用这个
<h2 class="title sports">标题</h2>
<p class="sports">内容...</p>
[class~=sports]{color:blue;}
注：其实class选择器也可以写出这种属性选择器的样子。
.sports{}==[class~=sports]
4、[att|=val]
如何选中lang=en\en-us\en-au的p呢，用这个，这个写法不常用，一般会在lang属性中使用的比较多。
<p lang="en">Hello!</p>
<p lang="en-us">Greetings！</p>
<p lang="en-au">G'day!</p>
<p lang="enfr">Bonjour!</p>
<p lang="cy-en">Jrooana!</p>
[lang|=en]{color:red;}
5、[att^=val] 如何选中href中带#的页面内的超链接呢，用这个。
<a href="http://www.w3.org/">W3C</a>
<a href="#html">HTML</a>
<a href="#css">CSS</a>
[href^="#"]{color:red;}
6、[att$=val]以val属性值为结尾的属性
<a href="http://xxx.doc">word文档.doc</a>
<a href="http://xxxx.pdf">pdf文件.pdf</a>
[href$=pdf]{color:red;}
7、[att*=val]包含了val属性值的属性，比如选中超链接中包含http：//lady.163.com的就可以用这个
<a href="http://lady.163.com/15.html">女星奥斯卡...</a>
<a href="http://lady.163.com/10.html">范玮琪产后...</a>
<a href="http://sports.163.com/12.html">曝李楠有望...</a>
<a href="http://sports.163.com/09.html">皇马1亿先...</a>
[href*="lady.163.com"]{color:pink;}
- 伪类选择器
1、a:link;a:visited;a:hover;a:active;设置超链接的选择器，四个配在一起使用，注意一定要这个顺序的哟！
<a href="http://www.163.com">网页首页</a>
a:link{color:gray;}
a:visited{color:red;}
a:hover{color:green;}
a:active{color:orange;}
2、：enabled 定义可用的状态\：disabled 定义不可用的状态\：checked 定义选中的状态
input:enabled{color:#ccc;}
input:disabled{color:#ddd;}
input:checked{color:#red;}
3、:first-child:last-child以及:nth-child(even)
<ul>
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
<li>五</li>
<li>六</li>
</ul>
li:first-child{color:red;}//第一个
li:last-child{color:gray;}//最后一个
li:nth-child(even){color:green;}//偶数项
另外:nth-child(even)的变体可以这样写:nth-child(3n+1)
4、:only-child选中元素底下只有一个子元素的项
<ul>
<li>一</li>
</ul>
<ul>
<li>一</li>
<li>二</li>
</ul>
：only-child{color:red;}
5、:first-of-type:last-of-type:nth-of-type(even):nth-last-of-type(2n)
<dl>
<dt>作者：</dt>
<dd>Dave Shea</dd>
<dd>Molly E. Holzschlag</dd>
<dt>出版社：</dt>
<dd>人民邮电出版社</dd>
</dl>
dd:first-of-type{color:red;} //Dave Shea
dt:last-of-type{color:gray;} //出版社：
dd:nth-of-type(even){color:green;} //偶数项Molly E. Holzschlag
dt:nth-last-of-type(2n){color:yellow;} //作者：
6、:only-of-type
<p><span>CSS</span>和<span>HTML</span>是页面制作的基础</p>
<p><span>CSS</span>主要是用于定义<em>HTML</em>内容在浏览器的显示样子</p>
span:only-of-type{color:red;} //第二个CSS
7、:empty，可以选中比如下面那个空的p标签。
<p></p>
<p>段落一</p>
8、:root ，它选中的就是<html></html>这个根标签。
9、:not():target:lang()
- 伪元素选择器
1、
::first-letter
::first-line
2、
::before{content:"before";}
::after{content:"after";}
3、::selection应用于被用户选中的内容
- 组合选择器
有后代选择器、子选择器、和兄弟选择器。
<div class="main">
<h2>标题一</h2>
<div>
<h2>标题二</h2>
<p>段落一</p>
<p>段落二</p>
</div>
</div>
.main h2{color:red;} //选中标题一二，是后代选择器
.main>h2{color:red;} //选中标题一，是子选择器
h2+p{color:red;} //选中段落一，是兄弟选择器
h2~p{color:red;} //选中段落一二，是兄弟选择器
02.选择器优先级
- 行内样式：a
- ID选择器的数量：b
- 类、伪类、属性选择器的数量：c
- 标签选择器和伪元素选择器的数量：d
a,b,c,d分别给1000,100,10,1的级别值
所以选择器的最终值value=ax1000+bx100+cx10+dx1
举个栗子
| 选择器 | a | b | c | d | value |
| -----|:----:| :----:|:----:|: ----:|
| h1 | 0 | 0 | 0 | 1 | 1 |
| p>em | 0 | 0| 0 | 2| 2 |
| style="" | 1 | 0 | 0 | 0 | 1000 |
| .nav p | 0 | 0 | 1 | 1 | 11 |
| div #nav | 0 | 1 | 0 | 1| 101 |
| a:link | 0 | 0 | 1 | 1 | 11 |
样式根据选择器优先级别呈现，优先级别高的会覆盖优先级别低的，同级别的按照css书写的顺序，先写的会被后写的覆盖。
而样式里的属性，不同的属性会合并，同样的属性会根据优先级规则以及书写规则进行覆盖。
