CSS选择器

1.CSS选择器

基本选择器包括：

1. 通配选择器
2. 元素选择器
3. 类选择器
4. id选择器

1.1通配选择器

• 作用：可以选中所有的HTML元素。

• 语法：

  * {
  	属性名：属性值；
  }
  

• 举例：

  * {
      /* 选中所有元素 */
      color: orange;
      font-size: 40px;
  }
  

备注：目前来看通配选择器貌似有点鸡肋，但后面清除样式时，会对我们有很大帮助。

1.2元素选择器

• 作用：为页面中某种元素统一设置样式。

• 语法：

  标签名 {
  	属性名：属性值；
  }
  

• 举例：

  /* 选中所有h1元素 */
  h1 {
      color: chocolate;
      font-size: 40px;
  }
  
  /* 选中所有p元素 */
  p {
      color: blue;
      font-size: 60px;
  }
  

备注：元素选择器无法实现差异化设置，例如上面的代码中，所有的p元素效果都一样。

1.3类选择器

• 作用：根据元素的class值，来选中某些元素。

  class翻译过来有：种类、类别的含义，所以class值，又称类名。

• 语法：

  .类名 {
  	属性名：属性值；
  }
  

• 举例：

  /* 选中页面中所有类名为speak的元素 */
  .speak {
      color: red;
  }
  
  /* 选中页面中所有类名为answer的元素 */
  .answer {
      color: green;
  }
  

• 注意点：

  1. 元素的class属性值不带点（.）,但CSS的类选择器要带（.）。

  2. class值，是我们自定义的，按照标准：不要使用纯数字、不要使用中文、尽量使用英文与数字的组合，若有多个单词组成，使用-做连接，例如：left-menu，且命名要有意义，做到“见名知意”。

  3. 一个元素不能写多个class属性，下面是错误示例：

     
     "speak" class="big">你好啊
     

  4. 一个元素的class属性，能写多个值，要用空格隔开，例如：

     
     "speak big">你好啊
     

1.4ID选择器

• 作用：根据元素的id属性值，来精准的选中某个元素。

• 语法：

  #id值 {
  	属性名：属性值；
  }
  

• 举例：

  /* 选中id值为earthy的那个元素 */
  #earthy {
      color: red;
      font-size: 60px;
  }
  

• 注意：

  • id属性值；尽量由**字母、数字、下划线（_）、短杠（-）**组成，最好以字母开头、不要包含空格、区分大小写。
  • 一个元素只能拥有一个id属性，多个元素的id属性值不能相同。
  • 一个元素可以同时拥有id和class属性。

1.5基本选择器总结

基本选择器	特点	用法
通配选择器	选中所有标签，一般用于清楚样式。	* {color:red}
元素选择器	选中所有同种标签，但是不能差异化选择。	h1 {color:red}
类选择器	选择所有特定类名（class值）的元素——使用频率很高。	.say {color:red}
ID选择器	选中特定id值得那个元素（唯一的）。	#earthy {color:red}

2.1交集选择器

• 作用：选中同时符合多个条件的元素。

  交集有并且的含义（通俗理解：**既…又…**的意思），例如：年轻且长得帅。

• 语法：选择器1选择器2选择器3…选择器n{}

• 举例：

  /* 选中：类名为beauty的p元素，这种写法比较常见 */
  p.beaty {
      color: blue;
  }
  
  /* 选中：类名包含rich和beauty的元素 */
  .rich.beauty {
      color: green;
  }
  

• 注意：

  1. 有标签名，标签名必须写在前面。
  2. id选择器理论上可以作为交集的条件，但实际应用中几乎不用——因为没有意义。
  3. 交集选择器中不可能出现两个元素选择器，因为一个元素，不可能既是p元素又是span元素。
  4. 用的最多的交集选择器是：元素选择器配合类名选择器，例如：p.beauty。

2.2并集选择器

• 作用：选中多个选择器对应的元素，又称：分组选择器。

  所谓并集就是或者的含义（通俗理解：要么…要么…），例如：给我n+1或者我继续上班。

• 语法：选择器1，选择器2，选择器3，…选择器n{}

  多个选择器通过逗号（，）连接，此处逗号（，）的含义就是：或。

