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. 常用php时间函数用法汇总

    1.设置时区的方法: php5后都要自己设置时区,要么修改php.ini的设置,要么在代码里修改. 在PHP.INI中设置时区 date.timezone = PRC 在代码中设置时区 1 date_ ...

  2. Kosaraju算法解析: 求解图的强连通分量

    Kosaraju算法解析: 求解图的强连通分量 欢迎探讨,如有错误敬请指正 如需转载,请注明出处 http://www.cnblogs.com/nullzx/ 1. 定义 连通分量:在无向图中,即为连 ...

  3. C# 控制台倒计时

    年前经常聊天的大佬群里有人写了窗体的倒计时来计算下班时间和放假时间:) 简直就是在嘲讽我这种没有工作的人,哈哈哈 窗体的倒计时相当的没有技术含量,主要是不够炫酷,不能够体现我们程序员的身份. 那什么才 ...

  4. noi 1.8 11图像旋转

    水题不解释 其实我偷懒了 直接输出,,,,,,, 个人QQ:757394026团队QQ:466373640个人博客:www.doubleq.winc++/noi/信息学奥数博客:http://www. ...

  5. Java和C++的对比

    事实上, Java 本来就是从 C++衍生出来的. C++和 Java 之间仍存在一些显著的差异.可以这样说,这些差异代表着技术的极大进步.一旦我们弄清楚了这些差异,就会理解为什么说 Java 是一种 ...

  6. tomcat 假死

    1.1 编写目的 为了方便大家以后发现进程假死的时候能够正常的分析并且第一时间保留现场快照.1.2编写背景最近服务器发现tomcat的应用会偶尔出现无法访问的情况.经过一段时间的观察最近又发现有台to ...

  7. VUE2.0实现购物车和地址选配功能学习第七节

    第七节 卡片选中,设置默认 1.卡片选中html:<li v-for="(item,index) in filterAddress" v-bind:class="{ ...

  8. 【Scala】Scala之Object

    一.前言 前面学习了Scala的Methods,接着学习Scala中的Object 二.Object Object在Scala有两种含义,在Java中,其代表一个类的实例,而在Scala中,其还是一个 ...

  9. 在.NET项目中使用PostSharp，使用MemoryCache实现缓存的处理(转）

    在之前一篇随笔<在.NET项目中使用PostSharp,实现AOP面向切面编程处理>介绍了PostSharp框架的使用,试用PostSharp能给我带来很多便利和优势,减少代码冗余,提高可 ...

  10. yii2的变量是如何注入到视图中去的？

    我对yii2的控制器中的变量如何渲染到视图中这个问题一直很好奇,另外,我还对yii2如何加载静态资源,如js和css比较好奇,于是趁着周末就看了下yii2的相关源码想把这两个问题都弄明白.变量如何渲染 ...