css选择器

- 基础选择器

1.* 通用元素选择器，匹配页面任何元素

  * {
    box-sizing: border-box;
  }
  .flex-container * {
    flex-basis: 100%;
  }

2. #id id选择器，匹配特定id的元素

    <p id="welcome">hello</p>
    #welcome {
      font-size: 24px;
    }
   

3. .class 类选择器，匹配class包含(不是等于)特定类的元素

一个 CSS 类可以应用到多个不同的元素
一个元素也可以应用多个不同的 CSS 类

    <ul>
      <li class="first done">1</li>
      <li class="second done">2</li>
    </ul>
    .first {
      font-weight: bold;
    }
    .done {
      text-decoration: line-through;
    }

4. element 标签选择器

    p {
      color: red;
    }
   

- 组合选择器

1. A, B 多元素选择器，用,分隔，同时匹配元素A或元素B

2. A B 后代选择器，用空格分隔，匹配A元素所有的后代（不只是子元素、子元素向下递归）元素B

    <div class="first">第一层
      <div class="second">第二层
        <div class="third">第三层
          <span class="inner">最内层   
          </span>
        </div>
      </div>
    </div>
    .first .second{
      color:red;
    }
   

3. A > B 选中匹配 B 且为匹配 A 的元素的直接子元素。

    .second > .third{
      color:red;
    }
   

third不是first的直接子元素，故css未生效

- 属性选择器

1. [attr] 选择包含 attr 属性的所有元素，不论 attr 的值为何。

    [disabled] {
      cursor: not-allowed;
    }
   

2. [attr=val]仅选择 attr 属性被赋值为 val 的所有元素。

    [data-color="gray"] {
      color: #ccc;
    }
   

- 伪类选择器

 <style>
   .box:first-child {
    color: red;
  }
  .box:first-of-type {
    background: blue;
  }
  .box :first-child {
    font-size: 30px;
  }
  .box :first-of-type {
    font-weight: bold;
  }
  </style>
   <div class="container">
      <div class="box">div.box</div>
      <p class="box">p.box</p>
      <div class="box">div.box</div>
      <div class="box">
        <div class="item">div.item</div>
        <p class="item">p.item</p>
      </div>
      <p class="box"></p>
    </div>

.box:first-child 匹配class=box的第一个子元素（div.box为第一个，所以颜色为红色）
.box:first-of-type 匹配class=box使用同种标签的第一个子元素（div.box为第一个使用div标签，p.box为第一个使用p标签，所以背景颜色为蓝色）
.box :first-child 匹配父元素class=box下的第一个子元素（div.item为div.box下的第一个子元素，所以字体为30px）
.box :first-of-type 匹配父元素class=box下所有使用同种标签的第一个子元素（div.item为div.box下的第一个使用div标签，p.item为div.box下第一个使用p标签，所以加粗）

E F:nth-child(n) 匹配其父元素的第n个子元素
E F:nth-of-type(n) 匹配使用同种标签的第n个子元素

n的取值1，2，3，4，5;2n+1, 2n, 4n-1;odd（奇数）, even（偶数）

- 伪元素选择器

选择器优先级：

1. 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式
2. 作为style属性写在元素标签上的内联样式
3. id选择器
4. 类选择器
5. 伪类选择器
6. 属性选择器
7. 标签选择器
8. 通配符选择器
9. 浏览器自定义