最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
css的伪类和伪元素理解
时间:2022-06-25 09:29:33 编辑:袖梨 来源:一聚教程网
伪类和伪元素的理解
官方解释
伪类一开始单单只是用来表示一些元素的动态状态,典型的就是链接的各个状态(LVHA)。随后CSS2标准扩展了其概念范围,使其成为了所有逻辑上存在但在文档树中却无须标识的“幽灵”分类。
伪元素则代表了某个元素的子元素,这个子元素虽然在逻辑上存在,但却并不实际存在于文档树中。
我自己的理解:
伪类,类,class是一个类,就类似class这样,表示一些元素的状态的,但是无须标识的分类。
伪元素,就是一个元素,类似p标签元素,等等,逻辑上存在,但是实际并不存在在文档树中。
另外一个简单的理解和区分就是:
伪类前面是一个冒号,为元素前面是两个冒号。E:first-child 伪类,E::first-line为元素。
特殊情况::before 和 ::after 伪元素
before 和after是在元素前面和后面添加一些元素,因此是伪元素,CSS3选择器中已经将其前面变为两个冒号了。请看:w3cselect
问题来了,那么为什么我们平时用before和after前面就一个冒号?
当你看了css2选择器就知道了,老的规范中,伪类和伪元素都用一个冒号,新规范为了区分,伪元素统一用两个“::”,所以,大家注意了,往后在写css3的时候,为元素要用两个冒号,伪类用一个冒号。
伪类和伪元素的应用
我之前的css常用效果,讲了一些。
像伪元素
::-webkit-scrollbar
::selection
::-webkit-input-placeholder
::after
等等。
伪元素中用的最多的要数::after和::before了
可以用这两个伪元素做很多效果!
html
haorooms
css
a {
position: relative;
display: inline-block;
outline: none;
text-decoration: none;
color: #000;
font-size: 32px;
padding: 5px 10px;
}
a:hover::before, a:hover::after { position: absolute; }
a:hover::before { content: "5B"; left: -20px; }
a:hover::after { content: "5D"; right: -20px; }
其中content中可以用attr也可以用url
例如:
a::after { content:"(" attr(href) ")"; }
h1::before { content: url(logo.png); }
伪类中用的最多的要数:nth-child()选择器了,关于nth-child(),我们看下文
nth-child()浏览器支持
IE9及以上版本,火狐,谷歌,Safari ,Opera都支持!
定义和用法
:nth-child(n) 选择器匹配属于其父元素的第 n个子元素,不论元素的类型。
n 可以是数字、关键词或公式。
例如:
p:nth-child(2)
{
background:#ff0000;
}
这是标题
haorooms第一个段落。
haorooms第二个段落。
haorooms第三个段落。
haorooms第四个段落。
上面这段代码请问那个段落颜色是红色的?
答案是“haorooms第一个段落。”颜色变成了红色!
解释::nth-child(n) 选择器匹配属于其父元素的第 n个子元素,不论元素的类型。p:nth-child(2),P标签的父元素是body,body的第二个子元素是“haorooms第一个段落。”所以haorooms第一个段落颜色变为了红色!!!
注意
很多朋友经常把:nth-child() 和:nth-of-type()混淆。
CSS3 :nth-of-type() 选择器的意思是“规定属于其父元素的第二个 p 元素”
看下面的例子:
p:nth-of-type(2)
{
background:#ff0000;
}
这是标题
haorooms第一个段落。
haorooms第二个段落。
haorooms第三个段落。
haorooms第四个段落。
代码一样,我的样式仅仅是把 p:nth-child(2)改成了 p:nth-of-type(2),现在就是“haorooms第二个段落。”颜色变成了红色。
奇偶数匹配
现在开始说说我开通说的table的tr偶数行变色的问题了。
因为table的子元素一般是tr,不会有别的,所以可以用
tr:nth-child(odd) 与 tr:nth-child(even)
当然也可以用
tr:nth-of-type(odd) tr:nth-of-type(even)
分别匹配序号为奇数与偶数的元素。奇数(odd)与(2n+1)结果一样;偶数(even)与(2n+0)及(2n)结果一样。
倍数写法
:nth-child(an) 【:nth-of-type(an)同理,不解释】
匹配所有倍数为a的元素。其中参数an中的字母n不可缺省,它是倍数写法的标志,如3n、5n。
例子:
li:nth-child(3n){background:orange;}/*把第3、第6、第9、…、所有3的倍数的LI的背景设为橙色*
延伸
:nth-child(2n+1), :nth-child(2n-3) , :nth-child(4n+3) ,还可以 :nth-child(-an+b)也就是反向匹配。
总之,你可以用了:nth-child伪类,可以对多个标签有规律的进行不同的显示,显示出CSS3的强大。css3需要多用,熟能生巧,在书写的时候,经常会把一些css3的属性忘掉,你可以多手写几遍。
相关文章
- 《燕云十六声》红尘无眼完成图文攻略 12-25
- 《燕云十六声》阴阳如影完成图文攻略 12-25
- 《燕云十六声》悬檐之下四架椽屋图文攻略 12-25
- 《燕云十六声》2024最新公测时间介绍 12-25
- 《燕云十六声》有没有藏宝阁 12-25
- 《燕云十六声》制作公司介绍 12-25