CSS 选择器进阶

  1. 复合选择器

  • 后代选择器: 空格
    作用：

    根据 HTML 标签的嵌套关系，选择父元素 后代中 满足条件的元素
    选择器语法：

    选择器1 选择器2 { css }

    结果：

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

    注意点：
    1. 后代包括：儿子、孙子、重孙子……
    2. 后代选择器中，选择器与选择器之前通过 空格 隔开

  • 子代选择器：>

    作用：

    根据 HTML 标签的嵌套关系，选择父元素 子代中 满足条件的元素
    选择器语法：

    选择器1 > 选择器2 { css }

    结果：

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

    注意点：
    1. 子代只包括：儿子
    2. 子代选择器中，选择器与选择器之前通过 > 隔开

  1. 并集选择器：

    作用：

    同时选择多组标签，设置相同的样式
    选择器语法：选择器1 ， 选择器2 { css }

    结果：

    找到 选择器1 和 选择器2 选中的标签，设置样式

    注意点：

    1. 并集选择器中的每组选择器之间通过 , 分隔
    2. 并集选择器中的每组选择器可以是基础选择器或者复合选择器
    3. 并集选择器中的每组选择器通常一行写一个，提高代码的可读性

  2. 交集选择器

    作用：

    选中页面中 同时满足 多个选择器的标签
    选择器语法：选择器1选择器2 { css }

    结果：

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

    注意点：

    1. 交集选择器中的选择器之间是紧挨着的，没有东西分隔
    2. 交集选择器中如果有标签选择器，标签选择器必须写在最前面

  3. emmet语法

    作用：

    通过简写语法，快速生成代码

    语法：

记忆示例效果
标签名div<div></div>
类选择器.red<div class="red"></div>
id选择器#one<div id="one"></div>
交集选择器p.red#one<p class="red" id="one"></p>
子代选择器ul>li<ul><li></li></ul>
内部文本ul>li(我是li的内容)<ul><li>我是li的内容</li></ul>
创建多个ul>li*3<ul><li></li><li></li><li></li></ul>

  1. hover伪类选择器

    作用：

    选中鼠标悬停在元素上的状态，设置样式

    选择器语法：

    选择器:hover { css }

    注意点：

    伪类选择器选中的元素的某种状态

  2. 目标:

    能够理解复合选择器的规则, 并使用复合选择器在HTML中选择元素

选择器作用格式示例
后代选择器找后代选择器之间通过空格分隔.father .son { css }
子代选择器找儿子选择器之间通过 > 分隔.father > .son { css }
并集选择器找到多类元素选择器之间通过该 , 分隔div, p, span { css }
交集选择器找同时满足多个选择器的元素选择器之间紧挨着p.red { css }
hover伪类选择器选中鼠标悬停在元素上的状态:hovera:hover { css }
版权声明：本文为qq_41421033原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。