<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪类</title>
<style>
/*
伪元素选择器：

伪元素的效果是需要通过添加一个实际的元素才能达到的。
CSS中有如下四种伪元素选择器：
· :first-line:为某个元素的第一行文字使用样式；
· :first-letter:为某个元素中的文字的首字母或第一个字使用样式；
· :before:在某个元素之前插入一些内容；
· :after: 在某个元素之后插入一些内容；
*/
p:first-line{ background-color:yellow;}
p:first-letter{color:blue;}
p:before{content:"这是：";}
p:after{content:"！结束了";}
/*
伪类选择器：

和一般的DOM中的元素样式不一样，它并不改变任何DOM内容。
只是插入了一些修饰类的元素，这些元素对于用户来说是可见的，但是对于DOM来说不可见。
伪类的效果可以通过添加一个实际的类来达到。

常用的伪类选择器是使用在a元素上的几种，`如a:link|a:visited|a:hover|a:active`
提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

结构性伪类选择器
:root()选择器，从字面上我们就可以很清楚的理解是根选择器，他的意思就是匹配元素E所在文档的根元素。在HTML文档中，根元素始终是<html>。“:root”选择器等同于<html>元素
:not()选择器称为否定选择器，和jQuery中的:not选择器一模一样，可以选择除某个元素之外的所有元素。
:empty()选择器表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。
:target()选择器来对页面某个target元素(该元素的id被当做页面中的超链接来使用)指定样式，该样式只在用户点击了页面中的超链接，并且跳转到target元素后起作用
:first-child()选择器表示的是选择父元素的第一个子元素的元素E。简单点理解就是选择元素中的第一个子元素，记住是子元素，而不是后代元素。
: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-last-child()从某父元素的最后一个子元素开始计算，来选择特定的元素。
:nth-of-type(n)”选择器来定位于父元素中某种类型的子元素
*/
:not(p){color:red;}
:empty{width:100px;height:20px;background:red;display: inline-block;}
:target{background:blue;}
div p:first-child{background:gray;}
div p:nth-child(2n){background:yellow;}

</style>
</head>
<body>
<p>
伪元素选择器：伪元素的效果是需要通过添加一个实际的元素才能达到的。CSS中有如下四种伪元素选择器：
:first- line:为某个元素的第一行文字使用样式；
· :first-letter:为某个元素中的文字的首字母或第一个字使用样式；
· :before:在某个元素之前插入一些内容；
· :after: 在某个元素之后插入一些内容；
</p>
<a href="#A">AAAAAAAA</a>
<a href="#B">BBBBBBBB</a>
<div id="A">AAAAAA</div>
<div id="B">BBBBBBB</div>

<!--伪类-->
<div>
<p>1111</p>
<p>2222</p>
<p>333333</p>
<p>444444</p>
</div>
</body>
</html>

