1.class 和 id 的使用场景? 列出你知道的伪类选择器
- class用于定位某一类元素，页面某一元素有共同特征的可以用class元素，页面元素有个别共同特征的也可以用class元素。
- id用于定位页面唯一的元素，同一页面不能出现相同的“id“元素。
2、CSS选择器常见的有几种?
基础选择器:
- *通配符
- id选择器
- 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选择器和选择器连写的时候中间没有分隔符，. 和 # 本身充当分隔符的元素
属性选择器:
E[attr]: 具有attr属性的元素 e.g.: input[type]
E[attr =value]: 具有attr属性值为value的元素 e.g.: input[type=text]
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:hover 匹配鼠标悬停其上的元素
E:active 匹配鼠标按下未松开的元素
E:focus 匹配获取焦点的元素
E:lang(c) 匹配lang属性等于c的E元素(lang可以使自定义属性)
E:enabled 匹配表单中可用的元素
E:disabled 匹配表单中禁用的元素
E:checked 匹配表单中被选中的radio或checkbox元素
E::selection 匹配当前被用户选中的元素
E:root 匹配文档根元素,html
E:nth-child(n) 匹配父元素的第n个子元素
E:nth-last-child(n)匹配父元素倒数第n个子元素
E:last-child 匹配父元素最后一个子元素
E:first-child 匹配父元素第一个子元素
E:only-child 匹配父元素下仅有一个子元素
E:nth-of-type(n) 匹配同种标签的第n个
E:nth-last-of-type(n) 匹配同种标签倒数第n个
E:first-of-type 匹配同种标签第一个
E:last-of-type 匹配同种标签最后一个
E:onlye-of-type 匹配父元素下使用同种标签的唯一一个子元素
以上选择器中n的值可以为:
- 1,2,3,4,5
- 2n+1,2n,4n-1
- odd,even
3.选择器的优先级是怎样的?对于复杂场景如何计算优先级？
属性后+!important：p {color:#ccc!important;}
内联样式
id选择器
类选择器
伪类选择器
属性选择器
标签选择器
通用选择器
浏览器自定义
复杂场景时，计算优先级时通过数标签来计算，先数id，如果id相等再数类，如果id不相等，id多的选择器权重高，权重越高，优先级越高。如果id选择器数量相同，再数类选择器，最后数标签。
4.a:link, a:hover, a:active, a:visited 的顺序是怎样的？ 为什么？
a:link { /未被点击/
color: #000;
}
a:visited { /已被点击/
color: #F00;
}
a:hover { /鼠标悬停其上/
color: #0F0;
}
a:active { /鼠标已经按下，没有释放/
color: #00F;
}
当鼠标未点击a链接时， a:link起作用，所有应该放在最上面。当鼠标放在链接上时，a:link a:hover 都会起作用，如果想让hover起作用，应将其放在后面。当鼠标点击链接的时候，如果想让a:active起作用，应将其放在后面,a:visited鼠标点击过后的样式，这个如果放到最后，a:hover a:active都不会生效，所以要放到这两个前面
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元素和class为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.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元素下的同类元素的第一个子元素image.jpg1512x411 28.1 KB
image.jpg1564x342 22 KB
image.jpg1581x331 23 KB
image.jpg1462x438 24.2 KB
7.运行如下代码，解析下输出样式的原因。
<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>
解析：
- .item1:first-child{}匹配class名为item的第一个元素设置样式为字体红色。
- .item1:first-of-type{}：匹配父元素下使用同种标签的第一个元素，那么父元素class为ct的元素下面有两种类型，p和h3，两个类型各取第一个元素，所以aa和bb设置样式为蓝色背景。
