大家好,我是IT修真院上海分院第7期的学员,一枚正直纯洁善良的web前端。今天给大家分享一下,css有哪些选择器,优先级如何计算??希望能够给大家带来一些收获和思考。
目录
1.背景介绍
2.知识剖析
3.常见问题
4.解决方案
5.编码实战
6.扩展思考
7.参考文献
8.更多讨论
1.背景介绍
要使用css对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器。
HTML页面中的元素就是通过CSS选择器进行控制的。
2.知识剖析
ID选择器
ID 选择器前面有一个 # 号,也称为棋盘号或井号,后面紧跟id名,必须以字母开头,大小写都可以。
***ID选择器优先级非常高,所以确定在整个页面为一出现时,才可以使用ID选择器,否则在后续维护时不能被很好的更新。
类选择器
类选择器是对html标签中class属性进行选择。css类选择器的选择符是“.”
标签可以包含多个类选择器,在class标签中用空格隔开。
css复合选择器
复合选择器是由两个或多个的基础选择器,通过不同方式组合而成的。具体如下
1.标签指定式选择器。第一个为标签选择器,第二个为id/class选择器
2.后代选择器。后代元素选择器,匹配所有属于E元素后代的F元素,E和F之间用空格分隔
3.并集选择器。是各个选择器通过逗号链接而成的,任何形式的选择器都可以作为并集选择器的一部分。
子元素选择器,只选择某个元素的子元素。子选择器使用了大于号(子结合符)。
子结合符两边可以有空白符,这是可选的。
相邻兄弟选择器可选择紧接在另一元素后的元素,且二者有相同父元素。
css属性选择器,属性选择器可以根据元素的属性及属性值来选择元素。
伪类
:link 向未被访问的链接添加样式。
:visited 向已被访问的链接添加样式。
:hover 当鼠标悬浮在元素上方时,向元素添加样式。
:active 向被激活的元素添加样式。
:focus 向拥有键盘输入焦点的元素添加样式。
顺序问题lv hao原则 电商举例
提示:在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。
提示:在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有效的。
伪元素
CSS 伪元素用于向某些选择器设置特殊效果。
:first-line 伪元素
"first-line" 伪元素用于向文本的首行设置特殊样式。
:first-letter 伪元素
"first-letter" 伪元素用于向文本的首字母设置特殊样式
:first-child 选择属于其父元素的首个子元素的每个元素,并为其设置样式:
CSS2 - :before 伪元素
":before" 伪元素可以在元素的内容前面插入新内容。
CSS2 - :after 伪元素
":after" 伪元素可以在元素的内容之后插入新内容。
扩展思考:
css选择器的优先级?
https://developer.mozilla.org/zh-CN/docs/Web/CSS/Specificity
http://www.cnblogs.com/aaronjs/p/3156809.html
https://blog.csdn.net/lzm18064126848/article/details/53471141<
https://www.oschina.net/translate/writing-efficient-css-selectors
https://www.w3.org/TR/CSS22/cascade.html#specificity
Google 资深web开发工程师Steve Souders对CSS选择器的效率从高到低做了一个排序:
1.id选择器(#myid)2.类选择器(.myclassname)3.标签选择器(div,h1,p)4.相邻选择器(h1+p)5.子选择器(ul < li)6.后代选择器(li a)7.通配符选择器(*)8.属性选择器(a[rel="external"])9.伪类选择器(a:hover,li:nth-child
8.更多讨论
答:color,font-family,font-size,font,font-style等
ref: https://www.w3.org/TR/CSS21/propidx.html
问:a:link、a:visited、a:hover、a:active顺序为什么要遵循love/hate 顺序?
答:a :link、a:hover、a:visited这几个元素,定义CSS时候的顺序不同,也会直接导致链接显示的效果不同,原因就在于浏览器解释CSS时遵循的“就近原则”。
一句话:在CSS中,如果对于相同元素有针对不同条件的定义,宜将最一般的条件放在最上面,并依次向下,保证最下面的是最特殊的条件。
这样,浏览器在显示元素时,才会从特殊到一般、逐级向上验证条件,才会使你的每一个CSS语句都起到效果
问:内联 外联 行内对优先级的影响是什么?比如内联的class可以覆盖外联的ID吗?
答:从CSS代码存放位置看权重优先级:内嵌样式 > 内部样式表 > 外联样式表。
class 权值1,0
id权值1,0,0
可以覆盖。