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. iOS给model排序

    今天有朋友问我怎么给Model排序,我顺便写了一个例子, 以下是代码,很简洁可以直接用. Person *per = [[Person alloc] init]; per.name = @" ...

  2. TimeDelta.total_seconds() in Python2.6-

    Python 的日期操作真是无力吐槽. 如果在做日期相加减时使用TimeDelta对象,2.7及以后的TimeDelta有total_seconds()方法获取总秒数,而2.6之前没有该方法,且众所周 ...

  3. bzoj1176: [Balkan2007]Mokia【cdq分治】

    把询问搞成4个,cdq分治. #include <bits/stdc++.h> #define rep(i, a, b) for (int i = a;i <= b; i++) #d ...

  4. IOS开发之IOS8.0最新UIAlertController

    最近苹果更新的IOS8 对以前进行了很大的修改, 更新的API也让人捉急,据说iOS 8的新特性之一就是让接口更有适应性.更灵活,因此许多视图控制器的实现方式发生了巨大的变化.比如全新的UIPrese ...

  5. ERROR 1044 (42000): Access denied for user ''@'localhost' to database 'mysql'

    提示:ERROR 1044 (42000): Access denied for user ''@'localhost' to database 'mysql'.前两天也出现过这个问题,网上找了一个比 ...

  6. StackExchange.Redis 官方文档(三) Events

    事件 ConnectionMultiplexer类型提供了很多可以用来了解表面状态下正在发生着什么的事件.这对日志是很有用的. ConfigurationChanged - ConnectionMul ...

  7. GP项目总结（一）

    1.使用activity渲染不同的View时,两种方法: (1.)自定义两个不同的View,然后在mainActivity里根据不同的数据使用不同的View,通过addView()来Activity里 ...

  8. eclipse-ee修改字体大小和配置Tomcat服务器

    参考博客:http://blog.csdn.net/lpftobetheone/article/details/17783791 一.EclipseEE背景色和字体的修改 1.Eclipse背景颜色修 ...

  9. SQL SERVER 2000 数据恢复（分离数据库+附加数据库）

    一.分离数据库     SQL Server 2000允许分离数据库的数据和事务日志文件,然后将其重新附加到同一台或另一台服务器上.分离数据库将从SQL Server 删除数据库,所以当点击“分离数据 ...

  10. Mysql 多列形成主键（复合主键 ）

    什么是数据表的复合主键 所谓的复合主键 就是指你表的主键含有一个以上的字段组成 比如 create table test (    name varchar(19),    id number,    ...