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. Android SQLite 加入自定义函数

    SQLite Database 自定义函数实现: //Here's how to create a function that finds the first character of a strin ...

  2. LPC1768外部中断与GPIO中断

    LPC1768的外部中断严格来说只有四个,分别是EINT0,EINT1,EINT2,EINT3,技术手册上有如下说明 控制这四个外部中断靠以下寄存器 这三个寄存器的0 1 2 3位分别代表中断的0 1 ...

  3. Phone APP设计规范/iPad APP设计规范/Android APP设计规范/网页设计规范

    原文链接:http://www.ui001.com/chicun/ ①iPhone的设计尺寸 iPhone界面尺寸: 设备 分辨率 状态栏高度 导航栏高度 标签栏(工具栏)高度 iPhone6 plu ...

  4. Java Web EL JSTL的用法

    1.导入包 fastjson-1.2.2.jar 2.JSP文件加入 <%@ taglib uri="http://java.sun.com/jsp/jstl/core" p ...

  5. IOS中单例NSUserDefaults的使用（转）

    一.了解NSUserDefaults以及它可以直接存储的类型 http://my.oschina.net/u/1245365/blog/294449 NSUserDefaults是一个单例,在整个程序 ...

  6. pku2104

    传送门:http://poj.org/problem?id=2104 题目大意:给定一个长度为N的数组{A[i]},你的任务是解决Q个询问.每次询问在A[l], A[l+1], ...... , A[ ...

  7. begin lydsy 2731

    2731: 最长重复子串 Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 6  Solved: 4[Submit][Status][Web Board] ...

  8. UVa 10427 - Naughty Sleepy Boys

    题目大意:从1开始往后写数字,构成一个如下的字符串 123456789101112... .求第n位的数字是多少. 找规律,按数字的位数可以构建一个类似杨辉三角的东西,求出第n位是哪个数的第几位即可. ...

  9. Twisted源码分析系列01-reactor

    转载自:http://www.jianshu.com/p/26ae331b09b0 简介 Twisted是用Python实现的事件驱动的网络框架. 如果想看教程的话,我觉得写得最好的就是Twisted ...

  10. Rest Project Performace Pressure Test

    首次调整基线和配置修改 机器配置为 CPU: Intel(R) Xeon(R) CPU E5-2630 v2 @ 2.6GHz 24core 内存: 128G JDK Ver: 1.7.0_80 To ...