1、兄弟选择器：同一位置级别，可称为兄弟元素

a、相邻兄弟选择器：next
紧紧跟在【当前元素之后的】(一个)，指定选择器的元素
　　　　　 语法：通过“+”作为结合符
eg: div+p ->紧跟在div后面的p元素

 <!-- demo.html -->

 <html>

     <head>

         <title></title>

     </head>

     <body>

         <p>这是第一个段落</p>

 　　  <div id="d1">这是一个div</div>

 　　  <span>这是一个span</span>

         <p class="p1">这是第二个段落</p>

 　　  <b>Hello World</b>

 　　  <p class="p2">这是第三个段落</p>

     </body>

 </html>

 /*demo.css*/

 div+p{

     background: yellow;

 }

 #d1+p{

     background: red;

 }

 span+.p1{

     background: blue;

 }        　　

b、通用兄弟选择器：next_all
匹配某元素【后面所有】的满足指定选择器的兄弟元素
语法：使用“~”作为结合符
eg：div~p{} ->匹配div后面所有的p

2、属性选择器：使用元素所附带的属性，用于选择器当中，作为选择元素的条件
语法：[属性相关内容]
eg：[id] ->具备id属性的所有元素
p[id] ->具备id属性的p元素
a、[id],p[id]
b、p[id][class] ->既具备id又具备class的p元素
c、p[id="p1"] ->id值为"p1"的p元素
d、p[class~="value"]
e、p[class^="b"] ->匹配class属性值以b开始的p标记
f、p[class*="b"] ->匹配class属性值中包含b的p标记
g、p[class$="b"] ->匹配class属性值以b结尾的p标记

 <!-- demo.html -->　　　　　

  <html>

      <head>

          <title></title>

      </head>

      <body>

         <p class="clear p1 myself">

         这是第四个段落

         </p>

         <div class="userContent">

         文本内容

         </div>

      </body>

 </html>

 /*demo.css*/

 p[class]{

 color: #e4393c;

 }

 p[class~='p1']{

 background-color: #cd2c2d;

 color: #fff;

 }

 div[class ^= "us"]{

 background-color: #bfb;

 }

 div[class$="t"]{

 background-color: #bfb;

 color: #333;

 }

3、伪类选择器
a、目标伪类：突出显示活动的HTML锚点
语法：:target
b、元素状态伪类：多数用在表单元素上
1、:enabled ->匹配每个已启用的元素
2、:disabled ->匹配每个已被禁用的元素
3、:checked ->匹配已被选中的表单元素(只适用于checkbox,radio)
c、结构伪类
1、:first-child ->匹配属于其父元素中的第一个子元素
2、:last-child ->匹配属于其父元素中的最后一个子元素
3、:empty ->匹配没有子元素的元素(文本内容或空格也算作子元素)
4、:only-child ->匹配属于其父元素中的唯一子元素
d、否定伪类：匹配非指定选择器的元素
语法：:not(selector)

 <!-- demo01.html 目标伪类 -->

  <html>

      <head>

          <title></title>

      </head>

      <body>

     <a href="#Tom">猫和老鼠(Tom and Jerry)</a>

     <a href="#Atongmu">铁臂阿童木</a>

     <a href="#BlackCat">黑猫警长</a>

     <br>

     <a name="Tom">第一部：Tom and Jerry</a>

     <p style="height: 500px;">Tom and Jerry</p>

     <div id="Atongmu" style="height: 500px;">我是阿童木</div>

     <div id="BlackCat" style="height: 500px;">I am Mr Black Cat</div>

      </body>

 </html>

 /*demo01.css*/

 a:target,div:target{

     background-color: #bfb;

     font-size: 20pt;

 }
 <!-- demo02.html 结构伪类 -->　　　　　

  <html>

      <head>

          <title></title>

      </head>

      <body>

     <div id="d1"></div>

     <div id="d2">

         <p>This is a p</p>

     </div>

     <div id="d3">

         This id d3

     </div>

     <div id="d4">

         <b>first</b>

         <b>second</b>

         <b>third</b>

         <b>last</b>

     </div>

      </body>

 </html>

 /*demo02.css*/

 div{

     width: 100px;

     height: 100px;

 }

 b{

     display: block;

 }

 div:empty{

     background-color: #bfb;

 }

 p:only-child{

     background-color: #fbf;

 }

 b:first-child{

     font-size: 2em;

     color: #fbb;

 }

 b:last-child{

     font-size: 3em;

     font-weight: normal;

     color: #bbf;

 }
  <!-- demo03.html 伪元素状态伪类 -->

   <html>

       <head>

           <title></title>

       </head>

       <body>

          用户名称：<input type="text"><br>

     用户昵称：<input type="text" disabled value="请输入您的昵称">

     <br>

     性别：<input type="radio" name="rdoGender">男

               <input type="radio" name="rdoGender">女

       </body>

  </html>

  /*demo03.css*/

  input:enabled{

     color: red;

 }

 input:disabled{

     border: 1px solid #f00;

 }

 input[name=rdoGender]:checked{

     background-color: #bfb;

 }
  <!-- demo04.html 否定伪类 -->

   <html>

       <head>

           <title></title>

       </head>

       <body>

          <div>

         用户名称：<input type="text"><br>

         用户密码：<input type="password"><br>

         <input type="submit" value="提交">

         <input type="button" value="按钮">

     </div>

       </body>

  </html>

  /*demo04.css*/

 input:not(:last-child){

     border: 1px solid #f00;

 }

