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. python遍历字典元素

    a={'a':{'b':{'c':{'d':'e'}},'f':'g'},'h':'i'} def show(myMap): for str in myMap.keys(): secondDict=m ...

  2. ue4中窗口打开web地址

    首先打开项目,设置,widgets,启用webbroswer 新建一个蓝图, 在控件栏里就可以找到添加webbroswer 设置initial url就可以打开网页了, 项目中还用到获取界面参数,与界 ...

  3. BZOJ 1653 [Usaco2006 Feb]Backward Digit Sums ——搜索

    [题目分析] 劳逸结合好了. 杨辉三角+暴搜. [代码] #include <cstdio> #include <cstring> #include <cmath> ...

  4. HDU1429 bfs

    胜利大逃亡(续) Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Su ...

  5. sql语句：创建事物

    BEGIN TRAN Tran_Money --开始事务 DECLARE @tran_error int; ; BEGIN TRY WHERE Name = '刘备'; SET @tran_error ...

  6. UVa 10360 - Rat Attack

    题目大意:有一个1025*1025的矩阵,每个矩阵元素保存这个点上老鼠的数量.现有一种气体炸弹,能覆盖“半径”为d的矩形,在这个范围内可以消灭所有的老鼠,让你找出合适的放置炸弹的位置使的消灭的老鼠数量 ...

  7. java--面向对象编程

    instanceof的用法 静态绑定,即早期绑定,首先找父类 动态绑定,即运行时绑定,new谁找谁 Object o1 = null; //正确的语法,null也是一种特殊的引用数据类型 object ...

  8. 上传文件到linux服务器

    可以在SecureCRT下上传 先用使用命令下载一个文件:yum install lrzsz -y 然后在跳转到要保存的目录 最后,拖拽文件到secureCRT中即可

  9. LVS 负载均衡解决方案 (windows IIS)

    LVS 负载均衡解决方案 因为我们的产品运行的主流平台是WINDOWS+IIS+SQLSERVER(2000以上版本),而LVS+KEEPALIVED是LINUX下的四层负载均衡软件.其有如下特点: ...

  10. VMware虚拟机与宿主无法复制的解决办法

    由于工作需要,上网机器使用虚拟机,因此需要经常来回的拷贝文件,而vmware从6.5一直走来到10.0.1,总是有一个问题很让人苦恼---共享粘贴板总是会无故失效.经常实验,发现可以经过以下方法临时解 ...