• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >CSS > css3 伪元素和伪类选择器详解

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

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含css3,伪元素,伪类,选择器等相关知识,佚名 希望在学习及工作中可以帮助到您

伪类选择器: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()从某父元素的最后一个子元素开始计算,来选择特定的元素。

看下面一个例子:


: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)选择第一个元素。


}</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"配合使用,见过最多的就是清除浮动,

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

您可能想查找下面的文章:

  • 使用CSS3制作一个简单的进度条(demo)
  • 利用CSS3伪元素实现逐渐发光的方格边框
  • CSS3实现内凹圆角的实例代码
  • 利用HTML5+CSS3实现3D转换效果实例详解
  • css3+伪元素实现鼠标移入时下划线向两边展开的效果
  • CSS3实现自定义Checkbox特效实例代码
  • 总结30个CSS3选择器
  • CSS3模拟动画下拉菜单效果
  • CSS3动画:5种预载动画效果实例
  • CSS3 仿微信聊天小气泡实例代码

相关文章

  • 2017-08-06纯CSS实现Tab切换标签效果代码
  • 2017-08-06css和js实现瀑布流效果示例
  • 2017-08-06如何设置单词字体间距 css设置字体间距样式代码
  • 2017-08-06CSS去掉A标签(链接)虚线框的方法
  • 2017-08-06CSS3模块的目前的状况分析
  • 2017-08-06纯css3实现鼠标经过图片显示描述的动画效果
  • 2017-08-06css实现兼容火狐、IE的LI奇偶行颜色交替方法
  • 2017-08-06css中文字加图片的布局实现
  • 2017-08-06UL里的LI元素左浮动层一行显示时使其居中的方法
  • 2017-08-06纯CSS实现酷黑风格三级下拉菜单效果代码

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 使用css打造自定义select(非模拟)实现原理及样式
    • 利用CSS3实现圆角的outline效果的教程
    • CSS3简单实现照片墙
    • 经验之谈 CSS网页布局避免滥用DIV元素
    • CSS浏览器兼容性Hack大全
    • float:left的对象(导航)如何居中示例探讨
    • div 内table 居中实现代码
    • CSS布局奇淫技巧之--各种居中总结
    • 使用CSS3配合IE滤镜实现渐变和投影的效果
    • CSS 多浏览器兼容性问题及解决方案

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有