简单介绍 css 选择器

规则结构

每个规则都有两个基本部分：选择器和声明块。声明块由一个或多个声明组成，每个声明都是一个属性—值对（键值对）。需要注意的是，如果声明中使用了不正确的属性或者不正确的值，整个声明都会被忽略。

通配符选择器 *

• 权重：0
• 符号：*

/* 代表选中所有的元素 */
*{
    margin:0;
    padding:0;
}

元素（标签）选择器

• 权重：1
• 用法：元素名{}

/* 代表选中这一类的元素（标签） */
p{
    background: green;
}

类选择器

• 权重：10
• 用法：.类名{} （在开始标签里面起名：class=“类名”）
• 类选择器可以设置多个，中间要空格隔开

    <style>
        .p2{
            background-color: antiquewhite;
        }
        .red{
            color: red;
        }
    </style>

    <p class="p2 red">p</p>

属性选择器

• 权重：10

• 用法：

  • [属性名]{}
  • [属性名=“属性值”]{}

      <style>
          /* 代表选中具有某个属性的所有元素 */
          [index]{
              background:darkorange;
          }
          /* 代表选中属性名等于特定属性值的一类元素 */
          [index="a1"]{
              background:darkorchid;
          }
      </style>
  
      <div index>div</div>
      <div index="a1">div</div>
  

id选择器

• 权重：100
• 用法：#id名{} （在开始标签里面起名：id=“id名”）
• 唯一性，在同一个页面中,id名字不能重名

    <style>
        #p1{
            background:green;  
        }   
        .p1{
            color:red;
        }
    </style>

    <p id="p1" class="p1">段落1</p>

子选择器

• 权重：组合的选择器之和
• 连接符：> （权重为0）

    <style>
        /* 选中子元素谁（第一层级的儿子元素） */
        /* 权重：11 */
        .main>span{
            background-color: aqua;
        }
    </style>

    <div class="main">
        <div>
            <span>span</span>
        </div>
        <span>span</span>
    </div>

后代选择器

• 权重：组合的选择器之和
• 连接符：空格

    <style>
        /* 选中特定的后代元素 */
        .main div{
            background-color: aqua;
        }
    </style>

    <div class="main">
        <div>
            <span>span</span>
        </div>
        <span>span</span>
    </div>

分组选择器

• 权重：以逗号做分割的选择器组合之和 (看权重的时候逗号两边分开看，分别是一个整体)
• 连接符：，（逗号）
• 作用：可以把共同的代码提取出来

   <style>
        /* 将相同的代码提取出来，减少冗余 */
        div,p{
            background-color: aqua;
        }
    </style>

    <div>div</div>
    <p>p</p>

交集选择器

• 权重：选择器组合之和
• 连接符：没有 （多个名字之间没有任何的符号，是紧挨着的）

    <style>
        /* 选中同时具备某些名字的元素 */
        .p2.red{
            color: darkgreen;
        }
    </style>

    <p class="p2 red">p</p>

相邻兄弟选择器

• 权重：组合选择器之和
• 连接符：+
• 选中与某个元素相邻的元素（向下寻找）

   <style>
        /* 选中与某个元素相邻的元素 */
        p+h1{
            background-color: blueviolet;
        }
    </style>

    <h1>h1</h1>
    <p class="p2 red">p</p>
    <h1>h1</h1>

通用兄弟选择器

• 权重：组合的选择器之和
• 连接符：~
• 选中某个元素的特定兄弟元素谁谁（不用相邻，只要是兄弟就可以）

    <style>
        /* 选中某个元素的特定兄弟元素谁谁（不用相邻，只要是兄弟就可以） */
        p~h1{
            background-color: blueviolet;
        }
    </style>

    <h1>h1</h1>
    <p class="p2 red">p</p>
    <h1>h1</h1>

伪类选择器

可以为文档中不一定具体存在的结构指定样式，或者为某些元素（甚至是文档本身）的状态所指示的幻想类指定样式。

a标签四种状态

• link
• visited
• hover
• active

    <style>
        a{
        font-size: 30px;
        }
        /* 默认的样式 */
        a:link{
            color: blue;
        }
        /* 访问过后的样式 */
        a:visited{
            color: yellow;
        }
        /* 鼠标滑上的状态 */
        a:hover{
            color: red;
        }
        /* 激活、点击状态 */
        a:active{
            color: green;
        }
    </style>

    <a href="http://www.baidu.com">baidu</a>

这四种状态有一定的顺序，记忆方法：Lord Vader Hates Furry Animals