先来做一下准备工作

页面的效果：

看到上面的框框了吗？我们就是通过给这些框框添加背景色的方式，来让大家，了解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. mybatis 丢失字段

    实体上,如果没写get,记得加上 @Data

  2. mysql高效导入导出load data [infile][outfile]用法

    一.MySQL高效导入数据的方法load data infile load data infile语句从一个文本文件中以很高的速度读入一个表中.使用这个命令之前,mysqld进程(服务)必须已经在运行 ...

  3. vue on emit 父子之间传值应用详细代码

    大概很多人都知道用这个,网上教程也一大堆,但我想说的是一定要手动敲一遍,敲一遍,敲一遍,重要的事情说三遍. 大概有些人也不知道它该何时用on,或者emit 的吧? 先说两个我项目中用到的场景吧: 项目 ...

  4. python--包的导入

    1,包 定义:把解决一类问题的模块放在同一个文件夹里 导入语法:在import    from...import导入语句中(而不是在使用时)遇到带点的 本质:就是一个包含__init__.py文件的目 ...

  5. Web开发常规调试方法与常见问题分析

    一.Web项目基本原理 现在的web项目大都已经前后端独立开发与部署. 前后端独立开发,一般是前端与后端通过web接口(常见的有RESTful与websocket)文档进行交流.前端开发人员先更具业务 ...

  6. 2018-2-13-win10-UWP-动画

    title author date CreateTime categories win10 UWP 动画 lindexi 2018-2-13 17:23:3 +0800 2018-2-13 17:23 ...

  7. lsm和lkm模块

    使用LSM Hook框架进行内核安全审计.元数据捕获,安全人员只需要按照既定的调用规范编写LKM模块,并加载进Linux内核,而不需要对system call lookup表进行任何修改 https: ...

  8. Linux操作系统 和 Windows操作系统 的区别

    针对这两个操作系统,下面是几点区别. 1.免费与收费 在中国, windows 和 linux 都是免费的,至少对个人用户是如此,如果哪天国内windows真的严打盗版了,那linux的春天就到了!但 ...

  9. Java new和getInstance

    下面是一个例子,为什么要把这个类实例化?有什么好处? //实例化 public static DBConnect instance; public static DBConnect getInstan ...

  10. react使用阿里爸爸的iconfont时，不展示的问题

    选择使用Unicode时: 正常使用如下,显示也是正常: <i className="iconfont"></i> 使用map去循环时,需将原本的,改成 ...