CSS3伪类:first-child 的学习中引发问题
来源:互联网 发布:登录阿里云邮箱登陆 编辑:程序博客网 时间:2024/06/06 01:53
最近学伪类,学到一个伪类: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>之类的标签,那么文字的颜色就会变为红色了。
其实这个样式就近取的原则我是知道的,也用过不少,但是在这里就没有想起来是这么回事。主要还是实践的少。天天加样式加样式,却忽略了标签原本就有样式这个事实。
前段技术更新快,各种新技术层出不穷,像我这种菜鸟,一直忙于追逐新知识,新技术,这样难免浮躁,经过这次,我想是时候停下来好好审视一下自己了,回顾一下自己以前所学究竟吸收了多少。想起刚刚接触编程的时候看到的一句话:“技术是学不完的,我们应该学习解决问题的方法”,当时也不甚在意,如今看来,却正是这个道理。
路漫漫其修远兮,吾将上下而求索。
阅读全文
1 0
- CSS3伪类:first-child 的学习中引发问题
- css选择器中:first-child与:first-of-type的区别///CSS3伪类nth-of-type(n)用法详解
- 【CSS3】---结构性伪类选择器-first-child+last-child
- 伪类first-child
- 【CSS3】结构性伪类选择器—first-child
- CSS3中only-child伪类选择器
- IE下的伪类:first-child和:last-child版本支持问题
- 伪类:first-child的测试
- CSS3:nth-child()伪类选择器,奇偶数行自定义样式first-child
- first-child,关于伪类
- CSS :first-child 伪类
- css--伪类:first-child
- CSS3 伪类nth-child
- :first-child 的坑(first-child的伪类选择器不起作用)
- 关于CSS伪类first-child的深入理解
- css中的伪类 之 first-child
- 结构性伪类选择器—first-child
- CSS3伪类选择器:nth-child()
- Eclipse/MyEclipse导出可运行Jar包
- Win10和linux双系统怎么安装?Win10 linux双系统安装教程
- Linux 用户和用户组管理
- 前端面试之算法题
- Android高级之xUtils框架(四):DBUtils的用法
- CSS3伪类:first-child 的学习中引发问题
- linux setfacl 命令基本用法 将文件夹以及文件夹下子文件以及新生文件的权限赋予给用户
- 进入css3动画世界(二)
- String 的 split(String regex, int limit) 方法 次数,空串
- VB制作配色辅助小工具
- 真的值得买吗?四种小型热敏打印机的选择
- 猴子分桃子
- kafka01-Log
- Spell it Right(20) 1005