1. class 和 id 的使用场景?
class
适用于类选择器,设置元素的class
属性,为元素指定类名。多个元素可以拥有同一个类名。在CSS中,以.
开头。
id
适用于ID选择器,设置元素的id
属性,每个id在文档中必须是唯一的。在CSS中,以#
开头。ID选择器比类选择器的优先度更高。
2. CSS选择器常见的有几种?
基础选择器
选择器
含义
*
通用元素选择器,匹配页面上的�所有元素
#id
id选择器,匹配特定id的元素
.class
类选择器,匹配class�包含特定类的元素
element
标签选择器 如 p
, h1
组合选择器
选择器
含义
E,F
多元素选择器,使用,
分隔,同时匹配元素E或者F
E F
后代选择器,使用空格分隔,匹配E元素的所有后代(子元素向下递归)元素F
E>F
子元素选择器,使用>
分隔,匹配E元素的所有直接子元素(不会向下递归)
E+F
直接相邻元素选择器,使用+
分隔, 匹配E元素的相邻同级元素F
E~F
普通相邻元素选择器,使用~
分隔,匹配E元素之后的同级元素F(无论是否相邻)
.class1.class2
id选择器和类选择器书写时中间没有分隔符,.
和#
充当分隔符号
element#id
同id选择器,由于id都是唯一的,所以一般前面的element可省略
属性选择器
选择器
含义
E[attr]
匹配所有具有attr属性的E元素,div[id]
能匹配所有有id属性的div元素
E[attr=value]
匹配所有attr属性为value的E元素,div[id=test]
匹配所有id属性为test的div元素
E[attr~=value]
匹配所有attr属性具有多个空格分隔,其中一个值为value的元素
E[attr^=value]
匹配所有attr属性以value开头的E元素
E[attr$=value]
匹配所有attr属性以value结尾的E元素
E[attr*=value]
匹配所有attr属性包含value的E元素
伪类选择器
选择器
含义
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个子元素
E:nth-last-child(n)
匹配其父元素的倒数n个子元素
E:nth-of-type(n)
匹配使用同种标签的元素
E:nth-last-of-type(n)
匹配使用同种标签的元素
E:last-child
匹配父元素的最后一个子元素
E:first-of-type
匹配同种标签的第一个元素
E:last-of-type
匹配同种标签的最后一个元素
伪元素选择器
选择器
含义
E:first-line
匹配E元素内的第一行
E:first-letter
匹配E元素内的第一个字母
E:before
在E元素之前插入内容
E:after
在E元素之后插入内容
3. 选择器的优先级是怎样的?对于复杂场景如何计算优先级?
属性后面使用!important
的优先级最高
内联样式
id选择器
类选择器
伪类选择器
属性选择器
标签选择器
通配符选择器
浏览器自定义
通过逐级的对比选择器来确定优先级。如:
/*.class1属于类选择器优先级高于p标签选择器,所以下面的优先级高于上面的*/
#test p.class1 {}
#test .class1.class2 { }
4. a:link, a:hover, a:active, a:visited 的顺序是怎样的? 为什么?
a:link
>a:visited
>a:hover
>a:active
。
a:visited
一定要放在a:link
之后,这样才能保证访问过的样式具有a:visited
样式。a:hover
要放在a:link
和a:visited
之后,这样才不会被覆盖。而a:active
要放在最后,因为当鼠标点击时会先触发a:hover
。总结一下,就是事件触发的先后顺序。
由于伪类的选择器优先级一致,后面的a链接样式会覆盖前面的。
记忆方法 LVHA
, love and hate
5. 以下选择器分别是什么意思?
#header{
/*id选择器,匹配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的元素下,input标签类型为text的元素*/
}
6. 列出你知道的伪类选择器
选择器
含义
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个子元素
E:nth-last-child(n)
匹配其父元素的倒数n个子元素
E:nth-of-type(n)
匹配使用同种标签的元素
E:nth-last-of-type(n)
匹配使用同种标签的元素
E:last-child
匹配父元素的最后一个子元素
E:first-of-type
匹配同种标签的第一个元素
E:last-of-type
匹配同种标签的最后一个元素
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 :first-child
匹配所有div下的第一个子元素
div :first-of-type
匹配 div标签下第一次出现的子元素
空格表示后代选择器
8. 运行如下代码,解析下输出样式的原因。
<style>
.item1:first-child{
/*first-child选择class为item1在其父元素中的第一个子元素,所以aa字体颜色为红*/
color: red;
}
.item1:first-of-type{
/*first-of-type选择class为item1在其父元素中第一次出现的标签,所以p和h3标签背景色为蓝色*/
background: blue;
}
</style>
<div class="ct">
<p class="item1">aa</p>
<h3 class="item1">bb</h3>
<h3 class="item1">ccc</h3>
</div>
最后编辑于 :2017.12.11 02:27:34
©著作权归作者所有,转载或内容合作请联系作者 平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。