CSS样式详解之伪类元素及CSS3选择器
目录
一、伪类元素
emsp;emsp;在CSS中,hover
、active
等是CSS中最常用也是最基础的伪类操作,除伪类操作之外,还有伪类元素(before
,after
),当我们使用伪类元素的时候,需要同时在CSS样式中使用content
,content
中的内容是一个行内元素(文本状态),不支持设置宽高,当我们对带伪类元素的进行操作的时候,可以通过对该样式添加一个float:left
,就可以对该样式的宽高进行操作了。
.fs{
width:200px;
height:200px;
background:red;
margin-top:200px;margin-left:200px;
position:relative;
}
.fs:before{
width:100px;
height:100px;
background:green;
float:left;
position:absolute;
left:0%;
}
emsp;emsp;当我们对带有伪类元素的样式添加position
的时候,如果对其left
等进行操作,此时该样式的父级是body
,所以当我们对带有伪类元素的样式进行操作的时候,需要对他的父级元素添加position:relative;
emsp;emsp;带after和带before两个伪类元素的样式使用基本上是一致的,只不过一个在前一个在后。带伪类元素的样式不是一个真的元素,只是对主元素的一个附属。
二、CSS3选择器
1. 相邻选择器(+)
emsp;emsp;在CSS3中,相邻选择器是一个“+”,当我们需要使用的时候,只需要将已知的元素后面加上“+”以及元素名称即可。相邻选择器只会选择同级元素的后面的第一个元素。
//ex:
style{.fs{color:red;} .fs+li{color:blue;}}
body{
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
}
emsp;emsp;相邻选择器只能向后选择,不能向前选择。但是相邻选择器可以叠加使用
.fs+li+li+li{
color:green;
}
.fs+li+.sky>span{color:white;}
2. 兄弟选择器(~)
emsp;emsp; 兄弟选择器使用和相邻选择器类似,都只会选择其同级的后面元素,只不过兄弟选择器会选择其后面的所有元素。
emsp;emsp; 兄弟选择器用“~”来进行表示。
.fs{color:red;}
.fs~li{color:blue;}
.fs~div{color:green;}
3. 指定选择器(nth-of-type(n))
emsp;emsp; 指定选择器通过用nth-of-type()
来选择父元素下面的第几个子元素,第一个子元素为1而不是0。
emsp;emsp; n也可以是odd
(单数)和even
(双数)。
emsp;emsp; 同时我们还可以自己定义规则,如3n,此时是3倍数的子元素会被选中。后面的符号只支持加减。
特殊:nth-last-of-type(n)
emsp;emsp;nth-last-of-type(n)
是从后往前进行寻找。方法和nth-of-type()
相同。
4. 子元素指定选择器(子元素匹配选择器)
emsp;emsp;子元素指定选择器使用nth-child(n)
来进行表示,第一个元素用1表示,而不是0。
emsp;emsp;原理:根据我们所选元素去寻找它的父级,然后再在这个父级的子元素中寻找我们需要的第几个元素。
当有其他类型元素是我们所选定的数值位置的元素,则不起作用。
emsp;emsp;兄弟用法:nth-last-child。
5. 属性选择器
① [ 属性名 ]
emsp;emsp;当使用这种方法的时候,只要包含这个属性名的元素都会被选中。
<style>
div[fs]{
color:red;
}
</style>
② [ 属性名=属性值 ]
emsp;emsp;当使用这种方法的时候,必须属性名和属性值完全一致才会被选中。
③ [ 属性名~=属性值 ]
emsp;emsp;当使用这个方法的时候,只要属性名中包含这个属性值即可被选中。
④ [ 属性名^=属性值 ]
emsp;emsp;当时使用这种方法的时候,只要属性名中包含的属性值中,该属性值位于第一位,则会被选中。
⑤ [ 属性名$=属性值 ]
emsp;emsp;当时使用这种方法的时候,只要属性名中包含的属性值中,该属性值位于最后一位,则会被选中。
⑥ [ 属性名*=属性值 ]
emsp;emsp;当使用这种方法的时候,只要属性名中包含的属性值中,包含该属性,哪怕是在其他属性值内,都会被选中,但是如果之间有空格则不行。
6.高亮选择(::selection)
emsp;emsp;高亮选择是制作个性化页面中常用的操作,用::selection
表示。
emsp;emsp;可以设定四个样式:背景、字体颜色、鼠标选中状态、轮廓属性。
.fs::selection{
background:red;
color:green;
cursor:pointer;
outline:#00FF00 dotted thick;
}
7. 非内容选择器
emsp;emsp;该选择器用于删除已经选择到的元素。
使用方法:
emsp;emsp;元素名称:not(属性值,属性值)
注:如果是自定义属性需要使用 [ 属性名=属性值 ]这种方法选择。
div:not(.sky,.busy,[blue='1111]);
8. 启禁用选择器(enabled disabled)
emsp;emsp;启禁用选择器用enabled和disabled进行表示,一个元素默认为enabled,当我们对元素设定为disabled的时候,则不能选择。
fs:enabled{ }
fs:disabled{ }
//可以通过这种方式找到对应的元素 只对表单等有作用
9. Query选择器
emsp;emsp; Query选择器分为唯一选择器和群组选择器。
唯一选择器:
父级.querySelector(‘选择器名称’)
document.querySelector('div[blue='kkk]');
document.querySelector('div').innerHtml='abcd;
群组选择器:
父级.querySelectorAll(’ 选择器名称 ');
document.querySelectorAll('div,input,span');
document.querySelector('div')[0].innerHtml='abcd;
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!