CSS3中添加了一些新的选择器 与之前的不同 这些选择器有些类似于jquery的选择器 能够让我们更高的操作DOM 废话不多说

为了更直观的了解 我们以这段为实例 来进行操作

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

     <ul>

         <li>第一个测试标题</li>

         <li>第二个测试标题</li>

         <li>第三个测试标题</li>

         <li>第四个测试标题</li>

         <li>第五个测试标题</li>

     </ul>

 </body>

 </html>

:nth-of-type(n)  选择属于其父元素第n个元素的每个元素。

和这个类似的是 :first-of-type和:last-of-type 分别是选择第一个元素和最后一个元素

DEMO:

<style>

        li:nth-of-type(3){   /*选择第3个li元素*/

            background-color: #00b3ee;

        }

        li:first-of-type{   /*选择第一个li元素*/

            background-color: #ee1200;

        }

        li:last-of-type{    /*选择最后一个li元素*/

            background-color: #00ee0f;

        }
</style>

:before 在元素内容前面添加内容

:after 在元素内容后面添加内容

这两个元素类似于:hover 但是他们不是鼠标悬浮 而是利用content属性添加内容

需要注意的是 用css添加的内容不能被选中 也不能被js获取 显示成 这些内容属于css样式类型的

DEMO:

        li:before{

            content: '在前面添加内容 ';

        }

        li:after{

            content: ' 在后面添加的内容';

        }

:focus 这个也类似于我们常用的:hover 用来动态选择获取焦点的元素

DEMO:别如获取焦点的input框改变背景颜色

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        input:focus{

            background-color: #00b3ee;

        }

    </style>

</head>

<body>

    输入框1：<input type="text"><br>

    输入框2：<input type="text">

</body>

</html>

:nth-child(n) 选取每个父元素的第n个子元素

:nth-last-child(n) 选取每个父元素从后向前数的第n个元素

:last-child 选择每个父元素的最后一个子元素

注意 这个选择器慎用  因为选择面太大 不好控制

DEMO:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        :not(p){

            border:solid red 1px;

        }

    </style>

</head>

<body>

    <div>

        <p>我是P元素</p>

        <p>我是P元素</p>

        <p>我是P元素</p>

        <span>我不是p元素 我是span元素</span>

        <p>我是P元素</p>

    </div>

</body>

</html>

CSS3高级选择器的更多相关文章

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

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

  2. css3的那些高级选择器一

    css大家都不陌生了,从1996年12月css1正式推出,经历了1998年5月css2,再到2004年2月css2.1,最后一直到2010年推出的css3.css的推出给web带来巨大 的改变,使我们 ...

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

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

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

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

  5. day40 css高级选择器

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

  6. CSS系列：CSS3新增选择器

    1. CSS1定义的选择器 选择器 类型 说明 E 类型选择器 选择指定类型的元素 E#id ID选择器 选择匹配E的元素,且匹配元素的id为“id”,E选择符可以省略. E.class 类选择器 选 ...

  7. CSS3常用选择器（三）

    在CSS3的选择器中,除了结构性伪类选择器外,还有一种UI元素状态伪类选择器.这些选择器的共同特征: 指定的样式只有当元素处于某种状态时才起作用,在默认状态下不起作用. 1.hover.focus.a ...

  8. CSS3 ::selection选择器

    一.介绍 之前看到有些网站选中内容的颜色和背景色都不是平时看到的蓝色和白色.今天有兴趣查看了一下,原来是一个很简单的CSS3的选择器::selection的用法. 上例子: <style> ...

  9. JQuery_高级选择器

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

随机推荐

  1. tp框架实现ajax注册验证

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. Codeforces 242E：XOR on Segment（位上的线段树）

    http://codeforces.com/problemset/problem/242/E 题意:给出初始n个数,还有m个操作,操作一种是区间求和,一种是区间xor x. 思路:昨天比赛出的一道类似 ...

  3. HTML CSS基础（三）

    3种列表:有序列表.无序列表和定义列表 表1 3种列表记忆 标签 语义 说明 ol ordered list 有序列表 ul unordered list 无序列表 dl definition lis ...

  4. Zookeeper的基本概念

    Reference:  http://mp.weixin.qq.com/s?src=3&timestamp=1477979201&ver=1&signature=bBZqNrN ...

  5. 测试部署环境用到的主要linux命令

    1 部署前检查开发是否上传部署文档 2 在测试组中告知大家 3 将上一版本进行备份(cp -r neiguan-tomcat/ /home/personal/backup/neiguan-tomcat ...

  6. QGis（三）查询矢量图层的要素属性字段值（转载）

    QGis(三)查询矢量图层的要素属性字段值 https://github.com/gwaldron/osgearth/issues/489 当加载一个矢量图层后,如果要查看要素的属性字段值,则需要实现 ...

  7. Subpub 订阅/发布

    var Pubsub = (function (window) { window.handlers = {}; var o = { pub: function () { var args = Arra ...

  8. Vim 第一天

    记得第一次接触vi编辑器,好像是在海尔的机房吧,那是时候还是没有毕业的小菜鸟一只(PS:现在也是菜鸟),记得是测试一个云存储的产品.看着他们用vi编辑器,当时也没有感觉有什么(现在也没感觉……),只是 ...

  9. javascript设计模式之解释器模式详解

    http://www.jb51.net/article/50680.htm 神马是“解释器模式”? 先翻开<GOF>看看Definition:给定一个语言,定义它的文法的一种表示,并定义一 ...

  10. Bootstrap入门（五）表单

    Bootstrap入门(五)表单   先引入本地的CSS文件  <link href="css/bootstrap.min.css" rel="stylesheet ...