class 和 id 的使用场景
- class选择器是我们经常使用的选择器最广最多的选择器，可以给任何元素添加class名称。 ID选择器使用前确定此元素权限较高且在文档里具有唯一性才可使用
CSS选择器常见的有几种
- ID选择器
#content {css样式} <div id="content"></div> 权限高，慎用 - 类选择器
.content {css样式} <div class="content"></div>就是class选择器 - 派生选择器
table tr {css样式}选择某个元素下的子元素,一般用语作用域隔离 - 分组选择器
div, p { css样式}注意中间为英文逗号，两者为平行关系 - 属性选择器
input[type="text"] { css样式}使用场景偏少
选择器的优先级是怎样的?
优先级从高到低
- 在属性后面添加!important（特定情况下用，几乎很少）
- 在属性添加style样式（一般不推荐这样写）
- id选择器（在唯一特定的元素内使用）
- 类选择器（使用范围很广，经常使用）
- 伪类选择器（根据需求使用，注意优先级）
- 属性选择器（使用场景较少）
- 标签选择器（一般少量代码下使用）
- 通配符选择器（使用范围极少，不推荐用，会加大浏览器渲染负担）
- 浏览器自定义（权限较低）
对于复杂场景如何计算优先级？
一般而言，选择器越特殊，它的优先级越高。也就是选择器指向的越准确，它的优先级就越高。通常我们用1表示标签名选择器的优先级，用10表示类选择 器的优先级，用100标示ID选择器的优先级。比如 .polaris span {color:red;}的选择器优先级是 10 + 1 也就是11；而 .polaris 的优先级是10；浏览器自然会显示红色的字。理解了这个道理之后下面的优先级计算自是易如反掌：
div.test1 .span var 优先级 1+10 +10 +1
span#xxx .songs li 优先级1+100 + 10 + 1
xxx li 优先级 100 +1
对于什么情况下使用什么选择器，用不同选择器的原则是：
第一：准确的选到要控制的标签；
第二：使用最合理优先级的选择器；第三：HTML和CSS代码尽量简洁美观。通常：
1、最常用的选择器是类选择器。
2、li、td、dd等经常大量连续出现，并且样式相同或者相类似的标签，我们采用类选择器跟标签名选择器结合的后代选择器 .xx li/td/dd {} 的方式选择。
3、极少的情况下会用ID选择器，当然很多前端开发人员喜欢header，footer，banner，conntent设置成ID选择器的，因为相同的样式在一个页面里不可能有第二次。
在这里不得不提使用在标签内引入CSS的方式来写CSS，即：
<div style="color:red">polaris</div>
这时候的优先级是最高的。我们给它的优先级是1000，这种写法不推荐使用，特别是对新手来说。这也完全违背了内容和显示分离的思想。DIV+CSS的优点也不能再有任何体现。*
a:link, a:hover, a:active, a:visited 的顺序是怎样的？ 为什么？
正确顺序：
a：link
a：visited
a:hover
a:active
原因：
1.当选择器优先级别相同时，后定义的会覆盖先定义的
2.以此类推，当鼠标经过未访问链接，同时有link和hover属性，
由于后定义的覆盖先定义的，所以hover在后面
以此类推，当鼠标经过已访问链接，同时有visited和hover属性，
由于后定义的覆盖先定义的，所以hover在link和visited后面
选择器.jpg
伪类选择器
-
:fist-child选择某个元素的第一个子元素；
-
:last-child选择某个元素的最后一个子元素；
-
:nth-child()选择某个元素的一个或多个特定的子元素；
eg:
(1) :nth-child(3), 选择某元素下的第三个子元素，（这里的3可以是你自己需要的数字），比如说，我需要选择列表中的第三个li元素，那么我们可以直接这样使用：
.demo li:nth-child(3){background:lime;}
注：这种不式不能引用负值，也就是说li:nth-child(-3)是不正确的使用方法
( 2) :nth-child(n)，其中n是一个简单的表达式，那么"n"取值是从“0”开始计算的，到什么时候结束我也不知道，如果你在实际应用中直接这样使用的话，将会选中所有子元素，比如说，在我们的demo中，你在li中使用":nth-child(n)",那么将选中所有的"li"
注：这里的“n”只能是"n"，不能使用其他字母代替，不然会没有任何效果的
(3) :nth-child(2n),这种方式是前一种的变身，我们可以选择n的2倍数，当然其中“2”可以换成你自己需要的数字。
(4) :nth-child(2n-1),这个选择器是在":nth-child(2n)"基础上演变过来的，上面说了人是选择偶数，那么我们在他的基础上减去“1”就变成奇数选择.
(5) :nth-child(n+5)这个选择器是选择从第五个元素开始选择，这里的数字你可以自己定义.
(6) :nth-child(-n+5)这种选择器刚好和上面的选择器相反，这个是选择第5个前面的.
(7) :nth-child(4n+1)这种方法是实现隔几选一的效果，比如我们这里是隔三选一，如果你把"4"换成别的数字那就是另外的一种隔法了.
注：IE6-8和FF3-浏览器不支持":nth-child"选择器
4.:nth-last-child()选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算；
注：“:nth-child()”是从元素的第一个开始计算，而“:nth-last-child()”是从元素的最后一个开始计算，他们的计算方法都是一样的。同样在IE6-8和FF3.0-浏览器不支持“:nth-last-child()”选择器。
5.:nth-of-type()选择指定的元素；
:nth-of-type类似于:nth-child，不同的是他只计算选择器中指定的那个元素,其实我们前面的实例都是指定了具体的元素，这个选择器主要对用来定位元素中包含了好多不同类型的元素是很有用处，比如说，我们div.demo下有好多p元素，li元素，img元素等，但我只需要选择p元素，并让他每隔一个p元素就有不同的样式，那我们就可以简单的写成：
.demo p:nth-of-type(even){background-color:lime;}
其实这种使用和:nth-child使用是一样的，也可以使用:nth-child的那些表达式和使用方法，唯一不同的是这种指定了元素的类型而以。同样在IE6-8和FF3.0-浏览器不支持这种选择器
6.:nth-last-of-type()选择指定的元素，从元素的最后一个开始计算；
7.:first-of-type选择一个上级元素下的第一个同类子元素；
8.:last-of-type选择一个上级元素的最后一个同类子元素；
9.:only-child选择的元素是它的父元素的唯一一个了元素；
10.:only-of-type选择一个元素是它的上级元素的唯一一个相同类型的子元素；
11.:empty选择的元素里面没有任何内容。
:empty是用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格，比如说，你有三个段落，其中一个段落什么都没有，完全是空的，要这个p不显示，就可这样来写：
p:empty{display:none;}
div:first-child和div:first-of-type的作用和区别
- first-child 匹配其父元素的第一个子元素
- first-of-type 匹配其父元素下拥有相同标签的第一个元素
解析输出样式.jpg
解析.jpg
网友评论