先来做一下准备工作

页面的效果：

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

    jenkins-client 实现方式 jenkins-client 底层是使用 HttpClient HttpPost 发送post 请求实现的,是将 REST API 封装了一下 添加依赖 < ...

  2. Java各版本的含义

    JavaSE(Java Standard Edition):标准版,定位在个人计算机上的应用.这个版本是Java平台的核心,它提供了非常丰富的API来开发一般个人计算机上的应用程序,包括用户界面接口A ...

  3. Oracle中NEXTVAL 和 CURRVAL的使用

    能够通过在 SQL 语句中使用 NEXTVAL 或 CURRVAL 运算符来訪问序列的值.必须用以 sequence.NEXTVAL 或sequence.CURRVAL 格式驻留在同一个数据库中的序列 ...

  4. swagger使用详解

    1:认识Swagger Swagger 是一个规范和完整的框架,用于生成.描述.调用和可视化 RESTful 风格的 Web 服务.总体目标是使客户端和文件系统作为服务器以同样的速度来更新.文件的方法 ...

  5. 原型对象（JS中的父类）

    原型 prototype 我们所创建的每一个函数,解析器都会向函数中添加 一个属性prototype ,这个属性对应的对象就是我们所谓的原型对象  判断函数中是否含有prototype属性,有则返回 ...

  6. CyberArk

    CyberArk PIM 套件由5个部分组成: · CyberArk EPV (Enterprise Password Vault)– 企业密码保险库 基于CyberArk 专利的Vault技术,为企 ...

  7. webpack4.0高级

    环境变量 webpack --env.NODE_ENV=local --env.production --progress Tree Shaking 移除JS上下文字未被引用的代码 只支持ES6的im ...

  8. Mybatis枚举转换

    自定义mybatis枚举转换,原理是如果用户没有定义自己的枚举转换工具,mybatis在解析枚举类时会自动获取mybatis的BaseTypeHandler,来转换枚举类,我们只需要重写这个枚举转换器 ...

  9. MaxCompute表设计最佳实践

    MaxCompute表设计最佳实践 产生大量小文件的操作 MaxCompute表的小文件会影响存储和计算性能,因此我们先介绍下什么样的操作会产生大量小文件,从 而在做表设计的时候考虑避开此类操作. 使 ...

  10. QString与string的相互转换【转载】

    文章转载自https://blog.csdn.net/qq_33485434/article/details/80680506 1.QString转换String string s = qstr.to ...