4、伪元素选择器：匹配出来的都是文本内容
a、:first-letter ->匹配首字符
b、:first-line -> 匹配首行
以上两个选择器，行内元素无效，行内块、块级可以
c、::selection ->用于欧赔用户选中的文本样式(火狐貌似不兼容)

  <!-- demo.html 为元素选择器 -->

   <html>

       <head>

           <title></title>

       </head>

       <body>

          <p>

         风风雨雨适合于独行，且手中无伞，不打伞有不打伞的好处。湿是我的湿，冷是我的冷，即便化作雨点般的小，那么小也是我的小。

     </p>

     <span>

         风风雨雨适合于独行，且手中无伞，不打伞有不打伞的好处。湿是我的湿，冷是我的冷，即便化作雨点般的小，那么小也是我的小。

     </span>

       </body>

  </html>

  /*demo.css*/

 p{

     width: 200px;

     border: 1px solid #bfb;

     margin: 10% auto;

     text-indent: 5px;

 }

 span{

     /*float: right;*/

     /*display: inline-block;*/

     position: absolute;

     top: 300px;

     left: 500px;

 }

 p:first-letter{

     font-size: 20pt;

     color: #fbb;

 }

 p:first-line{

     font-style: italic;

 }

 span:first-line{

     font-style: italic;

     background-color: #ffb;

 }

 p::selection{

     background-color: #bbf;

     color: #fbf;

 }

以上就是我在视频中学到的所有内容，若有错误或不足，希望浏览者提出，及时指正。。

今天是我开通博客的第二天，这是我写的第一篇文章，在这里发表完全是当做自己的学习笔记，希望可以记录自己的成长。

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. BZOJ 3402: [Usaco2009 Open]Hide and Seek 捉迷藏(最短路)

    这个= =一看就是最短路了= = PS：最近有点懒 = = 刚才看到一道平衡树的裸题还嫌懒不去写= =算了等刷完这堆水题再去理= = CODE： #include<cstdio>#incl ...

  2. Spring源码解析三：IOC容器的依赖注入

    一般情况下,依赖注入的过程是发生在用户第一次向容器索要Bean是触发的,而触发依赖注入的地方就是BeanFactory的getBean方法. 这里以DefaultListableBeanFactory ...

  3. PDO预处理语句规避SQL注入攻击

    所谓SQL注入式攻击,就是攻击者把SQL命令插入到Web表单的输入域或页面请求的查询字符串,欺骗服务器执行恶意的SQL命令.在某些表单中,用户输入的内容直接用来构造(或者影响)动态SQL命令,或作为存 ...

  4. js实现二级联动下拉列表菜单

    二级联动下拉列表菜单的难点在于对后台返回的数据进行解析,不多逼逼,直接上代码 上图是后台返回的数据 实现代码如下: var deviceNotExist = true;//防止数据重复 if(data ...

  5. i春秋与我

    在i春秋论坛混迹了大半年了,在i春秋的在线平台学到了很多奇技淫巧,特别喜欢这个平台的气氛,以及虚拟在线网络环境的搭建, 忙周偷乐,过来也为i春秋做点小奉献,共同构造我们喜欢的春秋平台,成长特别快,特别 ...

  6. Ubuntu14.04： Error found when loading /root/.profile

    问题描述: 启用root账号登录后系统出现如下提示信息: Error found when loading /root/.profile stdin:is not a tty 解决方法: 在终端中用命 ...

  7. Java面试01|JVM相关

    1.JVM内存查看与分析,编写内存泄露实例 堆区.栈区.方法区.本机内存都有可能内存溢出.在这里编写堆区内存溢出实例.如下(来自<深入理解Java虚拟机>一书. // -Xms20m -X ...

  8. JavaScript学习12 JS中定义对象的几种方式【转】

    avaScript学习12 JS中定义对象的几种方式 转自:  http://www.cnblogs.com/mengdd/p/3697255.html JavaScript中没有类的概念,只有对象. ...

  9. tp框架 ：操作数据库

    操作数据库,进行增删改数据 一.对数据表添加数据(方法:add()) (1)上一篇已经讲过链接数据库了,继续进行对数据库的操作,还是用控制器文件中的HomeController.class文件 看下数 ...

  10. javaScript事件（六）事件类型之滚轮事件

    滚轮事件其实就是一个mousewheel事件,这个事件跟踪鼠标滚轮,类似Mac的触屏版. 一.客户区坐标位置 鼠标事件都是在浏览器视口的特定位置上发生的.这个位置信息保存在事件对象的clientX和c ...