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. java 计算源码的行数

    import java.io.BufferedReader;import java.io.File;import java.io.FileReader;import java.io.IOExcepti ...

  2. 阿里巴巴Java开发手册评述

    2016年底的时候阿里巴巴公开了其在内部使用的Java编程规范.随后进行了几次版本修订,目前的版本为v1.0.2版.下载地址可以在其官方社区-云栖社区https://yq.aliyun.com/art ...

  3. 【openstack N版】——创建云主机

    一.启动实例 1.1 已准备服务介绍 MySql:为各个服务提供数据存储. RabbitMQ:为各个服务之间通信提供交通枢纽. keystone:为各个服务之间通信提供认证和服务注册. Glance: ...

  4. js中的面向对象入门

    什么是对象 我们先来看高程三中是如何对对象进行定义的 "无序属性的集合,其属性可以包括基本值.对象或者函数",对象是一组没有特定顺序的的值.对象的没个属性或方法都有一个俄名字,每个 ...

  5. Laravel使用Seeder自动填充数据

    要查看代码,可以点击 或者转到链接:https://github.com/laravel/framework Laravel自动填充数据使用的是Seeder类 <?php use Illumin ...

  6. Jemter+Badboy实战经验一（Badboy录制及基础功能）

    1. 使用工具: Apache Jemeter:http://jmeter.apache.org/download_jmeter.cgi (免费官网下载地址) BadBoy:   http://www ...

  7. JAVA： List用法

    1.List中可以添加任何对象,包括自己定义的新的类. class Person{.....}上面定义了一个Person类,下面看好如何使用ListPerson p1=new Person();Per ...

  8. HTML超文本标记语言-基础标签整理

    第一章 <META>标签: <meta http-equiv="Content-Type" Content="text/html;charset=gb2 ...

  9. javascript写贪吃蛇游戏（20行代码！）

    <!doctype html> <html> <body> <canvas id="can" width="400" ...

  10. 使用JSON.parse(),JSON.stringify()实现对对象的深拷贝

    根据不包含引用对象的普通数组深拷贝得到启发,不拷贝引用对象,拷贝一个字符串会新辟一个新的存储地址,这样就切断了引用对象的指针联系. 测试例子: var test={ a:"ss", ...