选择器初级

1. 标签选择器

一个完整的 HTML 文档由各式各样的标签组成，而标签选择器可以通过具体的标签名称来匹配文档内所有同名的标签，如下所示：

/* 找到页面当中所有的p标签 */
p {
    color: blue;
}

标签选择器选择的覆盖面广，通常用来做样式的初始化。比如说我们将页面上所有的a标签的下划线去掉

a {
    text-decoration: none;
}

2. 类选择器

类选择器可以根据标签的class属性，找到具体的HTML标签。类选择器的定义需要用到一个英文的句号.，后面紧跟 class 属性的值

.black {
    color: black;
}

一个标签可以同时有多个类名，类名之间以空格隔开。使用场景：将一些标签相同的样式放在一个类里面，从而节省css代码的书写

<style>
    .box {
        width: 100px;
        height: 100px;
    }
    
    .red {
        background-color: red;
    }
    
    .green {
        background-color: green;
    }
​
</style>
​
<div class="box red">红色</div>
<div class="box green">绿色</div>
<div class="box red">红色</div>

3. ID选择器

ID 选择器用来找到HTML文档中具有指定ID属性的标签，ID 选择器的定义需要用到井号#，后面紧跟ID属性的值。ID选择器的使用方式和类选择器的使用方式是非常像，但是ID选择器的主要作用是结合js用于确定页面上的唯一元素。单个标签不允许拥有多个id名，同页面中不存出现重复的id名（id重名会影响js代码获取标签）。并不是主要用来设置css的

#nav {
    color: red;
}

4. 通配符选择器

通配符选择器用星号*表示，它不匹配某个特定的HTML元素，而是匹配 HTML文档中的每个元素。我们通常使用通用选择器来清除 HTML元素中默认的内外边距

<style>
    * {
        color: red;
    }
</style>
​
<div>div</div>
<p>pppp</p>
<h1>h1</h1>
<span>span</span>
<p>pppp</p>
<h2>h2</h2>

通配符选择器在开发中不会使用，一般我们页面的标签的样式不会长的都完全一样。在平常的练习去除标签默认的margin和padding

* {
    margin: 0;
    padding: 0;
}

5. 组合选择器

组合选择器: 两个或两个以上的选择器配合使用

后代选择器

• 结构：选择器1 选择器2 {css属性名:属性值;}

• 在选择器1所找到标签的后代（后代包括：儿子、孙子、重孙子……）中，找到满足选择器2的标签，设置样式

  div a {
      color: red;
  }
  

子代选择器

• 结构：选择器1 > 选择器2 {css属性名:属性值;}

• 在选择器1所找到标签的子代（子代只包括：儿子）中，找到满足选择器2的标签，设置样式

  div > a {
      color: red;
  }
  

相邻兄弟选择器

• 相邻兄弟选择器用于匹配某个元素之后紧邻的另一个元素，这两个元素拥有同一个父级元素并且不存在嵌套关系。相邻兄弟选择器的定义需要用到加号+，加号两边为相邻的两个元素，选择器会匹配加号后面的元素

  div + p {
      color: red;
  }
  

通用兄弟选择器

• 通用兄弟选择器同样会匹配同一父级元素下的兄弟元素，但兄弟元素之间无需紧邻。定义通用兄弟选择器需要用到波浪号~，波浪号两边为同一父级元素下的两个元素，选择器会匹配波浪号后面的元素

  p ~ p {
      color: pink;
  }
  

分组选择器

• 结构：选择器1 ， 选择器2 {css属性名:属性值;}

• 同时选择多组标签，设置相同的样式

• 并集选择器中的每组选择器之间通过 , 分隔

• 并集选择器中的每组选择器通常一行写一个，提高代码的可读性

  <style>
      p, 
      div, 
      span, 
      h1 {
          color: red;
      }
  </style>
  ​
  <p>ppp</p>
  <div>div</div>
  <span>span</span>
  <h1>h1</h1>
  <h2>h2</h2>
  

• 默认样式的清除浏览器会为元素设置一些默认样式，默认样式的存在会影响到我们页面的布局。

• /* case 1   最省事，但是最不推荐 */
  *{ margin:0; padding:0; list-style:none; border:none;}
  ​
  /* case 2   相对繁琐，但是是较好选择 */
  body,dl,dd,p,h1,h2,h3,h4,h5,h6{margin:0;}
  ol,ul{margin:0;padding:0;list-style:none;}
  

• case 3更好的选择：引入给你写好的初始化样式文件 ，去除浏览器的默认样式

交集选择器

• 结构：选择器1选择器2{css属性名:属性值;}

• 找到页面中既能被选择器1选中，又能被选择器2选中的标签，设置样式

• 交集选择器中的选择器之间是紧挨着的，没有东西分隔

  <style>
      p.box {
          color: red;
      }
  </style>
  ​
  ​
  <p class="box">这是p标签:box</p>
  <p class="box">这是p标签:box</p>
  <p>pppppp</p>
  <div class="box">这是div标签:box</div>
  

6. CSS层叠性与优先级

层叠性： 所谓的层叠即叠加的意思，表示样式可以一层一层的层叠覆盖。给同一个标签设置不同的样式，会共同作用在标签上。

优先级： 如果同一个标签被多个选择器赋予了相同的属性且值不一样时，会按照选择器的优先级来决定以哪个样式为准，比如：

.info{
    color: green;
}
​
p{
    color: red;
}

<p class="info">段落文字</p>

• !important > 行内 > id > class > 标签 > 继承
• 先比较级别，级别一样比较各级别选择器出现的次数
• 当两个选择器权重一样时，以最后出现的为准