css3 伪元素和伪类选择器详解


Posted in HTML / CSS onSeptember 04, 2014

伪类选择器:CSS中已经定义好的选择器,不能随便取名

常用的伪类选择器是使用在a元素上的几种,`如a:link|a:visited|a:hover|a:active`

 提示:在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。

提示:在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有效的。

伪元素选择器:并不是针对真正的元素使用的选择器,而是针对CSS中已经定义好的伪元素使用的选择器。

CSS中有如下四种伪元素选择器:
· first-line:为某个元素的第一行文字使用样式;
· first-letter:为某个元素中的文字的首字母或第一个字使用样式;
· before:在某个元素之前插入一些内容;
· after: 在某个元素之后插入一些内容;
   使用方法:选择器:伪元素{样式}

 结构性伪类选择器
 1.  四个最基本的:root、not、empty、target   

 2. first-child、last-child、nth-child、nth-last-child、              
nth-child(odd)、nth-child(even)、nth-last-child(odd)、nth-last-child(even)

 3.  nth-of-type、nth-last-of-type   
 4. 循环使用样式 
 5. only-child

:root()选择器,从字面上我们就可以很清楚的理解是根选择器,他的意思就是匹配元素E所在文档的根元素。在HTML文档中,根元素始终是<html>。“:root”选择器等同于<html>元素

:not()选择器称为否定选择器,和jQuery中的:not选择器一模一样,可以选择除某个元素之外的所有元素。

:empty()选择器表示的就是空。用来选择没有任何内容的元素,这里没有内容指的是一点内容都没有,哪怕是一个空格。

:target()选择器来对页面某个target元素(该元素的id被当做页面中的超链接来使用)指定样式,该样式只在用户点击了页面中的超链接,并且跳转到target元素后起作用

“:first-child()”选择器表示的是选择父元素的第一个子元素的元素E。简单点理解就是选择元素中的第一个子元素,记住是子元素,而不是后代元素。

:nth-child()选择某个元素的一个或多个特定的子元素;
:nth-last-child()从某父元素的最后一个子元素开始计算,来选择特定的元素。

看下面一个例子:

复制代码
代码如下:

<style type="text/css">
div p:nth-last-child(2){
color:red;
}
</style>
</head>
<body>
<div>
<p>前端</p>
<p>开发</p>
<p>工程</p>
<p>软件</p>
<p>工程</p>
</div>
</body>

:nth-child()可以选择某个的一个或多个特定的子元素,你可以按这种方式进行选择:
        :nth-child(length);/*参数是具体数字*/
        :nth-child(n);/*参数是n,n从0开始计算*/
        :nth-child(n*length)/*n的倍数选择,n从0开始算*/
        :nth-child(n+length);/*选择大于length后面的元素*/
        :nth-child(-n+length)/*选择小于length前面的元素*/
        :nth-child(n*length+1);/*表示隔几选一*/
        //上面length为整数

 值得注意的是:nth-child(0)没有选择元素,nth-child(1)选择第一个元素。

复制代码
代码如下:

<style type="text/css">
*{list-style:none;};
.demo {
width: 400px;
padding: 10px;
}
.demo li {
padding: 5px;
float: left;
margin-right:4px;
}
.demo li a {
float: left;
display: block;
height: 20px;
line-height: 20px;
width: 20px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
text-align: center;
background: #f36;
color: white;
text-decoration: none;
}
.demo li:nth-child(1){
background:#01FEFE;
}
.demo li:nth-child(2n){
background:#4679BD;
}</p> <p> </style>
</head>
<body>
<div class="demo">
<ul>
<li class="one" id="first"><a href="">1</a></li>
<li class="two"><a href="">2</a></li>
<li class="three"><a href="">3</a></li>
<li class="four"><a href="">4</a></li>
<li class="five"><a href="">5</a></li>
<li class="six"><a href="">6</a></li>
<li class="seven"><a href="">7</a></li>
<li class="eight"><a href="">8</a></li>
<li class="nine"><a href="">9</a></li>
<li class="ten" id="last"><a href="">10</a></li>
</ul>
</div>

“:nth-of-type(n)”选择器和“:nth-child(n)”选择器非常类似,不同的是它只计算父元素中指定的某种类型的子元素。当某个元素中的子元素不单单是同一种类型的子元素时,使用“:nth-of-type(n)”选择器来定位于父元素中某种类型的子元素是非常方便和有用的。

":only-child"表示的是一个元素是它的父元素的唯一一个子元素。

伪元素:
 CSS中的伪元素大家以前看过::first-line,:first-letter,:before,:after;
 那么在CSS3中,他对伪元素进行了一定的调整,在以前的基础上增加了一个“:”也就是现在变成了“::first-letter,::first-line,::before,::after”另外他还增加了一个“::selection”,两个“::”和一个“:”css3中主要用来区分伪类和伪元素,到目前来说,这两种方式都是被接受的,也就是说不管使用哪种写法所起的作用都是一样的,只是一个书写格式不同而以。

