CSS中的选择器
Posted by xiongmao; tagged with css , css常用选择器 , css关系选择器 , css属性选择器 , css伪类选择器 , css伪元素 , css选择器的权重 , a元素的伪类
目录:
常用选择器
1.元素选择器:
作用:根据标签名来选中指定的元素
语法: 标签名{}
例子:p{} h1{} div{}
2.id选择器:
作用:根据元素的id属性选中一个元素
语法: #id属性值{}
例子:#box{}
3.类选择:
作用:根据元素的class属性值选中一组元素
语法: .class属性值{}
例子:.box{}
4.通配选择器
作用:选中页面中的所有元素
语法: *{}
关系选择器
1.子元素选择器
作用:选中指定父元素的指定子元素
语法:父元素 > 子元素
<div><p></p></div>
div > p{
}
2.后代选择器
作用:选中指定元素内指定的后代元素
语法:祖先 后代
html:
<p>
<span>我是p元素中的span元素</span><br>
<em>我是p元素的第一个em</em><br>
<em>我是p元素的第二个em</em><br>
<em>我是p元素的第三个em</em><br>
<em>我是p元素的第四个em</em><br>
</p>
css:
div span{
color: blue;
}
3.选择下一个兄弟选择器
语法:前一个 + 下一个
span + em {
color: orangered;
}
4.选择下边所有兄弟
语法:前一个 ~ 所有
span ~ em{
color:pink
}
属性选择器
[属性名] 选择含有指定属性的元素
[属性名=属性值] 选择含有指定属性和属性值得元素
[属性名^=属性值] 选择属性值以指定值开头的元素
[属性名$=属性值] 选择属性值以指定值结尾的元素
[属性名^=属性值] 选择属性值含有谋值的元素
伪类选择器
伪类:不存在的类,特殊的类
-伪类用来描述一个元素的特殊状态
比如:第一个元素,最后一个元素,鼠标移入的元素...
-伪类一盘情况下都是使用 :
开头的
:first-child
第一个元素
:last-child
最后一个元素
:nth-child()
选中第n个元素
特殊值:
n 第n个 n的范围0到正无穷
2n 表示选中偶数位的元素
2n+1 表示选中奇数位的元素
-以上这些伪类都是根据所有的子元素进行排列
first-of-type
last-of-type
nth-of-type
-这几个伪类的功能和上述类似,不同的是他们是在同类元素中进行排列
:not()
否定伪类
-将符合条件的元素从元素器中去除
代码演示:
<ul>
<span>我是span元素</span>
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
<li>第四个</li>
<li>第五个</li>
</ul>
css代码
/*ul > li:first-child{
color: blue;
}
ul > li:last-child{
color: red;
}
ul > li:nth-child(2){
color: seagreen;
}*/
/*ul > li:first-of-type{
color: teal;
}*/
ul > li:not(:nth-of-type(3)){
color: tomato;
}
选择器的权重
选择器的权重
内联样式 1,0,0,0
id选择器 0,1,0,0
类和伪类选择器 0,0,1,0
元素选择器 0,0,0,1
通配选择器 0,0,0,0
继承的样式 没有优先级
比较优先级时,需要将所有的选择器得优先级相加计算,最后优先级越高,则越优先显示(分组选择器单独计算)
选择器的累加不会超过其最大的数量级,类选择器在高也不会超过id选择器(同类型不会无限叠加)
可以在某一个样式的1后边添加 !important ,则此时该样式会获取到最高的优先级,甚至超过内联样式
注意:一般在开发的时候不会使用
样式的继承
样式继承,我们为一个元素设置的样式同时也会应用到他的后代
-继承是发生在祖先后后代之间的
继承的设计是为了我们开发
-利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上,
-这样只需设置一次即可让所有的元素都具有该样式
-注意:并不是所有的样式都会被继承
-比如说:背景相关的,布局相关的这些样式都不会被继承
a元素的伪类
css
<style>
a{
text-decoration: none;
}
/*
:link 用来表示没访问过的链接(正常的链接)
*/
a:link{
color: red;
}
/*
:visited 用来表示访问过的链接
由于隐私,所以viosited这个伪类只能修改链接的颜色
*/
a:visited{
color: orange;
}
/*其他的(不限制于a元素)
:hover 用来表示鼠标移入的状态
*/
a:hover{
color: blue;
}
/*
:active 用来表示鼠标点击
*/
a:active{
color: chartreuse;
}
</style>
html
<a href="http://baidu.com/">访问的链接</a>
<br><br>
<a href="https://blog.32yunbk.cn/">没有访问过的链接</a>