以css伪类为基础,引发的选择器讨论 [新手向]
作为第一篇技术干货,来写哪个方面的内容,我着实考虑了很久。
经过了整整30秒的深思熟虑,我决定就我第一次发现新大陆一样的内容,来进行一次讨论。
- 伪类:
伪类对元素进行分类是基于特征(characteristics)而不是它们的名字、属性或者内容;原则上特征是不可以从文档树上推断得到的。
这是百度百科给的解释。不过,大家心里应该都有伪类的概念,看来百科也许更懵逼也说不定。所以还是直接上代码吧。 - 简单的使用:
<div id='ancestor'>
<div id="father">
<div id="son">
</div>
</div>
</div> <style>
#ancestor{
width: 150px;
height: 150px;
background-color: #f00;
}
#father{
width: 100px;
height: 100px;
background-color: #0f0;
}
#son{
width: 50px;
height: 50px;
background-color: #00f;
}
#ancestor:hover{
transform: rotate(45deg);
}
</style>这段代码,十分简单应该大家都能看的懂,效果也可以预知,下面我们就来做一点。
- 代码变异:
<div id='ancestor'>
<div id="father">
<div id="son">
</div>
</div>
</div> <style>
#ancestor{
width: 150px;
height: 150px;
background-color: #f00;
}
#father{
width: 100px;
height: 100px;
background-color: #0f0;
}
#son{
width: 50px;
height: 50px;
background-color: #00f;
}
#ancestor :hover{
transform: rotate(45deg);
}
</style>2
或许乍一看,感觉这段代码和之前的那一段一模一样,但是其实有一个很大的区别。
相信拷贝代码去尝试过的小伙伴们,已经开始疑惑了。那就让我开始来哔哔一波吧。
其实仔细关注了这两段代码之后,可以发现区别实际是在 #ancestor:hover 这个选择器上。第二段代码只是多加了一个空格。
很多同学肯定已经灵光一闪,仿佛已经明白了什么。不过,还是我来提壶(醍醐)给大家灌个顶吧! - 发生了什么:
大家都知道选择器中,空格就是后代选择器。#ancestor :hover 所命中的,其实就是 #ancestor 所有后代元素的 :hover 属性。所以在 #ancestor 自身上。没有被添加到这个伪类,而 #father 、#son,被同时命中。就出现了大家所看到的效果。如果,想印证我的说法,可以使用 #ancestor>:hover 再做一次尝试. 或者再次添加更多的后代元素.看看他们是否一样有这个特殊效果。
至于我们最通常使用的 #ancestor:hover 这一种使用的方式,实际上就是两个选择器组成的交集选择器,需要同时命中这两个条件才被适用。
故而,我这一堆哔哔,也就是为了表明伪类、伪元素选择器,其实和我们使用的id选择器、类选择器等等常见的选择器一样,可以使用各种关系符,来组成各种奇怪而又好用的选择器。 - 这一堆哔哔,换来的实用性:
很多人这个时候已经在吐槽了。伪类,只有在一些特殊的场景之下才会使用到,并不会很常用。
我想说的是,伪类,并不仅仅是 :link:,:vistited,:hover,:active 等特殊状态的。
还有一些,比如:first-child,:last-child,:nth-child 这些指向特定元素的。
在我们使用这些伪类时,例如 li:first-child ,会命中的是 li 标签,同时必须是他自身父级的第一个元素。所以,很多人都会加上一个类名来实现给他的效果。
但是,如果我们这样写呢。 ul > :first-child 是不是就会显的更有语义且优雅。
亦或者,ul > ::before 给所有的子集中增加一个小箭头
后话,哔哔了这么久。其实实用性确实不是很高。我做这一篇随笔主要意义是,希望新手能正常理解,伪类、伪元素,到底是一个什么样的东西。其实它们并不特殊,和普通的选择器是一模一样的。不需要用特殊的眼光去看待他们。也不需要觉得它们有什么特别的用法。将他们看成普通的选择器,只不过他们命中的元素是一种特殊状态。记住这一点就好。
至:所有对伪类,伪元素持懵逼状态的各位。
以css伪类为基础,引发的选择器讨论 [新手向]的更多相关文章
- CSS伪类和伪元素
一.伪类 CSS伪类用于向某些选择器添加特殊的效果,在W3规范中,CSS伪类有如下几个: CSS2.1 :active:向被激活的元素添加样式(激活是指点击鼠标那一下) :focus:向拥有键盘输入焦 ...
- CSS 伪类 (Pseudo-classes)
CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪类 (Pseudo-classes)实例: 超链接 本例演示如何向文档中的超链接添加不同的颜色. 超链接 2 本例演示如何向超链接添加其他样式. ...
- (五)CSS伪类(Pseudo-class)
CSS伪类用于向某些选择器添加特殊的效果.伪类的语法如下: selector : pseudo-class {property: value} CSS类也可以与伪类搭配使用: selector.cla ...
- 12、第十二节课,css伪类 (转)
一.特殊选择器 1.* 用于匹配任何的标记 2.> 用于指定父子节点关系 3.E + F 毗邻元素选择器,匹配所有紧随E元素之后的同级元素F 4.E ~ F 匹配所有E元素之后的同级元素F 5. ...
- 【从0到1学Web前端】CSS伪类和伪元素
1.CSS中的伪类 CSS 伪类用于向某些选择器加入特殊的效果. 语法: selector : pseudo-class {property: value} CSS 类也可与伪类搭配使用 select ...
- css伪类 伪元素
之前写了一篇 <详解 CSS 属性 - :before && :after> 的博文,当时自己没分清楚伪元素和伪类,所以在文章内把概念混淆了,庆幸 @riophae 兄指正 ...
- CSS 伪类 (Pseudo-classes)实例
CSS 伪类 (Pseudo-classes)实例CSS 伪类用于向某些选择器添加特殊的效果在支持 CSS 的浏览器中,链接的不同状态都可以不同的方式显示,这些状态包括:活动状态,已被访问状态,未被访 ...
- HTML转义字符 Unicode和CSS伪类介绍
CSS 伪类用于向某些选择器添加特殊的效果. a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FF00} /* 已访问的链接 */ ...
- 【从0到1学Web前端】CSS伪类和伪元素 分类: HTML+CSS 2015-06-02 22:29 1065人阅读 评论(0) 收藏
1.CSS中的伪类 CSS 伪类用于向某些选择器添加特殊的效果. 语法: selector : pseudo-class {property: value} CSS 类也可与伪类搭配使用 select ...
随机推荐
- CentOS6.8通过yum安装MySQL5.7
Centos6.8通过yum安装mysql5.7 1.安装mysql的yum源 a.下载配置mysql的yum源的rpm包 根据上面3张图片中的操作下载下来的rpm文件可以通过如下命令获取: wget ...
- HTML5 Geolocation API工作原理[转载]
大家都知道,HTML5 Geolocation 可以使用 IP 地址.基于 Web 的数据库.无线网络连接和三角测量或 GPS 技术来确定经度和纬度. 问题: 在一个基于地理位置服务的个人业余项目(小 ...
- WebP 的前世今生
除了视频,图片占据了 PC 和 App 的大部分流量,为运营方带来高额的成本支出,同时过多的图片加载会影响到网站与 App 的加载速度.因此在保证图片质量的前提下缩小图片的体积就成了迫在眉睫的事情. ...
- AJAX 笔记
一.什么是 AJAX ? AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 是一种用于创建快速动态网页的技术. 通过 ...
- Debian6单用户模式
开始的时候按"e"进入Grub的编辑界面,这个时候要找:linux /boot/vmlinuz-2.6.32-5-amd64 root=UUID=.......... ro qui ...
- 前后端分手大师——MVVM 模式
之前对 MVVM 模式一直只是模模糊糊的认识,正所谓没有实践就没有发言权,通过这两年对 Vue 框架的深入学习和项目实践,终于可以装B了有了拨开云雾见月明的感觉. 简而言之 Model–View–Vi ...
- java 分页导出百万级数据到excel
最近修改了一个导出员工培训课程的历史记录(一年数据),导出功能本来就有的,不过前台做了时间限制(只能选择一个月时间内的),还有一些必选条件, 导出的数据非常有局限性.心想:为什么要做出这么多条件限制呢 ...
- Python之Queue模块
Queue 1.创建一个“队列”对象 >>> import Queue >>> queue = Queue.Queue(maxsize=100) >>& ...
- iOS打包静态库(完整篇)
1. 什么是库? 所谓库就是程序代码的集合,是共享程序代码的一种方式. 2. 库的分类 根据程序代码的开源情况,库可以分为两类 开源库源代码是公开的,你可以看到具体实现.比如GitHub上比较出名的第 ...
- 利用bootstrap写的一点本地(localStorage)储存
摘要: H5本地存储 在以前,我们想要存储一些数据,并且只是在前端使用,服务端并不会使用,我们只能存在cookie里,但是cookie会跟随请求头在客户端和服务端之间来回传递,而且cookie还有一些 ...