最近学伪类,学到一个伪类:first-child  选择属于其父元素的首个子元素,或者也可以说是表示一组兄弟标签中的第一个元素。


其实使用起来挺简单的,也好理解。这文章要说的也不是这个伪类,而是在用这个伪类时发生的一个小问题



HTML

<ol><li><a href="##">Link1</a></li><li><a href="##">Link2</a></li><li><a href="##">link3</a></li></ol>

CSS

ol > li:first-child{color: red;}

}/*将ol 的第一个 li 颜色设置为红色*/

上面的代码的效果是这样的


我们看到第一个li的点变成了红色,那么我就有点奇怪,为什么文字没有变颜色?


在多方询问后,原来是因为a标签本身有自己的固定样式,而样式选择会就近来取,所以a链接里的颜色还是蓝色,如果将<a>标签换为其它<p>,<div>之类的标签,那么文字的颜色就会变为红色了。


其实这个样式就近取的原则我是知道的,也用过不少,但是在这里就没有想起来是这么回事。主要还是实践的少。天天加样式加样式,却忽略了标签原本就有样式这个事实。


原文链接:https://blog.csdn.net/qq_36370731/article/details/78140383

点赞(116) 打赏

Comment list 共有 0 条评论

暂无评论
立即
投稿
发表
评论
返回
顶部