图片.png
1 .类选择器和id选择器都用于对html标签进行css样式设置，但用于不同场景。
| 相同点 | 不同点 |
|---|---|
| 可以应用于任何元素 | ID选择器只能在文档中使用一次，类选择器可以使用多次。 |
2 . css选择器常见的有一下几种：
| 类型 | 例子 |
|---|---|
| 类选择器 | .{ }; |
| id选择器 | #{ }； |
| 标签选择器 | p{ }; |
| 通用选择器 | *{ }； |
| 伪类选择器 | a:hover{ }； |
| 组合选择器 | E F{ }; E,F{ };等 |
| 属性选择器 | E[atter]; |
| 为元素选择器 | E::first-line; |
注：以上只是简单罗列几种常见的选择器，选择器还有很多种，比如伪类选择器和通用选择器、组合选择器有好几种，这里只列举一种。
3 . 选择器的优先级是这样的
如果多条规则作用于同一个元素上，且定义的相同属性的不同值，比如
<style>
#test {color: #666;}
p {color: #333;}
</style>
<p id="text">Text</p>
这种场景下，p元素文本颜色应该是哪个呢？
从高到低分别是：
在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式
作为style属性写在元素标签上的内联样式
id选择器
类选择器
伪类选择器
属性选择器
标签选择器
通配符选择器
浏览器自定义
对于复杂场景选择器的优先级
行内样式 <div style="xxx"></div> ==> a
ID 选择器 ==> b
类，属性选择器和伪类选择器 ==> c
标签选择器、伪元素 ==> d
4 . a:link,a:hover,a:active,a:visided选择器的顺序是根据实际需求来排布的，不同的排布方式产生的效果是不一样的。
a:link----正常状态（默认状态）下的属性；
a:hover----鼠标滑过时的属性；
a:active------鼠标点击时的属性；
a:visided-----访问后的属性。
正确的顺序是： a:link、a:visited、a:hover、a:active。
5 . 以下选择器是什么意思？
图片.png
| 代码 | 选择器类型 |
|---|---|
| #header{} | id选择器，id=header |
| .header{} | class选择器，class=header |
| .header .logo{} | class组合选择器,class=header,class=logo |
| .header.mobile{} | class组合选择器，class=header，class=mobile |
| .header p, .header h3{} | 多元素选择器.header的子元素p和h3 |
| #header .nav>li{} | 子元素选择器，#header和.nav的所有直接子元素li |
| #header a:hover{} | 后代选择器，#header的所有后代a:hover |
| #header .logo~p{} | 统计选择器，#header和.logo后的所有普通相邻元素 |
| #header input[type="text"]{} | 属性选择器，匹配所有具有type=“text”属性的元素 |
列出你知道的伪类选择器：
| 选择器 | 含义 |
|---|---|
| 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 | 匹配用户当前选中的元素 |
div:first-child、div:first-of-type、div :first-child和div :first-of-type的作用和区别 （注意空格的作用）
| div:first-child | 匹配父元素下，作为第一个子元素的div元素 |
|---|---|
| div :first-child | 匹配所有div元素内所有元素中属于其父元素的首个子元素 |
| div:first-of-type | 匹配父元素的子元素中，第一个div元素 |
| div :first-of-type | 匹配所有div元素内所有元素中属于其父元素的首个类型的子元素 |
first-child必须是div的第一个子元素，且符合指定的类型才可被选中；first-of-type首先div下的子元素要符合类型，其次要是类型中的第一个才可以被选中。
运行如下代码，解析下输出样式的原因。
<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>
图片.png
如上图所示，.item:first-child{color： red；}表示对class为item1的第一个子元素添加红色，而class item1的第一个子元素aa,所以aa变为红色；.item:first-of-type{background： blue；}表示对class下的子元素中的不同类型的第一个添加样式，aa和bb都是不同类型的第一个，而ccc是h3标签的第二个元素所以没有被选中，只有aa和bb的背景变成了蓝色。
网友评论