::first-line选择元素的第一行,比如说改变每个段落的第一行文本的样式,我们就可以使用这个
p::first-line {font-weight:bold;}

::before和::after这两个主要用来给元素的前面或后面插入内容,这两个常用"content"配合使用,见过最多的就是清除浮动,

复制代码
代码如下:

.clearfix:before,
.clearfix:after {
content: ".";
display: block;
height: 0;
visibility: hidden;
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;}

::selection用来改变浏览网页选中文的默认效果

HTML / CSS 相关文章推荐
CSS3画一个阴阳八卦图
Mar 09 HTML / CSS
CSS3地图动态实例代码(圆圈向外扩散)
Jun 15 HTML / CSS
CSS3混合模式mix-blend-mode/background-blend-mode简介
Mar 15 HTML / CSS
CSS教程:CSS3圆角属性
Apr 02 HTML / CSS
CSS3 please 跨浏览器的CSS3产生器
Mar 14 HTML / CSS
各大浏览器 CSS3 和 HTML5 兼容速查表 图文
Apr 01 HTML / CSS
CSS3制作酷炫的三维相册效果
Jul 01 HTML / CSS
Html5页面中的返回实现的方法
Feb 26 HTML / CSS
html5移动端价格输入键盘的实现
Sep 16 HTML / CSS
关于iframe跨域使用postMessage的实现
Oct 29 HTML / CSS
利用html+css实现菜单栏缓慢下拉效果的示例代码
Mar 30 HTML / CSS
关于flex 上下文中自动 margin的问题(完整例子)
May 20 HTML / CSS
CSS3实现的文本3D效果附图
Sep 03 #HTML / CSS
css3和jquery实现的可折叠导航菜单适合放在手机网页的导航菜单
Sep 02 #HTML / CSS
一款纯css3实现的圆形旋转分享按钮旋转角度可自己调整
Sep 02 #HTML / CSS
用纯css3实现的图片放大镜特效效果非常不错
Sep 02 #HTML / CSS
CSS3 中的@keyframes介绍
Sep 02 #HTML / CSS
CSS3 Pie工具推荐--让IE6-8支持一些优秀的CSS3特性
Sep 02 #HTML / CSS
css3中背景尺寸background-size详解
Sep 02 #HTML / CSS
You might like
PHP-CGI进程CPU 100% 与 file_get_contents 函数的关系分析
2011/08/15 PHP
destoon实现调用热门关键字的方法
2014/07/15 PHP
CodeIgniter读写分离实现方法详解
2016/01/20 PHP
PHP 表单提交及处理表单数据详解及实例
2016/12/27 PHP
IE6,IE7下js动态加载图片不显示错误
2010/07/17 Javascript
jQuery(1.6.3) 中css方法对浮动的实现缺陷分析
2011/09/09 Javascript
Jquery each方法跳出循环,并获取返回值(实例讲解)
2013/12/12 Javascript
node.js中的http.request.end方法使用说明
2014/12/10 Javascript
JavaScript常用小技巧小结
2014/12/29 Javascript
微信内置浏览器私有接口WeixinJSBridge介绍
2015/05/25 Javascript
详解基于Bootstrap扁平化的后台框架Ace
2015/11/27 Javascript
nodejs 的 session 简单使用
2016/06/06 NodeJs
JavaScript三种绑定事件方式及相互之间的区别分析
2017/01/10 Javascript
javascript滚轮事件基础实例讲解(37)
2017/02/14 Javascript
微信小程序本作用域下调用全局JS详解及实例
2017/02/22 Javascript
jQuery实现表单动态添加数据并提交的方法
2018/07/19 jQuery
JavaScript设计模式之工厂模式和抽象工厂模式定义与用法分析
2018/07/26 Javascript
微信小程序视图控件与bindtap之间的问题的解决
2019/04/08 Javascript
Webpack中SplitChunksPlugin 配置参数详解
2020/03/24 Javascript
vue实现井字棋游戏
2020/09/29 Javascript
[22:59]VGJ.S vs VG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python解析中国天气网的天气数据
2014/03/21 Python
Python PyQt5 Pycharm 环境搭建及配置详解(图文教程)
2019/07/16 Python
Python协程操作之gevent(yield阻塞,greenlet),协程实现多任务(有规律的交替协作执行)用法详解
2019/10/14 Python
Django+python服务器部署与环境部署教程详解
2020/03/30 Python
Python实现多线程下载脚本的示例代码
2020/04/03 Python
详解python中的lambda与sorted函数
2020/09/04 Python
德国鞋子网上商店:Omoda.de
2017/03/31 全球购物
英国第一豪华护肤品牌:Elemis
2017/10/12 全球购物
美国男士内衣品牌:Tommy John
2017/12/22 全球购物
房产销售经理职责
2013/12/20 职场文书
法制宣传口号
2014/06/16 职场文书
教师工作表现评语
2014/12/31 职场文书
语文教师个人工作总结
2015/02/06 职场文书
小学生交通安全寄语
2015/02/27 职场文书
适合后台管理系统开发的12个前端框架(小结)
2021/06/29 Javascript