• 举例：

  /* 选中id为peiqi，或者类名为rich，或者类名为beauty的元素 */
  #peiqi,
  .rich,
  .beauty {
      font-size: 40px;
      background-color: skyblue;
      width: 200px;
  }
  

• 注意：

  1. 并集选择器，我们一般竖着写。
  2. 任何形式的选择器，都可以作为并集选择器的一部分。
  3. 并集选择器，通常用于集体声明，可以缩小样式表体积。

2.3后代选择器

• 作用：选中指定元素中，符合要求的后代元素。

• 语法：选择器1 选择器2 选择器3 … 选择器n {} （先写祖先，再写后代）

  选择器之间，用空格隔开，空格可以理解为：”xxx中的“，其实就是后代的意思。

  选择器1234…n，可以是我们之前学的任何一种选择器。

• 举例：

  /* 选中ul中的所有li */
  ul li {
      color: red;
  }
  
  /* 选中ul中所有li中的a */
  ul li a {
      color: red;
  }
  
  /* 选中类名为subject元素中的所有li */
  .subject li {
      color: red;
  }
  
  /* 选中类名为subject元素中的所有类名为front-end的li */
  .subject li.front-end {
      color: blue;
  }
  

• 注意：

  1. 后代选择器，最终选择的是后代，不选中祖先。
  2. 儿子、孙子、重孙子，都算是后代。
  3. 结构一定要符合之前讲的HTML嵌套要求，例如：不能p中写h1~h6。

2.4子代选择器

• 作用：选中指定元素中，符合要求的子元素（儿子元素）。（先写父，再写子）

  子代选择器又称：子元素选择器、子选择器。

• 语法：选择器1>选择器2>选择器3 … 选择器n {}

  选择器之间，用>隔开，>可以理解为：”xxx中的子代“，其实就是儿子的意思。

  选择器1234…n，可以是我们之前学的任何一种选择器。

• 举例：

  /* div中的子代a元素 */
  div>a {
      color: red;
  }
  
  /* 类名为person的元素中的子代a元素 */
  .persons>a {
      color: red;
  }
  

• 注意：

  1. 子代选择器，最终选择的是子代，不是父级。
  2. 子、孙子、重孙子、重重孙子…统称后代！，子就是指儿子。

  

2.5兄弟选择器

• 相邻兄弟选择器：

  • 作用：选中指定元素后，符合条件的相邻兄弟元素。

    所谓相邻，就是紧挨着他的下一个，简记：睡在我下铺的兄弟。

  • 语法：选择器1+选择器2{}。

  • 示例：

    /* 选中div后的相邻的兄弟p元素 */
    div+p {
        color: red;
    }
    

• 通用兄弟选择器：

  • 作用：选中指定元素后，符合条件的所有兄弟元素。（简记：睡在我下铺的所有兄弟）

  • 语法：选择器1~选择器2{}。

  • 示例：

    /* 选中div后的所有兄弟p元素 */
    div~p {
        color: red;
    }
    

• 注意：两种兄弟选择器，选择的是下面的兄弟。

2.6属性选择器

• 作用：选中属性值符合一定要求的元素。

• 语法：

  1. [属性名] 选中具有某个属性的元素。
  2. [属性名=”值“] 选中包含某个属性，且属性值等于指定值的元素。
  3. [属性名^=”值“] 选中包含某个属性，且属性值以指定值开头的元素。
  4. [属性名$=”值“] 选中包含某个属性，且属性值以指定值结尾的元素。
  5. [属性名*=”值“] 选中包含某个属性，且属性值包含指定值的元素。

• 举例：

  /* 选中具有title属性的元素 */
  [title] {
      color: red;
  }
  
  /* 选中title属性值为atguigu的元素 */
  [title="atguigu"] {
      color: red;
  }
  
  /* 选中title属性值以a开头的元素 */
  [title^="a"] {
      color: red;
  }
  
  /* 选中title属性值以u结尾的元素 */
  [title$="u"] {
      color: red;
  }
  
  /* 选中title属性值包含g的元素 */
  [title*="g"] {
      color: red;
  }
  

2.7伪类选择器

