CSS3选择器

标签选择器

标签选择器也称元素选择器、类型选择器，它直接使用元素的标签名当做选择器，将选择页面上所有该种标签

 span {
  color: red; 
 }
 b { 
 color: green; 
 }

标签选择器将选择页面上所有该种标签，无论这个标签所处位置的深浅

 <p>我们一定<span>不负韶华，只争朝夕</span></p>------------------>会被选择
 <ul>
  <li>小明</li> 
  <li>小红</li> 
  <li><span>小强</span></li>------------------>会被选择
 </ul>

标签选择器的常见作用-标签选择器“覆盖面”非常大，所以通常用于标签的初始化

 ul {
  /* 去掉无序列表的小圆点 */
  list-style: none; 
 }
 a { 
  /* 去掉超级链接的下划线 */
  text-decoration: none;
 }

id选择器

认识id属性

• 标签可以有id属性，是这个标签的唯一标识

   <p id="para1">我是一个段落</p>

  
  

• id的名称只能由\textcolor{red}{字母、数字、下划线、短横构成}，且不能以数字开头，字母区分大小写，但习惯上一般为小写字母

• 同一个页面上不能有相同id的标签

CSS选择器可以使用井号#前缀，选择指定id的标签

 #para1 { 
  color: red; 
 }

class选择器

class类名

• class属性表示“类名”

   <p class="warning">我是段落</p>

  
  

• 类名的命名规范和id的命名规范相同

• 多个标签可以为相同类名

   <p class="warning">我是段落</p>
   <p class="warning">我是段落</p>
   <ul>
    <li>我是列表项</li> 
    <li class="warning">我是列表项</li>
    <li>我是列表项</li> 
    <li class="warning">我是列表项</li>
   </ul>

  
  

• 同一个标签可以同时属于多个类，类名用空格隔开

    /* 同时属于两个类 */
   <p class="warning spec">我是段落</p>

class选择器

使用点.前缀选择指定class的标签

 .warning { 
  color: red; 
 }

原子类

在做网页项目前，可以将所有的常用字号、文字颜色、行高、外边距、内边距等都设置为单独的类

 .fs12 {
  font-size: 12px; 
 }
 .fs14 {
  font-size: 14px;
 }
 .fs16 { font-size: 16px; 
 }
 .color-red { 
  color: red; 
 }
 .color-blue {
  color: blue; 
 }
 .color-green {
  color: green;
 }

HTML标签就可以“按需选择”它的类名了，这样可以非常快速的添加一些常见样式

 <p class="fs18 color-green">我是一个文字</p>

复合选择器

后代选择器

• CSS选择器中，使用空格表示“后代”

   /* 选择类名为box的标签 后代的p标签*/
   .box p { 
    color: red; 
   }
   
   
   <div class="box"> 
    <p>我是盒子中的段落</p> /* 将被选择*/
    <p>我是盒子中的段落</p> /* 将被选择*/
   </div> 
   <p>我是段落</p> 
   <p>我是段落</p>

  
  

• “后代”并不一定是“儿子”

   /* 选择类名为box的标签 后代的p标签*/
   .box p { 
    color: red; 
   }
   
   
   <div class="box"> 
    <ul>
     <li><p>我是盒子中的段落</p></li>/* 将被选择*/
           <li><p>我是盒子中的段落</p></li>/* 将被选择*/
    </ul>
   </div> 
   <p>我是段落</p> 
   <p>我是段落</p>

  
  

• 后代选择器可以有很多空格，隔开好几代

   .box ul li .spec em {
    color: red; }
    
   <div class="box"> 
    <ul>
     <li>
      <p class="spec">我是段落<em>强调文字</em></p>
     </li>
    </ul> 
   </div>

交集选择器

选择有.spec类的h3标签，此时应该使用交集选择器

 h3.spec {
  font-style: italic; 
 }

并集选择器

并集选择器也叫作分组选择器，逗号表示分组

 ul, ol { 
  list-style: none;
 }

选择器可以任何搭配、结合，从而形成复合选择器，我们必须要能一目了然的看出选择器代表的含义

伪类

LVHA伪类

伪类是添加到选择器的描述性词语，指定要选择的元素的特殊状态，超级链接拥有4个特殊状态

爱恨准则

a标签的伪类书写，要按照“爱恨准则”的顺序，否则会有伪类不生效

首先伪类的特殊性（应用优先级）是同样的，所以后出现的伪类会覆盖先出现的伪类（同时激活） lvha 规则是由于CSS特殊性导致，css特殊性有一个按顺序的规则（同一条css规则，后出现会覆盖前面的同样规则）  在这里，比如把hover放在active后面，那么实际你在激活（active）链接的时候就触发了hover伪类，hover在后面覆盖了active的颜色，所以始终无法看到active的颜色.如果把visited放在hover的后面，那么已经访问过的链接始终触发visited伪类，根据第一条会覆盖hover里面的颜色。其实 link visited 这两个伪类，并不需要顺序关系。（他们两的位置可以交换）

CSS3新增伪类

元素关系选择器

子选择器

• 当使用 > 符号分隔两个元素时，它只会匹配那些作为第一个元素的直接后代元素，即两个标签为父子关系

• 后代选择器不一定限制是子元素

• 子选择器从IE7开始兼容

 .box>p { 
  color: red; 
 }
 
 
 <div class="box"> 
  <p>我是段落</p> /* 将被选择*/
  <p>我是段落</p> /* 将被选择*/
  <div>
   <p>我是段落</p> 
   <p>我是段落</p> 
  </div>
 </div>
 <p>我是段落</p> 
 <p>我是段落</p>

相邻兄弟选择器

