CSS3之伪元素选择器和伪类选择器
伪类选择器,和一般的DOM中的元素样式不一样,它并不改变任何DOM内容。只是插入了一些修饰类的元素,这些元素对于用户来说是可见的,但是对于DOM来说不可见。伪类的效果可以通过添加一个实际的类来达到。
a:link|a:visited|a:hover|a:active
在 CSS 定义中,a:hover
必须被置于 a:link
和 a:visited
之后,才是有效的,a:active
必须被置于 a:hover
之后,才是有效的。
由于状态是动态变化的,所以一个元素达到一个特定状态时,它可能得到一个伪类的样式;当状态改变时,它又会失去这个样式。由此可以看出,它的功能和class有些类似,但它是基于文档之外的抽象,所以叫伪类。
:focus /* 伪类将应用于拥有键盘输入焦点的元素。 */ :first-child /* 伪类将应用于元素在页面中第一次出现的时候。 */ :lang /* 伪类将应用于元素带有指定lang的情况。 */
伪元素选择器,伪元素的效果是需要通过添加一个实际的元素才能达到的。
/* 为某个元素的第一行文字使用样式。 */ :first-line /* 为某个元素中的文字的首字母或第一个字使用样式。 */ :first-letter /* 在某个元素之前插入一些内容。 */ :before /* 在某个元素之后插入一些内容。 */ :after
结构性伪类选择器
:root()选择器,从字面上我们就可以很清楚的理解是根选择器,他的意思就是匹配元素E所在文档的根元素。在HTML文档中,根元素始终是<html>。:root选择器等同于<html>元素。
:not()选择器称为否定选择器,和jQuery中的:not选择器一模一样,可以选择除某个元素之外的所有元素。
:empty()选择器表示的就是空。用来选择没有任何内容的元素,这里没有内容指的是一点内容都没有,哪怕是一个空格。
:target()选择器来对页面某个target元素(该元素的id被当做页面中的超链接来使用)指定样式,该样式只在用户点击了页面中的超链接,并且跳转到target元素后起作用。
:first-child()选择器表示的是选择父元素的第一个子元素的元素E。简单点理解就是选择元素中的第一个子元素,记住是子元素,而不是后代元素。
:nth-child()选择某个元素的一个或多个特定的子元素。
<!DOCTYPE html> <html><head></head><style type="text/css"> div p:nth-child(n){color:red;}div p:nth-child(2n){color:yellow;}</style><body><div><p>111</p><p>222</p><p>333</p><p>444</p><p>555</p></div></body> </html>
:nth-last-child()从某父元素的最后一个子元素开始计算,来选择特定的元素。
<!DOCTYPE html> <html><head></head><style type="text/css"> div p:nth-last-child(2){color:red;}</style><body><div><p>111</p><p>222</p><p>333</p><p>444</p><p>555</p></div></body> </html>
:nth-of-type(n)选择器和:nth-child(n)选择器非常类似,不同的是它只计算父元素中指定的某种类型的子元素。当某个元素中的子元素不单单是同一种类型的子元素时,使用:nth-of-type(n)选择器来定位于父元素中某种类型的子元素是非常方便和有用的。
:only-child表示的是一个元素是它的父元素的唯一一个子元素。
CSS3中的伪元素
CSS3对伪元素进行了一定的调整,在以前的基础上增加了一个:
也就是现在变成了::first-letter,::first-line,::before,::after
另外还增加了一个::selection
在css3中,已经明确规定了伪类用一个冒号来表示,而伪元素则用两个冒号来表示。
::first-line
选择元素的第一行,比如说改变每个段落的第一行文本的样式,我们就可以使用这个
::before
和::after
这两个主要用来给元素的前面或后面插入内容,这两个常用"content"配合使用,见过最多的就是清除浮动
<!DOCTYPE html> <html><head></head><style type="text/css"> .test:before{content:"Hello";}.test.after{clear:both;}</style><body><div class="test"></div></body> </html>
::selection
用来改变浏览网页选中文的默认效果
UI状态元素伪类选择器
E:checked{attribute} 匹配所有用户界面(form表单)中处于选中状态的元素
E:enabled{attribute} 匹配所有用户界面(form表单)中处于可用状态的元素
E:disabled{attribute} 匹配所有用户界面(form表单)中处于不可用状态的元素
E::selection{attribute} 匹配元素中被用户选中或处于高亮状态的部分
目标伪类
E:target{attribute} 匹配相关URL指向的元素
CSS3之伪元素选择器和伪类选择器相关推荐
- 伪类、伪元素、锚伪类
伪类 CSS2中对伪类的定义是:CSS 伪类用于向某些选择器添加特殊的效果. 截止css2,伪类有以下几种: CSS3中对伪类的定义如下: 伪类存在的意义是为了通过选择器找到那些不存在与DOM树中的信 ...
- 基础知识--:before伪元素和:after伪元素
http://book.51cto.com/art/201108/285688.htm 3.7 替换指定位置 大家都知道before和after是前.后的意思.但是奇怪的是,CSS中的:before ...
- CSS一个元素同时使用多个类选择器(class selector)
CSS类选择器参考手册 一个元素同时使用多个类选择器 CSS中类选择器用点号表示.实际项目中一个div元素为了能被多个样式表匹配到(样式复用),通常div的class中由好几段组成,如<div ...
- css多个伪元素,使用CSS伪元素控制连续几个元素的样式方法
用CSS伪元素控制元素的时候经常性的需要改变一些元素的样式,网上有许多博客都说了如何去控制一个的改变,但是我在实际写的过程中,发现更多时候是需要控制多个连续元素的改变. 使用伪元素去控制(以:hove ...
- vue移除伪元素_获取伪元素的属性和改变伪元素的属性
获取伪元素的属性值 获取伪元素的属性值可以使用window.getComputedStyle()方法,获取伪元素的CSS样式声明对象.然后利用getPropertyValue方法或直接使用键值访问都可 ...
- css class选择器用法,CSS类选择器用法简明介绍
你对CSS类选择器的使用是否熟悉,这里向大家描述一下,在CSS中,CSS类选择器通常以一个点号显示,需要注意一点的就是不要使用数字起始类名!因为它无法在Mozilla或Firefox中起作用. CSS ...
- ID选择器与Class类选择器区别
class和id选择器得区别:class选择器的值不是唯一的,我可以在多个标签共用一个class名 ID选择器: <!DOCTYPE html> <html><head& ...
- Web CSS #id 标签选择器 style display 类选择器.class 使用CSS的三种方式 列表装饰 绝对定位
文章目录 CSS使用的三种方式 内联定义方式 实现代码 实现结果 样式块方式 实现代码 显示结果 链入外部样式表文件 实现代码 图是结果 #id 选择器 #id名 实现代码 实现结果 标签选择器 标签 ...
- css样式(二)(伪类 | 伪元素 | 导航 | 图像拼合 | 属性选择器 )
一.rgb值: RGBA 颜色RGBA 颜色值得到以下浏览器的支持:IE9+.Firefox 3+.Chrome.Safari 以及 Opera 10+.RGBA 颜色值是 RGB 颜色值的扩展,带有 ...
- html伪类选择器结构,子元素伪类选择器 - CSS3 | 绿叶学习网
子元素伪类选择器,指的就是选择某一个元素下的子元素.伪类选择器,相信小伙伴也接触过了,最典型的就是超链接的几个伪类:a:link.a:visited.a:hover.a:active. 在CSS3中, ...
最新文章
- Suricata的输出
- matlab画梅花,基于Matlab图像素描生成算法究.doc
- gh-ost 原理剖析
- Java servlet 实现的简易购物车
- 关于半马尔可夫(semi-markov)的一个形象解释
- open函数和close函数的使用
- ERP项目需要持续的呵护
- vim莫名假死的解决办法
- 《快活帮》第二次作业:团队项目选题报告
- 【mac】iTerm2中ssh保持连接不断开
- es支持的操作及性能
- eclipse3的jsp支持简单配置
- ViewHolder模式超简洁写法
- 【转】现代浏览器的工作原理
- 机器学习-笔试题总结1
- Waiting Processed Cancelable ShowDialog (Release 2)
- .NET 4 实践 - 使用dynamic 和MEF实现轻量级的 AOP 组件 (1)
- 华为服务器怎么装win7系统教程视频教程,华为交换机配置教程|华为交换机配置视频教程完整版...
- 工业上的数控机床所属计算机应用的什么领域,工业上的数控机床所属的计算机应用领域是______。...
- python 百度aip实现文字识别
热门文章
- hdu3986 spfa + 枚举最短路上的边
- 【组合数学】递推方程 ( 非齐次部分是 指数函数 且 底是特征根 | 求特解示例 )
- 会声会影x7 每次安装均会提示:已安装这个产品的另一个版本
- 可编辑树Ztree的使用(包括对后台数据库的增删改查)
- PHP学习方向-进阶2(三)
- nginx--之静态服务器
- pdf.js 在线阅读PDF
- Vim 在 windows 环境下的初步配置
- Linux下安装jdk(xxx.rpm,非xxx.tar.gz,请注意!)过程
- Steam 导入已下载好的游戏