一、CSS1选择器
CSS1选择器注:
注1:为什么要LVHA
1.鼠标经过的“未访问链接”同时拥有a:link、a:hover两种属性,后面的属性会覆盖前面的属性定义;
2.鼠标经过的“已访问链接”同时拥有a:visited、a:hover两种属性,后面的属性会覆盖前面的属性定义;
所以说,a:hover定义一定要放在a:link、a:visited的后面。再重复一遍正确的顺序是:a:link、a:visited、a:hover、a:active .
注2:在谷歌浏览器中,a标签的herf中有内容时,a:link{color:blue}才有效,因为a:link会对拥有href=“ ”,即拥有实际链接地址的a对象发生效果。
二、CSS2选择器
补充:复合选择器(交集选择器)
--作用:
-可以选中同时满足多个选择器的元素
--语法:
-选择器1选择器2选择器N{}
注1:
[target = _black],选择有target属性并且属性值是_black,没有其他值
-
例如: [title=demo]{ background: yellow; } <p title="demo">p1</p> //有效 <p title="demo demo11">p2</p> //无效,title多了demo11这个值,若换成注2中的方法就可以
注2:
-
[title ~= demo]{ background: yellow; } <p title="demo demo1">p1</p> //有效 <p title="demo22">p2</p> //无效,[title ~= demo]是说title属性包含demo这个词,属性值之间用空格分隔的单词,demo22就不是demo这个词了,尽管包含demo,所以上面表格中说的包含单词demo需要理解清楚。
三、CSS3选择器
注1:first-child 和 first-of-type
CSS2选择器中有个:first-child
div:first-child{ outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word; color: rgb(0, 153, 0);"> red; }//无效,因为<div>1</div>并不是body元素的第一个子元素
<body>
<p>0</p>
<div>1</div>
<div>2</div>
<div>3</div>
</body>
CSS3选择器中有个:first-of-type
div:first-of-type{/*改*/ outline: 0px; margin: 0px; padding: 0px; overflow-wrap: break-word; color: rgb(0, 153, 0);"> red; }//有效,因为<div>1</div>是body元素的子元素中所有div的第一个
同理:last-child和last-of-type一样
注2::only-child 和 :only-of-type
<body> <div>1</div> <div>2</div> <div>3</div> <p>4</p> </body> p:only-child { //无效,p不是body的唯一子p元素 background: red; } p:only-of-type{//有效,p是body的唯一一个p子元素 background: red; }
注3::nth-child(n) 和 :nth-of-type(n)
<body> <div>1</div> <div>2</div> <div>3</div> <p>4</p> </body> p:only-child { //无效,p不是body的唯一子p元素 background: red; } p:only-of-type{//有效,p是body的唯一一个p子元素 background: red; }
body p:nth-child(2){ background: red; }//无效,body中第二个元素是<div>2</div>,不是p元素,此选择器无效。
补充:关于body p:nth-child(2),如果body中的第二个元素是p元素则有效,如果不是p元素,则无效;若是body :nth-child(2),则选中body中第二个元素。
body p:nth-of-type(2){ background: red; }//有效,效果如下图,因为<p>5</p>是body中第二个p元素
同理 :nth-last-child(n)和:nth-last-of-type(n)一样
-
注4:根元素选择器
-
:root这个选择器没什么意思,和你直接使用html一样
-
:root {...}
-
html {...}
其他内容,详见https://blog.csdn.net/q1056843325/article/details/53189526
css选择器优先级顺序
当我们写页面的时候,不知道你会不会产生这样的问题,为什么我给他添加的这条样式分明已经选择到我要给的元素了,但是他的样式并没有生效,那是为什么呢?
定义的属性有冲突时,浏览器会选择用那一套样式呢,下面来介绍一下选择器的优先级。
一、css选择器优先级
不同级别
-
在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
-
作为style属性写在元素内的样式
-
id选择器
-
类选择器
-
元素选择器
-
通配符选择器
-
浏览器自定义或继承
总结排序:!important > 行内样式 > ID选择器 > 类选择器 > 元素选择器 > 通配符选择器 > 继承 > 浏览器默认属性
同一级别
(1) 同一级别中后写的会覆盖先写的样式
(2) 同一级别css引入方式不同,优先级不同
总结排序:内联(行内)样式 > 内部样式表 > 外部样式表 > 导入样式(@import)。
对于选择器优先级,还可以通过计算权重值来比较。
例1、
test.css文件
#my{background:blue;}
html文件
<link rel="stylesheet" type="text/css" href="./css/test.css"> <style> /*这里是内部样式*/ #my{background:red;} </style> <span id="my">333</span>
执行结果:span最后为红色。
说明css引入方式优先级:内部样式表 > 外部样式表
例2、
<link rel="stylesheet" type="text/css" href="./css/test.css"> <style>#my{background:red;}</style> <span id="my" style="background: yellow">333</span>
执行结果:span最后为黄色。
说明css引入方式优先级:内联(行内)样式 > 内部样式表 > 外部样式表
二、复杂选择器优先级,后代选择器优先级多种情况
有时候当我们写样式的时候会用到好多个后代样式,那么优先级的情况是什么情况呢。来看几个例子。
我这里举的例子有点少,如果你在学习,你可以多自己写几个例子看看效果。
1、 id个数多的优先级高
#box .head span{ color:blue; } .box .head span{ color:red; } <br>//下面span标签的颜色是蓝色的 <div class="box" id="box"> <div class="head"> <span>我的颜色</span> </div> </div>
2、id个数相等的看class个数,class越多优先级越高
/*这个例子和题目不符,目的是为了让你看一下,这个span标签的样式是红色的。 虽然第三个样式的class个数多,但是他这个样式的span标签的样式是继承的,看第一个的总结, 他的优先级是最低的。所以他没有选中的优先级高。这里我就不写了,自己在第三个样式p的后面在写上一个span标签。 你会发现他的样式优先级是最高的。*/ #box .head span{ color:blue; } #box .head span{ color:red; } #box .head .p{ color:deeppink; } <div class="box" id="box"> <div class="head"> <p class="p"><span>我的颜色</span></p> </div> </div>
3、id和class个数相等,看元素个数,个数越多优先级越高。
//颜色应用的是第一个的样式,粉色 #box .head p span{ color:deeppink; } #box .head span{ color:blue; } #box .head span{ color:red; } <div class="box" id="box"> <div class="head"> <p class="p"><span>我的颜色</span></p> </div> </div>
4、优先级相同,后面的样式会覆盖前面的样式, 不分先后顺序,只看选择器类型和个数。
//蓝色,优先级相同,后面的覆盖前面的,id、class、元素的个数不分先后顺序 #box .head p span{ color:red; } #box div .p span{ color:blue; } <div class="box" id="box"> <div class="head" id="head"> <p class="p" id="p"><span>我的颜色</span></p> </div> </div
文章引用于:https://www.html.cn/qa/css3/13543.html、https://blog.csdn.net/wangchaohpu/article/details/82413850