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 3412: [Usaco2009 Dec]Music Notes乐谱（离线处理）

    这道题貌似怎么写都可以吧= =，我先读入询问然后从小到大处理就行了= = PS：水水题真的好！无！聊！但是好！欢！乐！ CODE： #include<cstdio>#include< ...

  2. JS排序算法

    1.冒泡排序 冒泡算法是比较相邻的两项,如果前者比后者大,就交换他们. 假设一共有n项,那么一共需要n-1趟,第一趟需要交换n-1次,但是第一趟结束后,最后一项基本确定就是最大项了,所以第二次需要交换 ...

  3. MySQL学习分享--数值类型

    数值类型 MySQL的数值类型包括整数类型.浮点数类型.定点数类型.位类型. 整数类型 MySQL支持的整数类型有tinyint.smallint.mediumint.int.bigint(范围从小到 ...

  4. 简单却又复杂的FizzBuzz面试编程问题

    写这篇文章主要是因为偶然看到一篇关于stackoverflow公司的面经中提到了一个有趣的面试编程问题,如题所述:FizzBuzz问题.原文引用如下: “在一些公平的考验之后,我发现那些因为代码而抓狂 ...

  5. Java对象序列化的使用和定制

    序列化的概念及使用场合 序列化就是把对象转化为字节序列并持久化保存,可以保存在内存中.磁盘文件系统,甚至通过网络传递,并能够在以后将这个字节序列完全恢复为原来的对象. 对象序列化的概念引入Java是为 ...

  6. React组件开发（二）表达式

    var obj = { name:"xiaoming", age:"18" } var Hello= React.createClass({ render:fu ...

  7. Java面试01|JVM相关

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

  8. （0）写给Web初学者的教案-----Web基础

    0,Web基础 一.    What is the Web? Can It Eat? 很多同学可能都听说过一个名词叫做“Web”,这个词隐隐约约好像和我们上网相关.但是呢,又很难说的清楚.我们今天每位 ...

  9. 1619: [Usaco2008 Nov]Guarding the Farm 保卫牧场

    1619: [Usaco2008 Nov]Guarding the Farm 保卫牧场 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 498  Solve ...

  10. 搭建ftp服务器实现文件共享

    FTP服务器(File Transfer Protocol Server)是在互联网上提供文件存储和访问服务的计算机,它们依照FTP协议提供服务. FTP(File Transfer Protocol ...