CSS选择器

css
css选择器
137 6383

选择器

基本选择器

  • 通配选择器
  • 元素选择器
  • 类选择器
  • id 选择器

通配选择器

  • 作用：可以选中所有的 HTML 元素。
  • 语法：
    * {
属性名: 属性值;
}
  • 举例：
    /* 选中所有元素 */
* {
color: orange;
font-size: 40px;
}

元素选择器

  • 作用：为页面中 某种元素 统一设置样式。
  • 语法：
    标签名 {

属性名: 属性值;

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

类选择器

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

  • 语法

    .类名 {
属性名: 属性值;
}

  • 举例

    /* 选中所有class值为speak的元素 */
.speak {
color: red;
}
/* 选中所有class值为answer的元素 */
.answer {
color: blue;
}

  • 注意点

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

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

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

    <!-- 该写法错误，元素的属性不能重复，后写的会失效 -->
<h1 class="speak" class="big">你好啊</h1>

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

    <!-- 该写法正确，class属性，能写多个值 -->
<h1 class="speak big">你好啊</h1>

ID选择器

  • 作用：根据元素的 id 属性值，来精准的选中某个元素。
  • 语法
    #id值 {
属性名: 属性值;
}
  • 举例
    /* 选中id值为earthy的那个元素 */
#earthy {
color: red;
font-size: 60px;
}
  • 注意
    • id 属性值：尽量由字母、数字、下划线( _ )、短杠( - )组成，最好以字母开头、
      不要包含空格、区分大小写。
    • 一个元素只能拥有一个 id 属性，多个元素的 id 属性值不能相同。
    • 一个元素可以同时拥有 id 和 class 属性。

基本选择器总结

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

复合选择器

概念

  • 概念
    • 1, 复合选择器建立在基本选择器之上，由多个基础选择器，通过不同的方式组合而成。
    • 2, 复合选择器可以在复杂结构中，快速而准确的选中元素。
  • 分类
    • Ⅰ交集选择器
    • Ⅱ并集选择器
    • Ⅲ后代选择器
    • Ⅳ子元素选择器
    • …
  • 作用
  • 1.复合选择器建立在基本选择器之上，由多个基础选择器，通过不同的方式组合而成。
  • 2.复合选择器可以在复杂结构中，快速而准确的选中元素。

交集选择器

  • 作用：选中同时符合多个条件的元素。
    • 解释: 既…又有…
  • 语法：选择器1选择器2选择器3...选择器n {}
  • 举例
    /* 选中：类名为beauty的p元素，为此种写法用的非常多！！！！ */
p.beauty {
color: blue;
}
/* 选中：类名包含rich和beauty的元素 */
.rich.beauty {
color: green;
}
  • 注意：
    • 1, 有标签名，标签名必须写在前面。
    • 2, id 选择器、通配选择器，理论上可以作为交集的条件，但实际应用中几乎不用 —— 因为没有意义。
    • 3, 交集选择器中不可能出现两个元素选择器，因为一个元素，不可能即是 p 元素又是 span 元素。
    • 4, 用的最多的交集选择器是：元素选择器配合类名选择器，例如： p.beauty 。

并集选择器

  • 作用：选中多个选择器对应的元素，又称：分组选择器。表示或
  • 语法：选择器1, 选择器2, 选择器3, ... 选择器n {}
  • 举例
    /* 选中id为peiqi，或类名为rich，或类名为beauty的元素 */
#peiqi,
.rich,
.beauty {
font-size: 40px;
background-color: skyblue;
width: 200px;
}
  • 注意：
    • 1, 并集选择器，我们一般竖着写。
    • 2, 任何形式的选择器，都可以作为并集选择器的一部分 。
    • 3, 并集选择器，通常用于集体声明，可以缩小样式表体积。

HTML元素间的关系

  • 分类, 父元素, 子元素, 祖先元素, 后代元素, 兄弟元素。
  • 父元素：直接包裹某个元素的元素，就是该元素的父元素。
  • 子元素：被父元素直接包含的元素（简记：儿子元素）
  • 祖先元素：父亲的父亲…，一直往外找，都是祖先
  • 后代元素：儿子的儿子…，一直往里找，都是后代。
  • 兄弟元素：具有相同父元素的元素，互为兄弟元素。

