1）CSS基础选择器

css 通过选择器,来选取符合的标签进行样式的设置

常用选择器有: id选择器, class选择器, 标签选择器, 群组选择器, 派生选择器, :hover

id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
id 选择器以 “#” 来定义，id 属性只能在每个 HTML 文档中出现一次

  1. <head>
  2.       <style>
  3.       #p1{
  4.         width:500px;
  5.         height:500px;
  6.       }
  7.       </style>
  8. </head>
  9. <body>
  10.   <p id="p1">AAAA</p>
  11. </body>

Class 类选择器

  • class选择器可以为标有class 的 HTML 元素指定特定的样式。

  • class 选择器以 “.” 来定义，class 属性可以HTML 文档中出现多次。

    1. <head>
    2.  <style>
    3.  .p1{
    4.    width:500px;
    5.    height:500px;
    6.  }
    7.  </style>
    8. </head>
    9. <body>
    10. <p class="p1">AAAA</p>
    11. </body>

    标签选择器

  • 标签选择器可以为标有该标签的 HTML 元素指定特定的样式

    1. <head>
    2.  <style>
    3.  p{
    4.    width:500px;
    5.    height:500px;
    6.  }
    7.  </style>
    8. </head>
    9. <body>
    10. <p>AAAA</p>
    11. </body>

    通配符选择器

    用*号来表示，作用范围最广
    例如：

    1. *{
    2. margin:0;
    3. padding:0;    
    4. }

    标签指定式选择器（交集选择器）

    由两个选择器构成，第一个是 标签选择器，第二个是 class选择器 或 id选择器，两个选择器之间不能有空格

    1. p.class{
    2. 样式;
    3. }

    组选择器（并集选择器）

  • 在使用群组选择器时，使用“,”逗号分隔选择器

  • 将这多个选择器分组在一起,应用相同的样式。

  • 通过分组，创作者可以将某些类型的样式“压缩”在一起，这样就可以得到更简洁的样式表。

    1. <head>
    2.  <style>
    3.  p, div{
    4.    width:500px;
    5.    height:500px;
    6.  }
    7.  </style>
    8. </head>
    9. <body>
    10. <p>AAAA</p>
    11. <div> BBB </div>
    12. </body>

    派生选择器(层级选择器、后代选择器)

  • 依据元素在其位置的上下文关系来定义样式，通过合理地使用派生选择器，我们可以使 HTML 代码变得更加整洁。

  • 所有 HTML 标签都可以使用派生选择器设置样式，我们要确定元素的上下文关系。

    1. <head>
    2.  <style>
    3.  div p{
    4.    width:500px;
    5.    height:500px;
    6.  }
    7.  </style>
    8. </head>
    9. <body>
    10. <div>
    11. <p>AABBCC</p>
    12. </div>
    13. <p>AAAA</p>
    14. </body>

    2）进阶css选择器

    属性选择器

    1、E[att^=value]属性选择器

    是指选择名称为E的标记，且该标记定义了att属性，att属性值包含前缀为value的子字符串，E是可以省略的，如果省略则表示，可以匹配满足条件的任意元素
    例如：div[id^=section] 表示匹配包含id属性，且id属性值是以 section 字符串开头的div元素

    2、E[att$=value]属性选择器

    是指选择名称为E的标记，且该标记定义了att属性，att属性值包含后缀为value的子字符串，E是可以省略的，如果省略则表示，可以匹配满足条件的任意元素
    例如：div[id$=section] 表示匹配包含id属性，且id属性值是以 section 字符串结尾的div元素

    3、E[att*=value]属性选择器

    是指选择名称为E的标记，且该标记定义了att属性，att属性值包含value的子字符串，E是可以省略的，如果省略则表示，可以匹配满足条件的任意元素
    例如：div[id*=section] 表示匹配包含id属性，且id属性值包含 section 字符串的div元素

    关系选择器

    结构化伪类选择器

    :hover 伪类选择器

    • 鼠标移入div上方时显示的样式。
      1. <head>
      2. <style>
      3. p:hover{
      4. width:500px;
      5. height:500px;
      6. }
      7. </style>
      8. </head>
      9. <body>
      10. <p>AAAA</p>
      11. </body>

      伪元素选择器

      3）选择器优先级

当两个规则都作用到了同一个html元素上时，如果定义的属性有冲突，那么应该用谁的值的，CSS有一套优先级的定义。

不同级别

1、在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。

2、作为style属性写在元素内的样式

3、id选择器

4、类选择器

5、标签选择器

6、通配符选择器

7、浏览器自定义或继承

总结排序：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

同一级别中后写的会覆盖先写的样式。