先来做一下准备工作

页面的效果：

看到上面的框框了吗？我们就是通过给这些框框添加背景色的方式，来让大家，了解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. [资料]C#操作SQL Server数据库

    1.概述 ado.net提供了丰富的数据库操作,这些操作可以分为三个步骤: 第一,使用SqlConnection对象连接数据库: 第二,建立SqlCommand对象,负责SQL语句的执行和存储过程的调 ...

  2. Windows的安全模型

    1. 安全身份 Windows的安全模型是以用户为线索的,用户的身份是在登录系统时验证的. 除了用户外,还可以有一些特殊实体需要拥有安全的身份,以便进行验证,比如groups, domain等等. W ...

  3. Linux用户空间内存区域的匿名映射

    1 在调用mmap系统调用时,可以指定的标志(flag)参数: 1: #define MAP_SHARED 0x01 /* Share changes */ 2: #define MAP_PRIVAT ...

  4. cm 安装cdh 后添加hive服务

    cm 安装cdh 后添加hive服务,出现错误提示 添加服务时候hive 配置如下: 错误信息提示: 错误日志: xec /opt/cloudera/parcels/CDH-5.4.7-1.cdh5. ...

  5. 用户态和内核态&操作系统

    用户态和内核态 内核态:cpu可以访问内存的所有数据,包括外围设备,例如硬盘,网卡,cpu也可以将自己从一个程序切换到另一个程序. 用户态:只能受限的访问内存,且不允许访问外围设备,占用cpu的能力被 ...

  6. 在vue中使用高德地图开发，以及AMap的引入？

    百度引入BMap ,一个import 即可,可AMap 却报AMap is not difined ? 1.首先在 externals: { "BMap": "BMap& ...

  7. dubbo源码学习(四)：暴露服务的过程

    dubbo采用的nio异步的通信,通信协议默认为 netty,当然也可以选择 mina,grizzy.在服务端(provider)在启动时主要是开启netty监听,在zookeeper上注册服务节点, ...

  8. web APP 开发之踩坑手记

    屏蔽输入框怪异的内阴影 -webkit-appearance:none 禁止自动识别电话和邮箱 <meta content="telephone=no" name=" ...

  9. 在windows server 2012中安装完oracle 11 client如何使用

    1.首先要添加监听配置,这样才可以没有报错的连接上服务器,至于如何添加,请自行搜索. 2.打开SQL  Plus连接oracle server端,这里因为是小白,看到命令行界面上来就需要输入用户名密码 ...

  10. zmq利用protobuf通信

    protobuf序列化之后为二进制数据,数据中可能包含 ‘\0’,直接转换为char *类型会导致发送数据不完整.解决方法: void buildProtobufMsg(const string&am ...