class 和 id 的使用场景?
- class：指定标签的类名，可以把多个类，放在一个class属性里，但必须用空格隔开
格式：<input type=button class="btnsubmit" />
应用场景：
- CSS操作，把一些特定样式放到一个class类中，需要此样式的标签，可以在添加此类
- id：指定标签的唯一标识
格式：<input type=password id="userpwd" />
应用场景：
CSS选择器常见的有几种?
| 选择器 |
含义 |
| * |
通用元素选择器，匹配页面任何元素（这决定了我们很少使用）。 |
| #id |
id选择器，匹配特定id的元素 |
| .class |
类选择器，匹配class包含（不是等于）特定类的元素 |
| element |
标签选择器。 |
| 选择器 |
含义 |
| E,F |
多元素选择器，用,分隔，同时匹配元素E或元素F |
| E F |
后代选择器，用空格分隔，匹配E元素所有的后代（不只是子元素、子元素向下递归）元素F |
| E>F |
子元素选择器，用>分隔，匹配E元素的所有直接子元素 |
| E+F |
直接相邻选择器，匹配E元素之后的相邻的同级元素F |
| E~F |
普通相邻选择器（弟弟选择器），匹配E元素之后的同级元素F（无论直接相邻与否） |
| .class1.class2 |
id和class选择器和选择器连写的时候中间没有分隔符，. 和 # 本身充当分隔符的元素 |
| element#id |
id和class选择器和选择器连写的时候中间没有分隔符，. 和 # 本身充当分隔符的元素 |
| 选择器 |
含义 |
| E[attr] |
匹配所有具有属性attr的元素，div[id]就能取到所有有id属性的div |
| E[attr = value] |
匹配属性attr值为value的元素，div[id=test],匹配id=test的div |
| E[attr ~= value] |
匹配所有属性attr具有多个空格分隔、其中一个值等于value的元素 |
| E[attr ^= value] |
匹配属性attr的值以value开头的元素 |
| E[attr $= value] |
匹配属性attr的值以value结尾的元素 |
| E[attr *= value] |
匹配属性attr的值包含value的元素 |
| 选择器 |
含义 |
| E:first-child |
匹配作为长子（第一个子女）的元素E |
| E:link |
匹配所有未被点击的链接 |
| E:visited |
匹配所有已被点击的链接 |
| E:active |
匹配鼠标已经其上按下、还没有释放的E元素 |
| E:hover |
匹配鼠标悬停其上的E元素 |
| E:focus |
匹配获得当前焦点的E元素 |
| E:lang(c) |
匹配lang属性等于c的E元素 |
| E:enabled |
匹配表单中可用的元素 |
| E:disabled |
匹配表单中禁用的元素 |
| E:checked |
匹配表单中被选中的radio或checkbox元素 |
| E::selection |
匹配用户当前选中的元素 |
| E:root |
匹配文档的根元素，对于HTML文档，就是HTML元素 |
| E:nth-child(n) |
匹配其父元素的第n个子元素，第一个编号为1 |
| E:nth-last-child(n) |
匹配其父元素的倒数第n个子元素，第一个编号为1 |
| E:nth-of-type(n) |
与:nth-child()作用类似，但是仅匹配使用同种标签的元素 |
| E:nth-last-of-type(n) |
与:nth-last-child() 作用类似，但是仅匹配使用同种标签的元素 |
| E:last-child |
匹配父元素的最后一个子元素，等同于:nth-last-child(1) |
| E:first-of-type |
匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1) |
| E:last-of-type |
匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1) |
| E:only-child |
匹配父元素下仅有的一个子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1) |
| E:only-of-type |
匹配父元素下使用同种标签的唯一一个子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1) |
| E:empty |
匹配一个不包含任何子元素的元素，文本节点也被看作子元素 |
| E:not(selector) |
匹配不符合当前选择器的任何元素 |
| 选择器 |
含义 |
| E::first-line |
匹配E元素内容的第一行 |
| E::first-letter |
匹配E元素内容的第一个字母 |
| E::before |
在E元素之前插入生成的内容 |
| E::after |
在E元素之后插入生成的内容 |
选择器的优先级是怎样的?对于复杂场景如何计算优先级？
- 在属性后面使用
!important会覆盖页面内任何位置定义的元素样式
- 作为style属性写在元素标签上的内联样式
- id选择器
- 类选择器
- 伪类选择器
- 属性选择器
- 标签选择器
- 通配符选择器
- 浏览器自定义
- 复杂场景中
选择器的特殊性分为4个等级，a b c d，从左到右，越左边的越优先, 如果一个选择器规则有多个相同类型选择器，则+1。
如果是HTML行内样式，那么特殊性最优先 a
id选择器的特殊性是 b
类选择器、伪类选择器、属性选择器为 c
标签选择器、伪元素选择器为 d
例如：
* {} /* a=0 b=0 c=0 d=0 -> 0,0,0,0 */
p {} /* a=0 b=0 c=0 d=1 -> 0,0,0,1 */
a:hover {} /* a=0 b=0 c=1 d=1 -> 0,0,0,2 */
ul li {} /* a=0 b=0 c=0 d=2 -> 0,0,0,2 */
ul ol+li {} /* a=0 b=0 c=0 d=3 -> 0,0,0,3 */
h1+input[type=hidden]{} /* a=0 b=0 c=1 d=2 -> 0,0,1,1 */
ul ol li.active {} /* a=0 b=0 c=1 d=3 -> 0,0,1,3 */
#ct .box p {} /* a=0 b=1 c=1 d=1 -> 0,1,1,1 */
div#header:after {} /* a=0 b=1 c=0 d=2 -> 0,1,0,2 */
style="" /* a=1 b=0 c=0 d=0 -> 1,0,0,0 */
a:link, a:hover, a:active, a:visited 的顺序是怎样的？ 为什么？
- 顺序：链接未被点击前，a:visited是不生效的，它表示链接被点击之后的变化，所以在链接未被点击前，a:hover在链接被鼠标滑过时展现选择器内设置的效果。a:active表示鼠标点击时产生的效果，因此在点击时，链接显示为a:active选择器内设置的效果，当点击完毕后，a:visited把已经点击过的此链接永远的展示成选择器内设置的效果。所以此时不能将a:visited这个选择器顺序写在这四个选择器的最后，因为这样的话，当一个链接被点击后，用鼠标再指向它，它不会有任何的变化，这不是我们想要的结果，所以应该将a:visited这个选择器放到a:hover选择器的前面，使得鼠标无论在链接点击前还是点击后指向链接都可以有颜色或其他效果变化，告诉用户此链接正在被其关注。而a:active和a:visited的先后顺序取决于我们是否希望链接在被点击后，再次被点击要不要产生变化，若是，就讲a:active写在a:visited的后面，否则，可将a:visited写在a:active后面。最后是a:hover和 a:active的顺序，这两种选择器控制的是a链接的不同状态，所以他们之间的顺序不影响效果展示。其最理想的顺序为：a:link, a:visited,a:hover, a:active。
- link、hover、active、visited都是伪类选择器，从选择器类型中看优先级处于同一级别，这时后定义的会覆盖先定义的。但一个链接可能同时处于多种状态，即同时属于多个伪类
以下选择器分别是什么意思?
#header{
}//匹配id为header的元素
.header{
}//匹配class为header的元素
.header .logo{
}//匹配class为header元素下所有class为logo的子元素
.header.mobile{
}//匹配class同时为header和mobile的元素
.header p, .header h3{
}//匹配class为header的所有子元素p和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的元素的所有后代中type类型为text的input元素
列出你知道的伪类选择器
div:first-child、div:first-of-type、div :first-child和div :first-of-type的作用和区别 （注意空格的作用）
| div:first-child |
匹配父元素下第一个子元素且其必须为div标签 |
| div:first-of-type |
匹配父元素下第一个div元素 |
| div :first-child |
匹配div元素下所有后代（不只是子元素、子元素向下递归）的第一个子元素 |
| div :first-of-type |
匹配div元素下所有后代（不只是子元素、子元素向下递归）里同种标签中的第一个元素 |
运行如下代码，解析下输出样式的原因。
<style>
.item1:first-child{
color: red;
}/*匹配其父元素下第一个子元素，并且其class属性必须为item1的元素*/
.item1:first-of-type{
background: blue;
}/*匹配父元素下每一种元素的第一个class属性为item1的元素*/
</style>
<div class="ct">
<p class="item1">aa</p>/*是其父元素div下的第一个子元素，并且class为item1，所以aa输出为red*/
/*是其父元素div下的第一个p元素，并且其clas为item1，所以它的背景色为蓝色*/
<h3 class="item1">bb</h3>/*是其父元素div下的第一个h3元素，并且其clas为item1，所以它的背景色为蓝色*/
<h3 class="item1">ccc</h3>
</div>
网友评论