css选择器

[Devancn]

前言

关于样式的相关概念介绍

样式规则语法

1. 使用产生式来表达样式规则语法

   style-rule ::=
       selectors-list {
       properties-list
   }
   selectors-list ::=
       selector[:pseudo-class] [::pseudo-element]
       [, selectors-list]
   
   properties-list ::=
       [property : value] [; properties-list]
   

2. 样式规则示例

   strong {
     color: red;
   }
   
   div.menu-bar li:hover > ul {
     display: block;
   }

基本选择器

简单选择器使用特定的分割符号（*、.、# ...）

• 通配选择器 *，ns|* （ns表示命名空间，默认不写就是html，如果想要选择svg元素中的元素a，则可以使用svg|a）
• 元素选择器 element(元素名称)
• 类选择器 .classname(类名)
• ID选择器 #idname(ID名)
• 属性选择器 [attr=value]，这里的=号与value也可以不写，表示选中带有attr的属性选择器

复合选择器

复合选择器有简单选择器组成，简单选择器之间不能有空可，所表达的含义为与的关系，如

<style>
    /*选择同时带有class为a和b的元素*/
    .a.b {
      color: skyblue;
    }
</style>
<div class="a b">123</div>

• <简单选择器><简单选择器><简单选择器>

分组选择器

使用,号分割多个选择器集合起来的一个列表，不与参与选择器优先级的运算

• 选择器列表 A,B

  指定同时选择 A和B元素。这是一种选择多个匹配元素的分组方法

组合选择器

组合选择器是两个或多个简单选择器之间建立关系的选择器，例如“A是B的子代”或“A与B相邻”，选择器之间使用特定的符号来链接，如+、~、 空格、>

• 相邻兄弟选择器 A + B

  指A和B选择的元素具有相同的父元素，并且B选择的元素在水平方向上紧随A选择的元素

  <style>
      /*文本为2的所在元素的颜色为skyblue*/
      .a + .b {
          color: skyblue;
      }
  </style>
  <div class="a">1</div>
  <div class="b">2</div>
  <div class="b">3</div>

• 普通兄弟选择器 A ~ B

  指由A和B选择的元素共享相同的父元素，并指定A选择的元素在B选择的元素之前，但不一定紧接在B之前

  <style>
      /*文本为3和4的所在元素的颜色为skyblue*/
  	.a~.b {
        color: skyblue;
      }
  </style>
  <div class="a">1</div>
  <div class="c">2</div>
  <div class="b">3</div>
  <div class="b">4</div>

• 子选择器 A > B

  指B选择的元素是A选择的元素的直接子元素

• 后代选择器 A B

  指B选择的元素是A选择的元素的后代，不一定是直接子代

伪类选择器

伪类选择器使用:表示，用来操作用户交互或浏览器机制所带来的状态改变

伪元素选择器

伪元素选择器使用::或:表示，伪元素它的作用会在当前DOM树种新增一个元素，该元素不存在html代码标签中

选择器的优先级

• 简单选择器的计算

  • 把选择器分为四级 [内联，ID，类|属性，标签]，计算的是组合选择器（复杂选择器）的优先级，如：

    复杂选择器#id div.a#id的优先级计算方式为，[0个内联样式，2个ID选择器，1个class选择器，1个标签选择器]，优先级的比较方式是两个这样的四元组从左往右一一对应进行对比，直到比较出谁大则停止比较，则谁的优先级就高；

    div#a.b .c[id=x]统计的结果为[0,1,3,1]，0个内联，1个id（#a），2个class（.b与.c）加上1个属性[id=x]，1个标签a

    <style>
        #a:not(#b) {
          color: red;
        }
    	/*这里的优先级与上面一直都是[0,2,0，0]，上面的:not不参与优先级计算，根据后面样式覆盖前面样式的规则，所以最终颜色为 green,不参与优先级计算的还有*号*/
        #x #a {
          color: green;
        }
      </style>
    <div id="x" class="b">
        <div class="c d" id="a">Devan</div>
    </div>