1、类选择器
在css中可以使用类选择器把相同的元素定义成不同的样式。比如：

结果如下：

标题背景未变

2、伪类选择器
类选择器和伪类选择器的区别在于，类选择器我们定义的，而伪类选择器是CSS中已经定义好的选择器。
最常见的伪类选择器
a:link{ color: #ff6600 } /* 未被访问的链接 */
a:visited{ color: #87b291 } /* 已被访问的链接 */
a:hover{ color: #6535b2 } /* 鼠标指针移动到链接上 */
a:active{ color: #55b28e } /* 正在被点击的链接 */

结果如下：

3、伪元素选择器
伪元素选择器，针对于CSS中已经定义好的伪元素使用的选择器。
使用方法：
元素：伪元素{属性：值}
与类配合使用
元素.类名：伪元素{属性：值}
在CSS中，主要有四个伪元素选择器：
1）、first-line伪元素选择器
first-line伪元素选择器用于向某个元素中的第一行文字使用样式。
2）、first-letter伪元素选择器
first-letter伪元素选择器用于向某个元素中的文字的首字母（欧美文字）或第一个字（中文或者是日文等汉字）使用样式。
3）、before伪元素选择器
before伪元素选择器用于在某个元素之前插入一些内容。
4）、after伪元素选择器
after伪元素选择器用于在某个元素之后插入内容。

4、结构性伪类选择器root、not、empty和target
1）、root选择器:root
root选择器将样式绑定到页面的根元素中。
2）、not选择器:not()
想对某个结构元素使用样式，但是想排除这个结构元素下面的子结构元素，让它不使用这个样式时，我们就可以使用not选择器。

root设置了网页的背景，body设置了除了h5标题以外背景为白色（自行设置的优先级比body高，不是白色）

3）、empty选择器:empty
empty选择器指定当元素中内容为空白时使用的样式。

空的单元格才设置背景

4）、target选择器:target
target选择器对页面中某个target元素指定样式，该样式只在用户点击了页面中的超链接，并且跳转到target元素后起作用。

这里点击到C书签，变成棕色

选择器first-child、last-child、nth-child和nth-last-child
1）、first-child选择器
first-child单独指定第一个子元素的的样式。
2）、last-child选择器
last-child单独指定最后一个子元素的的样式。
3）、nth-child选择器
nth-child(n) 选择器匹配正数下来第 N 个子元素
nth-child(odd)选择器匹配正数下来第奇数个子元素
nth-child(even)选择器匹配正数下来第偶数个子元素
4）、nht-last-child选择器
nth-last-child(n) 选择器匹配倒数数下来第 N 个子元素
nth-last-child(odd)选择器匹配倒数数下来第奇数个子元素
nth-last-child(even)选择器匹配倒数下来第偶数个子元素

B书签即为div的第二个设成了红色

选择器nth-of-type和nth-last-of-type

nth-of-type和nth-last-of-type在css3中在统计的时候就只针对同类型的子元素进行计算。
nth-of-type正数
nth-last-of-type倒数
兼容性：
nth-of-type和nth-last-of-type都是CSS3开始提供需要在IE8以上的浏览器才会被支持，Chrome浏览器、Firefox浏览器、Opera浏览器、Safari浏览器都支持！

循环使用样式
nth-child(An+B)A表示每次循环中共包括几种样式，B表示指定的样式在循环中所处的位置。

only-child选择器
only-child选择器，只对唯一的子元素起作用。

html文档：

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

     <style>

         /*类选择器*/

         p.test{background-color: #a4ff56;}

         /*伪类选择器*/

         a:link{color: #ff65ea;}/*默认状态*/

         a:visited{color: #ffd300;}/*页面打开过了*/

         a:hover{color : #800a13;}/*鼠标放上上面*/

         a:active{color: #ff9535;}/*鼠标点击但不松开*/

         /*伪元素选择器*/

         p.pseudo:first-line{color: #11caff;}

         p.pseudo:first-letter{font-size:26px;}

         p.pseudo:before{content:"我是伪元素选择器before加的头";color: #ff3180;}

         /*这里颜色没变，依旧是第一行设置的颜色*，线list-style:none,去掉列表默认

         的原点，加上自己的样式*/

         p.pseudo:after{content:"我是伪元素选择器after加的小尾巴";color: #ff3180;}

         /*结构形伪类选择器*/

         :root{background-color:darkseagreen;}

         body *:not(h5){background-color:white;}/*body下除了h5都为白色*/

         table *:empty{background-color:royalblue;}/*这个*不能省略*,表示table下的所有标签*/

         :target{background-color:rosybrown;}

         /*div:nth-child(even){background-color: red;}*或者奇数odd都可生效/

         /*div:nth-child(2){background-color: red;}*但这一条无法生效，选择一类标签的某一条，

         可用下面的nth-of-type*/

         div:nth-last-of-type(2){background-color: red;}

         li:nth-child(3n+1){background-color: #ffd300;}

         li:nth-child(3n+2){background-color: #4db1bc;}

         li:nth-child(3n+3){background-color: #4affab;}/*3个为一个循环，对所有li生效，包括其他ul里的*/

         li:only-child{background-color: palevioletred;}/*只有元素只有一个时，才能生效*/

         .ul2>li{background-color: #19bc3e;}/*将ul2的所有行变为绿色*/

         /*li:nth-child(8){background-color: crimson;}无用*/

         .ul2 li:nth-child(1){background-color: crimson;}/*将ul2的第一行变成红色，即所有li的第8个*/

         ul:nth-of-type(2){background-color: gold;}/*这样将第二个ul列表的头部变成黄色*/

     </style>

 </head>

 <body>

     <h5 class="test">test</h5>

     <p class="test">test</p>

     <a href="#A">伪类选择器测试</a>

     <a href="#B">伪类选择器-鼠标放上面</a>

     <a href="#C">伪类选择器-点击过了</a><br/>

     <p class="pseudo">

         伪元素选择器一行<br/>因为并没有first-line这种元素

     </p>

     <table border="1"cellpadding="0"cellspacing="0">

         <tr><td>有内容</td><td></td></tr>

         <tr><td>有内容</td><td>有内容</td></tr>

     </table>

     <div id="A">A书签</div>

     <div id="B">B书签</div>

     <div id="C">C书签</div>

     <ul>

         <li>test1</li>

         <li>test2</li>

         <li>test3</li>

         <li>test1</li>

         <li>test2</li>

         <li>test3</li>

         <li>test1</li>

     </ul>

     <ul class="ul2">

         <li>test</li>

         <li>test</li>

         <li>test</li>

     </ul>

     <ul>

         <li>only child</li>

     </ul>

 </body>

 </html>

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

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

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

  2. 前端（六）—— 伪类选择器：a标签的伪类、内容伪类、索引伪类、取反伪类

    a标签的伪类.内容伪类.索引伪类.取反伪类 一.a标签的四大伪类 :link:未访问状态 :hover:悬浮状态 :active:活跃状态 :visited:已访问状态 四大伪类也可用于其他标签 &l ...

  3. 关于伪类“:pseudo-class”和伪元素“::pseudo-element”的常见应用

    伪类用于指定要选择的元素的特殊状态,向其添加特殊的效果,比如: input { width: 515px; height: 50px; padding: 10px 20px; border: 1px ...

  4. CSS 伪类(下)结构性伪类\UI伪类\动态伪类和其他伪类 valid check enable child required link visit

      伪类选择器汇总伪类选择器有4种, 结构性伪类\UI伪类\动态伪类和其他伪类. 具体如下 结构性伪类选择器结构性伪类选择器它能够根据元素在文档中的位置选择元素, 这类元素都有个前缀":&q ...

  5. CSS选择器之通配符选择器和多元素选择器

    1.通配符选择器 如果希望所有的元素都符合某一种样式,可以使用通配符选择器． 基本语法: *{margin:0; padding:0} 可以让所有的html元素的外边距和内边距都默认为0. 写一段ht ...

  6. CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解

    派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h ...

  7. css3类选择器之结合元素选择器和多类选择器

    css3类选择器之结合元素选择器和多类选择器用法: <!DOCTYPE html> <html lang="en"> <head> <me ...

  8. css：id选择器的权重>class选择器的权重=属性选择器的权重>元素选择器

    最近的项目要自己写前端了,重新学习下前端的一下基本知识. 一般在css样式表中,上面的会被下面的覆盖,如下图,文字会显示蓝色: 所以按照正常的来说,下面的css样式,测试的文字应该还是蓝色 但结果,测 ...

  9. 前端学习笔记之CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解

    派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h ...

  10. H5 14-后代选择器和子元素选择器

    14-后代选择器和子元素选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

随机推荐

  1. 关于aggregation 语法和表达式大全（最新3.4版）

    用mongodb四年多了,从1.8版用到目前的3.4版,功能越来越强大,而且它的每一次升级带给我的都是惊喜,最近发现他的aggregation(管道)技术越来越丰富了,基本上将它提供的所有功能都集成了 ...

  2. 你可能不知道的iOS冷知识——#pragma

    Mattt Thompson撰写. Zihan Xu翻译. 发布于2012年10月1日 #pragma 声明是彰显 Objective-C 工艺的标志之一.虽然 #pragma 最初的目的是为了使得源 ...

  3. X3850M2安装CertOS 7 KVM

    在旧的X3850中安装linux系统,研究KVM. 通过选择fedora和centos测试,最终选择centos7来安装. 先安装了一台,安装第二台时又出现第一台的问题,决定记录下来防止记忆出错. 1 ...

  4. C#与Java在继承静态类上的区别

    interface ITest { int Get(); } abstract class Test : ITest //此处会出现错误:Programe.Test不实现接口成员Program.ITe ...

  5. box-shadow

    box-shadow:a b c d e; a-水平位置,相对于盒子本身在水平方向的正偏移距离: b-垂直位置: c-模糊距离: d-阴影尺寸,从盒子的边框开始算起的阴影的宽度: e-阴影颜色: f- ...

  6. vim笔记2

    用vim 快两年了 看过教程也不少,总的来说还是得自己多练习,当自己觉得有需要的时候,再添加功能.这里分享个看过的最好的教程,出自贴吧的某个朋友,写的很好 零 学会盲打 壹 配置文件先从最简开始,在 ...

  7. query语句的拼接.

    在外网服务器上的网页,不能排序了,原因是query语句拼接时,sort没有能拼上,. 小小的思路: 1.是不是网页请求出了问题: 和我本机上的的请求一一对比,并没有发现什么问题. 2.代码除了问题吗: ...

  8. iOS AVCaptureSession 小视频开发总结，支持设备旋转

    iOS开发中当我们想要自定义相机拍照或摄像界面时,UIImagePickerController无法满足我们的需求,这时候我们可以使用AVFoundation.framework这个framework ...

  9. install sun java in ubuntu

    1. 下载: http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.html 2. 解压安装: ...

  10. 继续向peersim的event-driven模式开火！（新手勿喷）

    昨天学习了peersim的cycle模式,今天开始继续悟事件模式. 总的来说,我个人认为事件模式是周期模式的升级版,或者说,周期模式只是事件模式的一个子功能. 事件模式是基于时间和事件的(没打错),每 ...