• 作用：选中特殊状态的元素。

  如何理解”伪“？——虚假的，不是真的。

  如何理解”伪类“——像类（class），但不是类，是元素的一种特殊状态。

• 常用的伪类选择器：

  一、动态伪类：

  1. :link 超链接未被访问的状态。

  2. :visited 超链接访问过的状态。

  3. :hover 鼠标悬停在元素上的状态。

  4. :avtive 元素激活的状态。

     什么是激活？——按下鼠标不松开。

     注意点：遵循LVHA的顺序，即：link、visited、hover、active。

  5. :focus 获取焦点的元素。

     表单类元素才能使用:focus伪类。

     当用户:点击元素、触摸元素、或通过键盘的"tab"键等方式选择元素时，就是获得焦点。

  二、结构伪类：

  • 常用的：

    1. :first-child 所有兄弟元素中的第一个。
    2. :last-child 所有兄弟元素中的最后一个。
    3. :nth-child(n) 所有兄弟元素的第n个。
    4. :first-of-type 所有同类型兄弟元素中的第一个。
    5. :last-of-type 所有同类型兄弟元素中的最后一个。
    6. :nth-of-type(n) 所有同类型兄弟元素中的第n个。

    关于n的值：

    1. 0或不写：什么都选不中——几乎不用。
    2. n：选中所有子元素——几乎不用。
    3. 1~正无穷的整数：选中对应序号的子元素。
    4. 2n或even：选中序号为偶数的子元素。
    5. 2n+1或odd：选中序号为奇数的子元素。
    6. -n+3：选中的是前三个。

  • 了解即可：

    1. :nth-last-child(n) 所有兄弟元素中的倒数第n个。
    2. :nth-last-of-type(n) 所有同类型兄弟元素中的倒数第n个。
    3. :only-child(n) 选择没有兄弟的元素(独生子女)。
    4. :only-of-type(n) 选择没有同类型兄弟的元素。
    5. :root 根元素。
    6. :empty 内容为空元素(空格也算内容)。

  三、否定伪类：

  ​ :not(选择器) 排除满足括号中条件的元素。

  四、UI伪类：

  1. :checked 被选中的复选框或单选按钮。
  2. :enable 可用的表单元素 （没有disabled属性）。
  3. :disabled 不可用的表单元素 （有disabled属性）。

  五、目标伪类(了解)：

  ​ :target 选中锚点指向的元素。

  六、语言伪类(了解)：

  ​ :lang() 根据指定的语言选择元素（本质是看lang属性的值）。

2.8伪元素选择器

• 作用：选中元素中的一些特殊位置。
• 常用为元素：
  • ::first-letter 选中元素中的第一个文字。
  • ::first-line 选中元素中的第一行文字。
  • ::selection 选中被鼠标选中的内容。
  • ::placeholder 选中输入框的提示文字。
  • ::before 在元素最开始的位置，创建一个子元素（必须用content属性指定内容）。
  • ::after 在元素最后的位置，创建一个子元素（必须用content属性指定内容）。

2.9选择器的优先级

通过不同的选择器，选中相同的元素，并且为相同的样式名设置不同的值时，就发生了样式的冲突。

到底应用哪个样式，此时就需要看优先级了。

• 简单描述：

  行内样式 > ID选择器 > 类选择器 > 元素选择器 > 通配选择器。

• 详细描述：

  1. 计算方式：每个选择器，都可计算出一组权重，格式为：（a,b,c）

     • a:ID选择器的个数。
     • b:类、伪类、属性选择器的个数。
     • c:元素、伪元素选择器的个数。

     例如：

     选择器	权重
     ul>li	（0，0，2）
     div ul>li p a span	（0，0，6）
     #atguigu .slogan	（1，1，0）
     #atguigu .slogan a	（1，1，1）
     #atguigu .slogan a:hover	（1，2，1）

  2. 比较规则：按照从左到右的顺序，依次比较大小，当前位胜出后，后面的不再对比，例如：

     • （1，0，0）>（0，2，2）
     • （1，1，0）>（1，0，3）
     • （1，1，3）>（1，1，2）

  3. 特殊规则：

     1. 行内样式权重大于所有选择器。
     2. !important的权重，大于行内样式，大于所有选择器，权重最高！