先来做一下准备工作

页面的效果：

看到上面的框框了吗？我们就是通过给这些框框添加背景色的方式，来让大家，了解css3的选择器的效果，下面正式开始：

关联选择器

E1~E2

选择 E1 后面的兄弟 E2。

页面效果：

选择除了第一个 p 元素之外，后面所有的 p 元素，即使中间隔着一个 div 标签，也能被选中，背景色变成蓝色。

属性选择器新增

[^=" " ] 选中以...开头的元素

[$=" " ] 选中以...结束的元素

[*=" " ] 包含...都元素都被选中

定义三个 p 标签，这个样式就是以 test 开头的 p 标签变成绿色，以 test 结尾的 p 标签变成黄色。

效果：

最后演示的就是包含，伙伴们使用的时候要注意，如果把这个选择器放在最下面那么，那么所有的三个标签都会被覆盖了之前的颜色，变成蓝色。放在最上面的话，也是同理，后面的样式会覆盖之前的样式。

伪类新增

first-of-type

选择到 p，p 必须为其父级所有子元素为 p 的第一个 p 元素。

选择了，div 标签中的 第一个 p 元素。

p:last-of-type

选择到 p，p 必须为其父级所有子元素为 p 的最后一个 p 元素。

p:only-of-type

选择到 p，p 必须为其父级所有子元素为 p 的唯一一个 p 元素。

在上面的 div 中只有一个 p 元素，现在我们使用这个 only-of-type 看一下效果。

记住必须是唯一的一个哦，要是有两个的话，就选不中了。

p:nth-of-type(n)

选择到 p, p 必须为其父级所有子元素为 p 的第 n 个 p 元素。

p:nth-last-of-type(n)

选择到 p, p 必须为父级所有子元素为 p 的 d 倒数第 n 个 p 元素。

下面是没有 of 的

p:only-child

选择 p,p 必须为其父级的唯一一个子元素。

效果：

p:last-child

选择 p,p 必须为他们父元素的最后一个子元素。

效果：

p:nth-child(n)

选择 p,p 必须为其父级的第 n 个子元素。

p:nth-last-child(n)

选择 p,p 必须为其父级的倒数第 n 个子元素。

效果：

这其中框住的这条背景颜色，没有成功，因为第二个元素不是 div 是 p，在使用的时候要注意，元素的类型，和位置一定要准确。

p:target

选择到 p，被锚点激活的 p

效果：

p::selection

被用户选中的 p

效果：

不用怀疑的确是两个冒号

