css大家都不陌生了，从1996年12月css1正式推出，经历了1998年5月css2，再到2004年2月css2.1，最后一直到2010年推出的css3。css的推出给web带来巨大
的改变，使我们的网页样式多变，丰富多彩。现在所使用的css基本上是在1998年推出的css2的基础上发展而来的。

　　技术是发展的，2010年css3的推出，给我们带来许多亮点，比如可以创建圆角边框，可以在边框上使用图像等等。我也是被它这些新的样式所吸引。自己也一边
看一边学习，只是有新样式在部分浏览器是不支持的，但是也不妨碍我们对新的技术的追求。也随着现代浏览器的标准化，这些css3的新样式是迟早用的着，虽

然知识有点基础，但是每个技术都是基础牢固才会有更好的发展与突破，经常跟一些很牛逼的人聊天，他们都是工作一定的时候反过去看一些基础理论性的东西

，所以不要轻视基础，只有基础扎实，你的技术大厦才能更高，废话不多说，今天我就从css3的选择器说起。

css3之属性选择器

css3之属性选择器，其中包括：

1.[att=val]
2.[att*=val]
3.[att^=val]
4.[att$=val]

下面我将用实例演示它们的用法

css代码：

  1. <style type="text/css">
  2.     p[id=p_name] {color:red;}
  3.     p[id*=p] {border:1px solid #DDD;}
  4.     p[id^=start] {font-weight:}
  5.     p[id$=end] {background:yellow}
  6. </style>

效果如图1：

结构性伪类选择器

1.伪类选择器

在讲伪类选择器之前，我先说下类选择器，类选择器的使用如下所示：

  1. <style type="text/css">
  2.     p.p_test {color:#F60;}
  3. </style>

伪类选择器,大家看到这个术语不是很懂，楼主跟你们一样，但是看到下面的示例，立马知晓：

  1. <style type="text/css">
  2.     a:link {color:#F00; text-decoration:none;}
  3.     a:visited {color:#0F0; text-decoration:none;}
  4.     a:hover {color:#F0F; text-decoration:underline;}
  5.     a:active {color:#00F; text-decoration:none;}
  6. </style>

　　看到这大家顿时知道了吧，在css中我们最常用的伪类选择器是使用在a元素上。那么伪类选择器与类选择器额区别是,类选择器可以随便起名字如“p.right”，
“p.left”；但是伪类选择器是css中已经定义好的选择器，不能随便起名。

2.伪元素选择器

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

在css中有下面四个伪元素选择器：

2.1.first-line伪元素选择器(它用于某个元素中的第一行文字使用样式，只能与块级元素关联)

示例如下：

  1. <html>
  2. <head>
  3. <style type="text/css">
  4. p:first-line
  5.   {
  6.   color:#ff0000;
  7.   font-variant:small-caps;
  8.   }
  9. </style>
  10. </head>
  11.  
  12. <body>
  13. <p>
  14. This is a text.<br/>
  15. That is a text.
  16. </p>
  17. </body>
  18. </html>

2.2.first-letter伪元素选择器(向文本的第一个字母添加特殊样式,在 CSS2.1 之前，:first-letter 只能与块级元素关联。CSS2.1 扩大了这个范围，可以与任

何元素关联)

示例如下:

  1. <html>
  2. <head>
  3. <style type="text/css">
  4. p:first-letter
  5.   {
  6.   color:#ff0000;
  7.   font-size:xx-large;
  8.   }
  9. </style>
  10. </head>
  11.  
  12. <body>
  13. <p>This is a text.</p>
  14. </body>
  15. </html>

2.3.before伪元素选择器(在元素之前添加内容)

这个伪元素允许创作人员在元素内容的最前面插入生成内容。默认地，这个伪元素是行内元素，不过可以使用属性 display 改变这一点.

示例如下:

  1. <!DOCTYPE HTML>
  2. <html lang="en-US">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title> 选择器 </title>
  6.     <style type="text/css">
  7.         li {list-style:none;}
  8.         li:before {content:'■'}
  9.     </style>
  10. </head>
  11. <body>
  12.     <ul>
  13.         <li>项目1</li>
  14.         <li>项目2</li>
  15.         <li>项目3</li>
  16.     </ul>
  17. </body>
  18. </html>

2.4.after伪元素选择器(在元素之后添加内容)

示例如下:

  1. <!DOCTYPE HTML>
  2. <html lang="en-US">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title> 选择器 </title>
  6.     <style type="text/css">
  7.         li {list-style:none;}
  8.         li:after {content:'--测试文字';color:red}
  9.     </style>
  10. </head>
  11. <body>
  12.     <ul>
  13.         <li>项目1</li>
  14.         <li>项目2</li>
  15.         <li>项目3</li>
  16.     </ul>
  17. </body>
  18. </html>

3. 4个基本结构性伪类选择器

3.1.root选择器（将样式绑定到页面的根元素中）

所谓根元素，是指位于文档树的最顶层结构的元素，在html页面上就是指包含整个页面的“html”部分.

示例如下:

  1. <!DOCTYPE HTML>
  2. <html lang="en-US">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title> 选择器 </title>
  6.     <style type="text/css">
  7.         :root {background:yellow;}
  8.         body {background:red;}
  9.     </style>
  10. </head>
  11. <body>
  12.     <ul>
  13.         <li>项目1</li>
  14.         <li>项目2</li>
  15.         <li>项目3</li>
  16.     </ul>
  17. </body>
  18. </html>

ps:在使用样式指定root元素与body元素的背景时，根据情况不同的指定条件，背景色的显示范围会有所变化，如上面的代码不使用root选择器来指定root元素
的背景色，只指定body元素的背景色，则整个页面就变成红色的了。

3.2.not选择器(想对某个结构使用样式，但是想排除这个结构元素下面的子结构元素，让它不使用这个样式，就使用not选择器)

示例如下:

  1. <!DOCTYPE HTML>
  2. <html lang="en-US">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title> 选择器 </title>
  6.     <style type="text/css">
  7.         body *:not(p) {color:blue;}
  8.     </style>
  9. </head>
  10. <body>
  11.     <p>我是排除元素</p>
  12.     <ul>
  13.         <li>项目1</li>
  14.         <li>项目2</li>
  15.         <li>项目3</li>
  16.     </ul>
  17. </body>
  18. </html>

3.3.empty选择器(指定当元素的内容为空时使用样式)

示例如下:

  1. <!DOCTYPE HTML>
  2. <html lang="en-US">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title> 选择器 </title>
  6.     <style type="text/css">
  7.         table td {padding:10px;}
  8.         table td:empty {background:#DDD}
  9.     </style>
  10. </head>
  11. <body>
  12.     <table>
  13.         <tr>
  14.             <td>1</td>
  15.             <td>2</td>
  16.             <td>3</td>
  17.  
  18. </tr>
  19.         <tr>
  20.             <td>4</td>
  21.             <td>5</td>
  22.             <td></td>
  23.         </tr>
  24.  
  25. </table>
  26. </body>
  27. </html>

3.4.target选择器(使用target选择器来对页面中的某个target元素[该元素的id被当作页面的超链接类使用]指定样式，该样式只有在用户点击了页面中的超链接

，并且跳转到target元素后起作用)

示例如下:

  1. <!DOCTYPE HTML>
  2. <html lang="en-US">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title> 选择器 </title>
  6.     <style type="text/css">
  7.         :target {background:yellow;}
  8.     </style>
  9. </head>
  10. <body>
  11.     <a href="#div1">连接一</a>
  12.     <a href="#div2">连接一</a>
  13.     <div class="test" id="div1">内容一</div>
  14.     <div id="div2">内容二
  15.  
  16. </div>
  17. </body>
  18. </html>

4. 下面接着说其它几个选择器

first-child,last-child,nth-child,nth-last-child这几个选择器能够针对一个父元素中的第一个，最后一个，指定序号的子元素，甚至第偶数个，第奇数
个子元素进行样式指定。

4.1.first-child与last-child的运用，first-child在ie7开始被支持，其它现代浏览器都支持

  1. <!DOCTYPE HTML>
  2. <html lang="en-US">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title> 选择器 </title>
  6.     <style type="text/css">
  7.         .ul1 li:first-child {background:yellow;}
  8.         .ul1 li:last-child {background:red;}
  9.     </style>
  10. </head>
  11. <body>
  12.     <ul class="ul1">
  13.         <li>项目1</li>
  14.         <li>项目2</li>
  15.         <li>项目3</li>
  16.     </ul>
  17. </body>
  18. </html>

4.2.nth-child(表示第几个元素),运用如下:

  1. <!DOCTYPE HTML>
  2. <html lang="en-US">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title> 选择器 </title>
  6.     <style type="text/css">
  7.         .ul1 li:nth-child(2) {background:yellow;}
  8.     </style>
  9. </head>
  10. <body>
  11.     <ul class="ul1">
  12.         <li>项目1</li>
  13.         <li>项目2</li>
  14.         <li>项目3</li>
  15.     </ul>
  16. </body>
  17. </html>

4.3.nth-last-child(表示倒数第几个元素),运用如下:

  1. <!DOCTYPE HTML>
  2. <html lang="en-US">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title> 选择器 </title>
  6.     <style type="text/css">
  7.         .ul1 li:nth-last-child(1) {background:yellow;}
  8.     </style>
  9. </head>
  10. <body>
  11.     <ul class="ul1">
  12.         <li>项目1</li>
  13.         <li>项目2</li>
  14.         <li>项目3</li>
  15.     </ul>
  16. </body>
  17. </html>

ps:nth-child与nth-last-child的序号是从1开始，当然也可以是关键词或公式。；除了对指定序号的子元素使用样式以外，还可以对某个父元素中的所有第奇
数个子元素或第偶数个子元素使用样式。

4.3.1 nth-child 对某个父元素中的所有第奇数个子元素的样式设置

  1. <!DOCTYPE HTML>
  2. <html lang="en-US">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title> 选择器 </title>
  6.     <style type="text/css">
  7.         .ul1 li:nth-child(odd) {background:yellow;}
  8.     </style>
  9. </head>
  10. <body>
  11.     <ul class="ul1">
  12.         <li>项目1</li>
  13.         <li>项目2</li>
  14.         <li>项目3</li>
  15.         <li>项目4</li>
  16.  
  17. <li>项目5</li>
  18.         <li>项目6</li>
  19.         <li>项目7</li>
  20.     </ul>
  21. </body>
  22. </html>

4.3.2 nth-last-child 对某个父元素中的所有倒数上去的第偶数个子元素的样式设置

  1. <!DOCTYPE HTML>
  2. <html lang="en-US">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title> 选择器 </title>
  6.     <style type="text/css">
  7.         .ul1 li:nth-last-child(even) {background:yellow;}
  8.     </style>
  9. </head>
  10. <body>
  11.     <ul class="ul1">
  12.         <li>项目1</li>
  13.         <li>项目2</li>
  14.         <li>项目3</li>
  15.         <li>项目4</li>
  16.  
  17. <li>项目5</li>
  18.         <li>项目6</li>
  19.         <li>项目7</li>
  20.     </ul>
  21. </body>
  22. </html>

4.4.nth-of-type(匹配属于父元素的特定类型的第 N 个子元素的每个元素)

4.5.nth-last-of-type(配属于父元素的特定类型的第 N 个子元素的每个元素，从最后一个子元素开始计数)

好，既然知道他们的用处，那我们直接看个列子：

  1. <!DOCTYPE HTML>
  2. <html lang="en-US">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title> 选择器 </title>
  6.     <style type="text/css">
  7.         h2:nth-of-type(odd) {background:red;}
  8.         h2:nth-last-of-type(even) {background:green;}
  9.     </style>
  10. </head>
  11. <body>
  12.     <h2>标题一</h2>
  13.     <p>内容一</p>
  14.     <h2>标题二</h2>
  15.     <p>内容二</p>
  16.     <h2>标题三</h2>
  17.     <p>内容三</p>
  18. </body>
  19. </html>

5.only-child(匹配属于其父元素的唯一子元素的每个元素)

其实“:nth-child(1):nth-last-child(1)”的结合用法

  1. <!DOCTYPE HTML>
  2. <html lang="en-US">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title> 选择器 </title>
  6.     <style type="text/css">
  7.         div p:only-child {background:red;}
  8.     </style>
  9. </head>
  10. <body>
  11.     <div>
  12.         <p>孩子一</p>
  13.     </div>
  14.     <div>
  15.         <p>孩子一</p>
  16.         <p>孩子二</p>
  17.     </div>
  18.     <div>
  19.         <p>孩子一</p>
  20.         <p>孩子二</p>
  21.  
  22. <p>孩子三</p>
  23.     </div>
  24. </body>
  25. </html>

　　上面说了那么多的css选择器的示例运用，有这些选择器可以大幅度的提高开发书写或修改样式表是的工作效率，我其实一直期待使用这些css选择器，可惜有IE
在几乎在pc上是不能使用这些高级的选择器，还好移动端的浏览器支持的不错。好啦，这些也只是css3的一部分选择器，下次我将会列出其余的部分，大家想知

道也可以下载css3手册先一睹为快！

css3的那些高级选择器一的更多相关文章

  1. css3的那些高级选择器二

    在上个星期我介绍了css3的属性选择器,伪类选择器和结构伪类选择器,今天楼主继续把其它的css3选择器说完. 在css3中,共有11中UI状态伪类选择器,分别是E:hover,E:active,E:f ...

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

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

  3. python全栈开发day38-css三种引入方式、基础选择器、高级选择器、补充选择器

    一.昨日内容回顾 div:分割整个网站,很多块 (1)排版标签 (2)块级标签 独占一行 可以设置高和宽,如果不设置宽高,默认是父盒子的宽 span: (1) 小区域 (2)文本标签 (3)在一行内显 ...

  4. day40 css高级选择器

    一.高级选择器 高级选择器分为:后代选择器.子代选择器.并集选择器.交集选择器 后代选择器 使用空格表示后代选择器.顾名思义,父元素的后代(包括儿子,孙子,重孙子) .container p{ col ...

  5. CSS3常用30种选择器总结

    CSS3常用30种选择器总结 HTML5/CSS3时尚的圆盘时钟动画 带当前日期 www.html5tricks.com/demo/html5-css3-clock-with-date/index.h ...

  6. CSS3 结构伪类选择器 详解

    1 CSS3 结构伪类选择器 1.E:root 匹配E元素所在的根元素 即:html 2. E:nth-child(n) (1)匹配E元素的父元素中第n个子元素,(2)且该位置的子元素类型必须是E类型 ...

  7. JQuery_高级选择器

    在很多特殊的元素上,比如父子关系的元素,兄弟关系的元素,特殊属性的元素等等. 在早期 CSS 的使用上,由于 IE6 等低版本浏览器不支持,所以这些高级选择器的使用也不具备普遍性,但随着 jQuery ...

  8. css3新增加的选择器

    css3新增加的选择器 一.属性选择器: E[attr] 只要有属性名E[attr=value] 属性名=属性值E[attr~=blue] 包含这个blue整个单词就可以E[attr^=c] 以这个字 ...

  9. jquery学习（3）--高级选择器

    自己手写的学习笔记.常规选择器: /****************学习--高级选择器(1)****************/---高级选择器:ie7+ 层次选择器: 后代选择器     ul li ...

随机推荐

  1. [转]javascript中基本类型和引用类型的区别分析

    基本类型和引用类型 ECMAScript包含两个不同类型的值:基本类型值和引用类型值.基本类型值指的是简单的数据段:引用类型值指由多个值构成的对象.当我们把变量赋值给一个变量时,解析器首先要做的就是确 ...

  2. 实现一个自定义<table>标签

    需求是有两个自定义的标签<table>和<column> <table>有个items属性,负责导入数据 package hello; import java.ut ...

  3. mysql 存储过程 事务处理 （转）

    BEGIN DECLARE t_error INTEGER DEFAULT 0;  DECLARE CONTINUE HANDLER FOR SQLEXCEPTION SET t_error=1; S ...

  4. 监控文件的watchdog

    watchdog用来监控指定目录/文件的变化,如添加删除文件或目录.修改文件内容.重命名文件或目录等,每种变化都会产生一个事件,且有一个特定的事件类与之对应,然后再通过事件处理类来处理对应的事件,怎么 ...

  5. java中的getProperty()方法。获取系统中属性名为key的属性对应的值

    总结:getProperty方法:获取系统中属性名为key的属性对应的值,系统中常见的属性名以及属性如下: 现在用getProperty()的方法,获取系统信息代码: package com.aaa; ...

  6. 求小球反弹高度，及落地过程中经过的路程~~~java代码

    总结:这种思想,不是一想就突然出现在脑海里的 package com.c2; //题目:一球从100米高度自由落下,每次落地后反跳回原高度的一半: //再落下,求它在 第10次落地时,共经过多少米?第 ...

  7. mysql核心参数优化

    MySQL数据库服务器配置CPU的优化内存的优化IO的优化连接的优化数据一致性的优化 1.描述back_log参数的作用? back_log = 500 要求 MySQL 能有的连接数量.当主要MyS ...

  8. django-settings.py配置

    django settings 详细资料 ############ 开始项目 python3.5 pip -m install django==1.11.7 指定版本安装 pip3 install d ...

  9. PHP字符串的处理(一)-字符串初识和比较

    在PHP中,字符和字节一样,共有256种不同字符的可能性,PHP对Unicode没有本地支持,一个GB2312编码的汉字占2字节,一个UTF-8编码的汉字占3字节字符串看作字符集和时,并不是真正的数组 ...

  10. 分析比较多表查询中的IN与JOIN

    IN 是子查询的关键字,JOIN 是连接的关键字,项目开发中经常会使用到多表查询,而子查询与连接正是实现多表查询的重要途径.那两者是怎么运行的?IN与JOIN哪个更好?下面就来分析与比较. 现在有te ...