最近学伪类,学到一个伪类: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
发表评论 取消回复