上代码

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="Keywords" content="关键字,关键词"> <meta name="Description" content="描述和简介"> <title>Title</title> <style type="text/css"> *{margin:0;padding:0;} body,ul,li,ol,dl,dd,p,h1,h2,h3,h4,h5,h6{ margin:0;} a{text-decoration:none;color: inherit;} img{display: block;border:none;} ol,ul{list-style:none;} .clearfix:after content: "";display: block;clear:both;} .main{ width: 1200px; margin: 100px auto; } .main div{ width: 200px; margin: auto; box-shadow: 0 0 10px 0 #000; } .main div p,.main div div { width: 100px; height: 100px; margin: 10px auto; text-align: center; font: bold 30px/100px ""; color:#fff; box-shadow: 0 0 10px 0 #000; } .box1 p~p{ background: blue; } .box2 p[class*="test"]{ background: blue;} .box2 p[class^="test"]{ background: green;} .box2 p[class$="test"]{ background: yellow;} /*.box3 p:first-of-type{ background: purple;}*/ .box3 p:last-of-type{ background: purple;} .box4 p:only-of-type{ background: blue;} /*.box5 p:nth-of-type(2){ background: orangered;}*/ .box5 p:nth-last-of-type(2){ background: red;} .box6 p:only-child{ background: deeppink;} .box7 p:last-child{ background: green;} .box8 p:nth-child(3){ background: yellow;} .box8 div:nth-child(4){ background: blue;} .box8 div:nth-child(2){ background: red;} .box8 div:nth-last-child(4){ background: deeppink;} .box9 p:target{ background: blue;} .box10 span::selection{ background: deeppink; color:#fff;} </style></head><body> <div class="main"> <div class="box1"> <p></p> <p></p> <p></p> <div></div> <p></p> </div> <div class="box2"> <p class="testt"></p> <p class="ttest"></p> <p class="ttestt"></p> </div> <div class="box3"> <div></div> <p>1</p> <p>2</p> <p>3</p> </div> <div class="box4"> <div></div> <p></p> </div> <div class="box5"> <div></div> <p>1</p> <p>2</p> <div></div> </div> <div class="box6"> <p></p> </div> <div class="box7"> <div></div> <p>1</p> <p>2</p> </div> <div class="box8"> <div></div> <p>1</p> <p>2</p> <div></div> </div> <div class="box9"> <a href="#tar1">点我~点我~</a> <p id="tar1"></p> <a href="#tar2">点我~点我~</a> <p id="tar2"></p> </div> <div class="box10"> <span>我是娜娜，一个小仙女~</span> </div> </div></body></html>

css3的选择器的更多相关文章

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

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

  2. CSS3常用选择器（三）

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

  3. CSS3 ::selection选择器

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

  4. CSS3属性选择器与(:not)选择器

    一:css3属性选择器: img[alt]{ border:2px dashed #000; } 这个选择器会匹配页面标签中任何一个含有alt属性的图片标签.   还可以通过设定属性值来缩小匹配范围: ...

  5. 【前端开发系列】—— CSS3属性选择器总结

    想想自己为什么要学CSS,作为一个开发过前端的人员来说,调试一个图片花了半天的时间,最后发现分隔符用错了,实在是一件很丢人的事情.因此,痛下决心来学习CSS,最近一周也会更新下相关的学习笔记. CSS ...

  6. CSS3之选择器

    总结了下CSS3新增的一些选择器. CSS3的选择器有基本选择器.属性选择器.伪类选择器几类. CSS3选择器 选择器 举例 例子描述 element1~element2 p~a 选择前面有 < ...

  7. CSS3 :nth-child() 选择器

    CSS3 :nth-child() 选择器 代码: <!DOCTYPE html> <html> <head> <style> p:nth-child( ...

  8. css3属性选择器总结

    前两节介绍了css3属性选择器与css2属性选择器中: 包含字符串和以字符串选择器开头的选择器的比较. 全部属性选择器: 包含字符串讲解对比实例讲解链接: http://www.cnblogs.com ...

  9. CSS3选择器02—CSS3部分选择器

    该部分主要为CSS3新增的选择器 接上一篇 CSS(CSS3)选择器(1) 一.通用兄弟选择器: 24:E ~ F,匹配任何E元素之后的同级F元素. div ~ p{ background-color ...

  10. 笔记：css3伪选择器改变滚动条样式

    现在我打开支持前缀-webkit-的浏览器,也就是说只要支持前缀为-webkit-的浏览器才有效果 <!doctype html> <html lang="en" ...

随机推荐

  1. svn启动服务

    bin目录添加到环境变量classpathsvn --version 查看版本svnadmin create D:\\xx 创建本地中央仓库启动svn服务 cmd命令 svnserve -d -r D ...

  2. Linux源码与编译出的目标文件汇编代码的一致性问题

    start_kernel是内核启动时比较重要的一个函数,然而我发现一个问题,我编译出来的目标文件中的汇编代码与C源码并不完全对应,这是怎么一回事呢? asmlinkage void __init st ...

  3. 分析无法进入Linux系统的原因

    上文:http://www.cnblogs.com/long123king/p/3549701.html 1: static int __init kernel_init(void * unused) ...

  4. 天道神诀---FTP服务

    FTP 2种模式 主动模式(默认) 客户端以1024-65535之间某一端口发送指令到服务端的21端口,并建立连接.服务端接受到以后,以20端口去连接客户端,建立一条新的链接并传输数据 被动模式 客户 ...

  5. Unity3D中动态创建编辑轴（点，线，圆，圆锥）

    问题分析: 最近在搞软件底层开发,将一些工具或者底层脚本打成dll导入unity使用,有这样一需求,就是编辑功能,需要像Scene场景一样,实现那种编辑轴 实现方式: 创建Mesh,构建编辑轴,这个地 ...

  6. nodejs jade 模板 引擎的使用方法

    1.新建项目 2.使用模板引擎 app.set('view engine','jade'); 3.使用render渲染一个视图 res.render(用于指定需要被渲染的视图(必选),本地变量(可选) ...

  7. Vue开发实战

    递归组件 关键是组件在模板内能调用自身,关键是name属性 首先我们先定义数据格式 list: [ { title: '标题1' }, { title: '标题2', children: [ { ti ...

  8. 【JZOJ3918】蛋糕

    description 今天是Bessie的生日,他买了一个蛋糕和朋友们一起分享,蛋糕可以看成是一个R行C列的表格,共有R*C个格子,每个格子都有一个0至9的数字,表示该格子蛋糕拥有的巧克力.现在Be ...

  9. 前端必备，十大热门的 JavaScript 框架和库

    JavaScript 框架和库可以说是开源项目中最庞大也是最累的类目了,目前在github 上这一类的项目是最多的,并且几乎每隔一段时间就会出现一个新的项目席卷网络社区,虽然这样推动了创新的发展,但不 ...

  10. windows 登陆服务器

    点击电脑的左下方开始,然后输入远字,如下图,就可以招到远程桌面了. 点击远程桌面就进入下图界面了.默认情况下,是在常规这个选项卡. 我们切换到显示,可以调节远程桌面的大小,一般我们设置成全屏显示.只要 ...