相邻兄弟选择器 (+) 介于两个选择器之间，当第二个元素紧跟在第一个元素之后，并且两个元素都是属于同一个父元素的子元素，则第二个元素将被选中

说白了，a+b就是选择“紧跟在a后面的一个b”

相邻兄弟选择器从IE7开始兼容

 img+span { 
  color: green; 
 }
 
 
 <p>
  <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/0.jpg" alt=""> 
  <span>这是北京故宫</span> /* 将被选择*/
  <span>这是北京故宫</span>
 </p>
 <p>
  <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/1.jpg" alt=""> 
  <span>这是北京鸟巢</span>/* 将被选择*/
 </p>
 <span>你好</span>
 <span>你好</span>

通用兄弟选择器

通用兄弟选择器（~），a~b 选择a元素之后所有同层级b元素

通用兄弟选择器从IE7开始兼容

 h3~span { 
  font-style: italic; 
 } 
 
 <span>我是后面的span</span> 
 <h3>我是一个三级标题</h3> 
 <span>我是后面的span</span>/* 将被选择*/
 <span>我是后面的span</span>/* 将被选择*/
 <span>我是后面的span</span>/* 将被选择*/
 <span>我是后面的span</span>/* 将被选择*/
 <p>我是一个段落</p> 
 <span>我是后面的span</span>/* 将被选择*/
 <span>我是后面的span</span>/* 将被选择*/ 
 <div>
  <span>多了一个级别span</span> 
  <span>多了一个级别span</span>
 </div>

序号选择器

:first-child

:first-child表示“选择第一个子元素”，比如下面的例子就表示选择.box1盒子中第一个p

 .box1 p:first-child { 
  color: red;
 }
 
 
 <div class="box1"> 
  <p>1</p> /* 将被选择*/
  <p>2</p> 
  <p>3</p> 
  <p>4</p>
 </div>

:last-child

:last-child表示“选择最后一个子元素”，比如下面的例子就表示选择.box1盒子中最后一个p

 .box1 p:last-child { 
  color: red;
 }
 
 
 <div class="box1"> 
  <p>1</p> 
  <p>2</p> 
  <p>3</p> 
  <p>4</p>/* 将被选择*/
 </div>

:nth-child()

:nth-child()可以选择任意序号的子元素

 .box2 p:nth-child(3) { 
  color: green; 
 }
 
 <div class="box2"> 
  <p>1</p> 
  <p>2</p> 
  <p>3</p>/* 将被选择*/ 
  <p>4</p>
 </div>

:nth-child()

• :nth-child()可以写成an + b的形式，表示从b开始每a个选 一个，注意不能写为b + an

   .box2 p:nth-child(3n + 2) { 
    color: green; 
   }
   
   <div class="box2"> 
    <p>1</p> 
    <p>2</p>/* 将被选择*/ 
    <p>3</p> 
    <p>4</p> 
    <p>5</p>/* 将被选择*/ 
    <p>6</p> 
    <p>7</p> 
    <p>8</p>/* 将被选择*/
   </div>

  
  

• 2n+1等价于odd，表示奇数

   .box2 p:nth-child(2n + 1) { color: green; } 
   .box2 p:nth-child(odd) { color: green; }

  
  

• 2n等价于even，表示偶数

   .box2 p:nth-child(2n) { color: green; } 
   .box2 p:nth-child(even) { color: green; }

  
  

:nth-of-type()

:nth-of-type()将选择同种标签指定序号的子元素

 .box4 p:nth-child(3) { 
  color: blue; 
 }
 
 <div class="box4"> 
  <p>我是1号p</p> 
  <p>我是2号p</p> 
  <h3>我是1号h3</h3> 
  <h3>我是2号h3</h3> 
  <p>我是3号p</p>/*不会被选择！*/
  <p>我是4号p</p> 
  <h3>我是3号h3</h3> 
  <h3>我是4号h3</h3>
 </div>

 .box4 p:nth-of-type(3) { 
  color: blue; 
 }
 
 <div class="box4"> 
  <p>我是1号p</p> 
  <p>我是2号p</p> 
  <h3>我是1号h3</h3> 
  <h3>我是2号h3</h3> 
  <p>我是3号p</p>/*被选择！*/
  <p>我是4号p</p> 
  <h3>我是3号h3</h3> 
  <h3>我是4号h3</h3>
 </div>

序号选择器的兼容性

属性选择器

伪元素

CSS3新增了“伪元素”特性，顾名思义，表示虚拟动态创建的元素

伪元素用双冒号表示，IE8可以兼容单冒号

::before和::after

::before 创建一个伪元素，其将成为匹配选中的元素的第一个子元素，必须设置 content 属性表示其中的内容

 a::before { 
  content: "★";
 }

::after 创建一个伪元素，其将成为匹配选中的元素的最后一个子元素，必须设置 content 属性表示其中的内容

:selection

::selection CSS伪元素应用于文档中被用户高亮的部分（使用鼠标圈选的部分）

::first-letter和::first-line

• ::first-letter会选中某元素中（必须是块级元素）第一行的第一个字母

• ::first-line会选中某元素中（必须是块级元素）第一行全部文字

层叠性和选择器权重计算

CSS全名叫做“层叠式样式表”，层叠性是它很重要的性质

层叠性：多个选择器可以同时作用于同一个标签，效果叠加

 <p id="para" class="spec">我是段落</p> 
 
 p { 
  color: red; 
 }
 .spec {
  font-style: italic;
 }
 #para {
 text-decoration: underline;
 }

层叠性的冲突处理

复杂选择器可以通过（id的个数, class的个数, 标签的个数）的形式，计算权重, id权重 > class权重 > 标签权重.

!important提升权重

如果我们需要将某个选择器的某条属性提升权重，可以在属性后面写!important

总结