关于CSS选择器的一些知识
1、class和id的使用场景分别是什么？
首先，一个HTML文件中class名字可以有多个相同的，但是id的名字是唯一的；其次，如果是写css样式，那么id选择器的优先级高于class选择器（就简单选择器来说，只单纯考虑单一样式书写，不包括复杂选择器情况下）。
2、CSS选择器常见的有几种？
1. 基础选择器
- class选择器
- id选择器
- 通用元素选择器（通配符选择器）“*”；
- element选择器
2. 组合选择器
- one,two —— 多元素选择器。两个元素或两个class或两个id选择器，同时匹配one和two,中间用“,”分隔
- one two —— 后代选择器。one下的two；two是one的子元素（匹配所有子元素），中间用空格分隔
- one>two —— 直接子元素选择器。匹配one的直接子元素two（可能会有多个），中间用“>”来分隔。
- one~two —— 普通相邻选择器。匹配one之后的同级元素two（邻居但是不管是否直接相邻），中间用“+”分隔。
- one+two ——直接相邻子元素。匹配one后的直接同级元素two，中间用“+”来分隔。
- .class1.class2 —— 选择出某个元素既含有class1，也含有class2。中间没有分隔符。
- element#my —— 选择出某个元素，而且id是my的元素。中间没有分隔符。
3. 伪类选择器
-
one:link —— 匹配所有未被点击的链接
-
one:visited —— 匹配所有已经点击过的链接
-
one:active ——匹配所有点击时的链接
-
one:hover —— 匹配所有鼠标悬停其上的链接
-
one:focus —— 匹配所有已经获取焦点的元素one
-
one:first-child —— 匹配作为第一个子元素的one
-
one:last-child —— 匹配作为最后一个子元素的one
-
one:enabled —— 匹配表单中可用的元素
-
one:disabled —— 匹配表单中不可用的元素
-
one:checked —— 匹配表单中的选中的radio或checkbox元素。
-
one:lang() —— 匹配lang属性等于c的one元素
-
one::selection —— 匹配one中已被选择的部分
-
one:root —— 匹配文档的根元素，对于HTML文档来说，根元素即为HTML标签
-
one:nth-child(n) —— 匹配作为第n个子元素的one
-
one:nth-of-type(num) —— 匹配使用同种标签的第num个元素one（其他同nth-child(n)）
-
one:first-of-type —— 匹配第一个使用同种标签的元素one，等于one:nth-of-type(1)
-
one:last-of-type —— 匹配最后一个使用同种标签的元素one
-
one:only-child —— 匹配父元素下仅有的一个子元素
-
one:only-of-type —— 匹配父元素下使用同种标签的唯一一个子元素，等同于：:first-of-type:last-of-type或:nth-of-type(1):nth-last-child(1)
-
one:empty —— 匹配一个不包换任何子元素的元素（文本节点也是子元素）
-
one:not(selector) —— 匹配不符合当前选择器的任何元素
4. 伪元素选择器
- one::after —— 在one元素之后插入生成的内容
- one::before —— 在one元素之前插入生成的内容
- one::first-letter —— 匹配one元素的第一个字符
- one::first-line —— 匹配one元素的第一行
5. 属性选择器
- one[attr] —— 匹配所有有attr属性的元素。同理，span[id]就可以获取到所有带有id属性的元素
- one[attr=value] —— 匹配所有attr值为value的元素，如，
input[type="text"]就可以匹配到所有type是text的input元素。 - one[attr~=value] —— 匹配所有属性attr具有多个空格分隔，其中一个值等于value的元素
- one[attr^=value] —— 匹配所有attr属性的值为value开头的元素
- one[attr$=value] —— 匹配所有attr属性的值为value结尾的元素
- one[attr*=value] —— 匹配所有attr属性的值含有value的元素
3、选择器的优先级是怎么样的？对于复杂场景怎样计算优先级？
优先级顺序
- 在属性后使用!important会使此属性拥有最高级别的优先级，换句话说，可以认为这个属性会覆盖其他所有影响此样式的重写样式。
- 写在html文件中的，某个元素的style属性，即为行内样式。
- id选择器
- class选择器
- 伪类选择器
- 属性选择器
7.标签选择器
8.通配符选择器 - 浏览器自定义
除此之外，有一个需要注意的：
针对同一个元素的样式，如果写多遍，那么写在后面的会覆盖前面的，比如：
div{ color: #f00; }
div{ color: #blue; }
那么这时，div的color属性值其实是蓝色的。
复杂场景的计算
我们可以定义一个优先级的规则：
- 行内样式：<p style="color: #f00"></p> —— a
- id选择器： —— b
- class,属性选择器和伪类选择器 —— c
- 标签选择器，伪元素 —— d
举例说明：
.discount-compile .dc-cont>label input[type="checkbox"]:checked+span{position:absolute; top:.3rem; z-index:9; background:url(../img/radio.png) no-repeat center center; width:.8rem; height:.8rem; background-size: cover; left:.5rem;}
这里面有两个标签选择器（label,span），两个类选择器（.discount-compile ，.dc-cont），一个属性选择器（input[type="checkbox"]），一个伪类选择器（:checked）
可以得到：a=0;b=0;c=4;d=2
#discount-compile input[type="checkbox"]:checked+span{position:absolute; top:.3rem; z-index:9; background:url(../img/radio.png) no-repeat center center; width:.8rem; height:.8rem; background-size: cover; left:.5rem;}
这里面有一个id选择器（#discount-compile），一个标签选择器（span），一个属性选择器（input[type="checkbox"]），一个伪类选择器（:checked）
可以得到：a=0;b=1;c=2;d=1
看得时候abcd是层层递进的，a的数字一样就比较b的数字，以此类推。
那么，第二种的优先级比第一种高，
4、a:link, a:hover, a:active, a:visited 的顺序是怎样的？ 为什么？
这四个的顺序分别是：
a:link
a:visited
a:hover
a:active
原因是如果顺序错乱会导致某些样式不能够显示，例如将a:visited写在第一位，那么a:link就不再起作用，无论这个链接是否被访问过；例如将a:visited写在第三位，那么a:link和a:hover都不再起作用，因为a:visited已经将这两个样式都覆盖；例如将a:visited写在第四位，那么a:link和a:hover和a:active都不在起作用，因为a:visited已经将所有样式都覆盖。这个的顺序决定了页面上的a标签的展现行为，不能出错。
5、以下选择器分别是什么意思？
#header{} —— 匹配id值为header的元素
.header{} —— 匹配class值为header的元素
.header .logo{} —— 匹配class为header的元素下所有的class值为logo的子元素
.header.mobile{} —— 匹配class值中既含有header又含有mobile的元素
.header p, .header h3{} —— 同时匹配class值为header的标签为p的子元素和header下的标签是h3的子元素
#header .nav>li{} —— 匹配id值为header中class值为nav的子元素的标签为li的直接子元素
#header a:hover{} —— 匹配id值为header中所有的的a标签，设置其鼠标悬停时的样式
#header .logo~p{} —— 匹配id值为header中所有的class值为logo的元素的其后所有的p标签
#header input[type="text"]{} —— 匹配id值为header中所有的标签为input中的type属性是text的元素
6、写出你知道的伪类选择器
-
one:link —— 匹配所有未被点击的链接
-
one:visited —— 匹配所有已经点击过的链接
-
one:active ——匹配所有点击时的链接
-
one:hover —— 匹配所有鼠标悬停其上的链接
-
one:focus —— 匹配所有已经获取焦点的元素one
-
one:first-child —— 匹配作为第一个子元素的one
-
one:last-child —— 匹配作为最后一个子元素的one
-
one:enabled —— 匹配表单中可用的元素
-
one:disabled —— 匹配表单中不可用的元素
-
one:checked —— 匹配表单中的选中的radio或checkbox元素。
-
one:lang() —— 匹配lang属性等于c的one元素
-
one::selection —— 匹配one中已被选择的部分
-
one:root —— 匹配文档的根元素，对于HTML文档来说，根元素即为HTML标签
-
one:nth-child(n) —— 匹配作为第n个子元素的one
-
one:nth-of-type(num) —— 匹配使用同种标签的第num个元素one（其他同nth-child(n)）
-
one:first-of-type —— 匹配第一个使用同种标签的元素one，等于one:nth-of-type(1)
-
one:last-of-type —— 匹配最后一个使用同种标签的元素one
-
one:only-child —— 匹配父元素下仅有的一个子元素
-
one:only-of-type —— 匹配父元素下使用同种标签的唯一一个子元素，等同于：:first-of-type:last-of-type或:nth-of-type(1):nth-last-child(1)
-
one:empty —— 匹配一个不包换任何子元素的元素（文本节点也是子元素）
-
one:not(selector) —— 匹配不符合当前选择器的任何元素
7、div:first-child、div:first-of-type、div :first-child和div :first-of-type的作用和区别
- div:first-child —— 是div作为子元素的情况，匹配div作为第一个子元素的情况
- div:first-of-type —— 是div作为子元素的情况，匹配div作为第一个子元素的情况
- div :first-child —— 是div作为父元素的情况，匹配div的子元素中的第一个元素（没有指定类型那么则为第一个元素）
- div :first-of-type —— 是div作为父元素的情况，匹配div的子元素中的所有类型的标签的每一个的第1个元素（比较绕口）举个例子说明：
<style>
div :nth-of-type(2){background:#f00;}
</style>
<div>
<p>我是第一个p</p>
<article>我是第一个article</article>
<h5>我是第一个h5</h5>
<p>我是第二个p</p>
<article>我是第二个article</article>
<p>我是第三个p</p>
<article>我是第三个article</article>
<h5>我是第二个h5</h5>
</div>
结果是“我是第二个p”，“我是第二个article”，“我是第二个h5”的背景颜色都会变成红色。
8、运行以下代码并解释输出样式的原因
<style>
.item1:first-child{
color: red;
}
.item1:first-of-type{
background: blue;
}
</style>
<div class="ct">
<p class="item1">aa</p>
<h3 class="item1">bb</h3>
<h3 class="item1">ccc</h3>
</div>
运行结果如图：
微信图片_20170515132228.png
我们来分析一下：
首先看一下style中的内容：
.item1:first-child{color: red;}意思是class为item1的元素作为第一个子元素（此处不管是什么类型的标签，浏览器不做判断，就是我们能看到的第一个），我的颜色是红色，得到第一行的aa字体颜色是红色；第二句.item1:first-of-type{background: blue;}意思是class为item1的元素作为子元素的情况，我们可以看到，div中包着三个标签，一个p标签，两个h3标签。那么.item1:first-of-type事实上取的是每一个不同标签的第一个元素，即第一个p标签和第一个h3标签。所以，aa和bb的背景色都变为蓝色，黑色的字是浏览器默认给的颜色。