css伪元素选择器的更多相关文章

  1. css 伪元素选择器

    /*设置第一个首字母的样式*/ p:first-letter{ color: red; font-size: 30px; } /* 在....之前 添加内容 这个属性使用不是很频繁 了解 使用此伪元素 ...

  2. css伪元素选择器（伪对象选择器）checked + 伪元素练习

    伪对象也叫伪元素,在过去,伪类和伪元素都被书写成前面只加一个冒号,实际上应该是: :weilei ::伪元素 而现在我们为了兼容旧的书写方式,用一个冒号引导伪类也是能被解析的. 伪类一般反应无法在CS ...

  3. CSS伪元素选择器和属性选择器

    伪元素 能使用伪元素来选择元素中的一些特殊位置 一.给段落定义样式 :first-letter  首字母(只能用于块元素) :first-line  第一行 1.为p元素中的第一个字符设置颜色为黄色, ...

  4. CSS伪类选择器

    一.CSS伪类选择器用于给某些选择器添加效果语法规则:选择器:伪选择器例:a:link {color: #FF0000} 未访问的链接 a:visited {color: #00FF00} 已访问的链 ...

  5. css伪类选择器及伪元素选择器

    1.类选择器 在css中可以使用类选择器把相同的元素定义成不同的样式.比如: 结果如下: 标题背景未变 2.伪类选择器 类选择器和伪类选择器的区别在于,类选择器我们定义的,而伪类选择器是CSS中已经定 ...

  6. CSS伪类选择器和伪元素选择器

    CSS的伪类选择器常用的是link/visited/hover/active,分别对应未访问.已访问过.鼠标悬停.鼠标按下时的样式,常用于链接,使用时要按此顺序依次写CSS,不能乱 a:link{ba ...

  7. css 为元素选择器，css目标状态伪类，结构化选择器，多媒体选择器，清除表默认样式、属性选择器

    伪元素选择器 :before 和 :after 添加的位置 :before --- 第一个子节点 :after --- 最后一个子节点 特点 1.默认是 inline 元素 2.必须包含 conten ...

  8. css选择器(常规选择器，伪类选择器，伪元素选择器，根元素选择器)

    前言 CSS的一个核心特性是能向文档中的一组元素类型应用某些规则,本文将详细介绍CSS选择器 选择器 [通配选择器] 星号*代表通配选择器,可以与任何元素匹配 *{color: red;} [元素选择 ...

  9. python 全栈开发，Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)

    一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...

随机推荐

  1. Ajax2

    一.完整版Ajax $.ajax({ url: "Ashxs/Login.ashx", data: { "name": name, "pwd" ...

  2. 在Linux中的文本模式下手动安装 Parallels Tools

    1.启动虚拟机. 2.当看到提示 X Server 无法启动的消息时,使用 Ctrl+Option+F1(Ctrl+Alt+F1)切换到另一个虚拟控制台并输入登录信息. 3 从“虚拟机”菜单中选择“安 ...

  3. 第三章 深入 ZAB 协议

    上一节介绍了ZAB协议的内容,本节将从系统模型.问题描述.算法描述和运行分析四方面来深入了解 ZAB 协议. 系统模型 在一个由一组进程 n ={P1,P2,...Pn}组成的分布式系统中,每一个进程 ...

  4. ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/tmp/mysql.sock' (2)

    ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/tmp/mysql.sock' (2) 背景: mys ...

  5. maven工程引用外部jar包

    maven工程经常回遇到引用外部jar包,需要先安装在jar包,然后再在工程中pom.xml文件中添加依赖. 示例: 命令行中运行: mvn install:install-file -Dfile=E ...

  6. iOS 图片压缩

    + (UIImage *)scaleFromImage:(UIImage *)image {    CGSize newSize = CGSizeMake(366, 366);   //目标图片的大小 ...

  7. php 和mysql httpd 简单网页的搭建

    使用两台服务器 Centos 7 做 php和httpd和php-sql 服务的安装  CentOS 5 做php 和 mysql 的安装 1.搭建本地yum源 两台服务器  都是 2.关闭防火墙和s ...

  8. ie6下内容会撑开父级设置好的宽高

    在ie6下,内容的宽高会撑开父级设置好的宽高,在其他浏览器下不会. 会出现的问题是:如果内容宽度大于父级设置好的宽度,内容的最后一个元素会换行显示. 注意:在计算时,务必做到精准,不然可能会产生不必要 ...

  9. 2015年8月17日，杨学明老师《产业互联网化下的研发模式转型》在中国科学院下属机构CNNIC成功举办！

    2015年8月17日,杨学明老师为中国网络新闻办公室直属央企中国互联网络中心(CNNIC)提供了一天的<产业互联网化下的研发模式转型>内训课程.杨学明老师分别从产业互联网化的问题与挑战.传 ...

  10. ubuntu卸载java

    Try this command: java -version If 1.6* comes then try: sudo apt-get autoremove openjdk-6-jre If 1.7 ...