后代选择器

  • 作用：选中指定元素中，符合要求的后代元素。
  • 语法：`选择器1 选择器2 选择器3 … 选择器n {} （先写祖先，再写后代）
  • 举例
    /* 选中ul中的所有li */
ul li {
color: red;
}
/* 选中ul中所有li中的a */
ul li a {
color: orange;
}
/* 选中类名为subject元素中的所有li */
.subject li {
color: blue;
}
/* 选中类名为subject元素中的所有类名为front-end的li */
.subject li.front-end {
color: blue;
}
  • 注意
    • 1, 后代选择器，最终选择的是后代，不选中祖先。
    • 2, 儿子、孙子、重孙子，都算是后代。
    • 3, 结构一定要符合之前讲的 HTML 嵌套要求，例如：不能 p 中写 h1 ~ h6 。

子代选择器

  • 作用：选中指定元素中，符合要求的子元素（儿子元素）。（先写父，再写子）
    • 子代选择器又称：子元素选择器、子选择器。
    • 选择的是儿子, 和后代选择器不同
  • 语法 语法：选择器1 > 选择器2 > 选择器3 > ...... 选择器n {}
  • 举例
    /* div中的子代a元素 */
div>a {
color: red;
}
/* 类名为persons的元素中的子代a元素 */
.persons>a{
color: red;
}
  • 注意
    1. 子代选择器，最终选择的是子代，不是父级。
    2. 子、孙子、重孙子、重重孙子 … 统称后代！，子就是指儿子

兄弟选择器

  • 相邻兄弟选择器：
    • 作用：选中指定元素后，符合条件的相邻兄弟元素。
      • 所谓相邻，就是紧挨着他的下一个
    • 语法： 选择器1+选择器2 {}
    • 示例：
      /* 选中div后相邻的兄弟p元素 */
div+p {
color:red;
}
  • 通用兄弟选择器：
    • 作用：选中指定元素后，符合条件的所有兄弟元素。（简记：睡在我下铺的所有兄弟）
      • 关键词: 所有
    • 语法： 选择器1~选择器2{} {}
    • 举例：
      /* 选中div后的所有的兄弟p元素 */
div~p {
color:red;
}
    • 注意：两种兄弟选择器，选择的是下面的兄弟。

属性选择器

  • 作用：选中属性值符合一定要求的元素。
  • 语法：
    1. [属性名] 选中具有某个属性的元素。
2. [属性名="值"] 选中包含某个属性，且属性值等于指定值的元素。
3. [属性名^="值"] 选中包含某个属性，且属性值以指定的值开头的元素。
4. [属性名$="值"] 选中包含某个属性，且属性值以指定的值结尾的元素。
5. [属性名*=“值”] 选择包含某个属性，属性值包含指定值的元素。
  • 举例
    /* 选中div后相邻的兄弟p元素 */
div+p {
color:red;
}
/* 选中div后的所有的兄弟p元素 */
div~p {
color:red;
}
/* 选中具有title属性的元素 */
div[title]{color:red;}
/* 选中title属性值为atguigu的元素 */
div[title="atguigu"]{color:red;}
/* 选中title属性值以a开头的元素 */

复合选择器

伪类选择器

  • 作用：选中特殊状态的元素。
    • 如何理解“伪” ? — 虚假的，不是真的。
    • 如何理解“伪类”？ — 像类( class )，但不是类，是元素的一种特殊状态。
  • 常用的伪类选择器

    • 一、动态伪类：

        1. :link 超链接未被访问的状态。
        1. :visited 超链接访问过的状态。
        1. :hover 鼠标悬停在元素上的状态。
        1. :active 元素激活的状态。
        • 什么是激活？—— 按下鼠标不松开。
        • 注意点：遵循 LVHA 的顺序，即： link 、 visited 、 hover 、 active 。
        1. :focus 获取焦点的元素。
        • 表单类元素才能使用 :focus 伪类。
        • 当用户：点击元素、触摸元素、或通过键盘的 “ tab ” 键等方式，选择元素时，就是获得焦点。

    • 二、结构伪类

      • 常用的：

          1. :first-child 所有兄弟元素中的第一个。
          1. :last-child 所有兄弟元素中的最后一个。
          1. :nth-child(n) 所有兄弟元素中的第 n 个。
          1. :first-of-type 所有同类型兄弟元素中的第一个。
          1. :last-of-type 所有同类型兄弟元素中的最后一个。
          1. :nth-of-type(n) 所有同类型兄弟元素中的 第n个 。
        • 关于 n 的值：
            1. 0 或 不写 ：什么都选不中 —— 几乎不用。
            1. n ：选中所有子元素 —— 几乎不用。
            1. 1~正无穷的整数 ：选中对应序号的子元素。
            1. 2n 或 even ：选中序号为偶数的子元素。
            1. 2n+1 或 odd ：选中序号为奇数的子元素。
            1. -n+3 ：选中的是前 3 个。

      • 了解即可：

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

    • 三、否定伪类

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

    • 四、UI伪类：

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

    • 五、目标伪类（了解）

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

    • 六、语言伪类（了解）

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

伪元素选择器

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

选择器优先级

  • 概述
    • 通过不同的选择器，选中相同的元素 ，并且为相同的样式名设置不同的值时，就发生了样式的冲突。到底应用哪个样式，此时就需要看优先级了。
  • 简单描述
    • 行内样式 > 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)
      1. 比较规则：按照从左到右的顺序，依次比较大小，当前位胜出后，后面的不再对比，例如：
        	(1,0,0) > (0,2,2)
  	(1,1,0) > (1,0,3)
  	(1,1,3) > (1,1,2)
      1. 特殊规则：
        1. 行内样式权重大于所有选择器。
        1. !important 的权重，大于行内样式，大于所有选择器，权重最高！
Prev Post CSS浮动
Next Post JavaScript 模块化