Web前端,CSS选择器进阶,复合、并集、交集、hover伪类选择器和Emmet语法的了解

前言

持续总结输出中,今天讲的是Web前端,CSS选择器进阶,复合、并集、交集、hover伪类选择器和Emmet语法的了解


1、复合选择器

1.1 后代选择器:空格

作用:
根据 HTML 标签的嵌套关系,选择父元素 后代中 满足条件的元素
选择器语法:选择器1 选择器2 { css }

结果:
• 在选择器1所找到标签的后代(儿子、孙子、重孙子…)中,找到满足选择器2的标签,设置样式

代码:

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        /* 找到div的儿子h2 并设置背景颜色是绿色,文字颜色白色 */
        /* 父选择器+空格+后代选择器 {} */
        div h2 {
            background-color: green;
            color: white;
        }
    style>
head>
<body>
    
    <h2>这是一个h2标签h2>
    <div>
        <h2>这是div的儿子h2h2>
    div>
body>
html>

注意点:

  1. 后代包括:儿子、孙子、重孙子…
  2. 后代选择器中,选择器与选择器之前通过 空格 隔开

1.2 子代选择器:>

作用:
根据 HTML 标签的嵌套关系,选择父元素 子代中 满足条件的元素

选择器语法:
选择器1 > 选择器2 { css }

结果:
• 在选择器1所找到标签的子代(儿子)中,找到满足选择器2的标签,设置样式

代码:

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        /* 空格隔开的是后代, 儿子,孙子,重孙子 */
        /* div a {
            color: green;
        } */

        /* 只想选中儿子a */
        /* div的儿子a文字颜色是绿色 */
        div>a {
            color: green;
        }
    style>
head>
<body>
    <div>
        父级
        <a href="#">这是div里面的aa>
        <p>
            <a href="#">这是div里面的p里面的aa>
        p>
    div>
body>
html>

注意点:

  1. 子代只包括:儿子
  2. 子代选择器中,选择器与选择器之前通过 > 隔开

2、并集选择器

作用:
同时选择多组标签,设置相同的样式

选择器语法:
选择器1 , 选择器2 { css }

结果:
• 找到 选择器1 和 选择器2 选中的标签,设置样式

代码:

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        /* p div span h1 文字颜色是绿色 */
        /* 选择器1, 选择器2 {} */
        p, 
        div, 
        span, 
        h1 {
            color: green;
        }
    style>
head>
<body>
    <p>ppp改变信念是很难的,你不可能因为学了前面的知识就能马上把固定型思维换成新的成长型思维,这需要练习。随着新的信念和想法越来越强,你才能逐渐获得新的思考和处理方式。p>
    <div>div说到想法和信念,不得不提大脑的运作方式。div>
    <span>span很多人都认为,有的人天生聪明,有的人就是天生比较笨。但最新的研究证明:大脑更像肌肉——它会发生改变,而且你越使用它,它就变得越强壮。span>
    <h1>h1你学习新事物时,大脑里那些微小的连接就会增加,大脑会成长,变得更强壮。h1>

    <h2>h2你越挑战自己的思维去进行学习,你的大脑细胞就会越多。h2>
body>
html>

注意点:

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

3、交集选择器

作用:
选中页面中 同时满足 多个选择器的标签

选择器语法:
选择器1选择器2 { css }

结果:
• (既又原则)找到页面中 既 能被选择器1选中,又 能被选择器2选中的标签,设置样式

代码:

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        /* p {
            color: red;
        } */

        /* .box {
            color: red;
        } */

        /* 必须是p标签,而且添加了box类 */
        /* p.box {
            color: red;
        } */
        /* #dilireba {
            color: red;
        } */

        .box1 {
            color: green;
        }
    style>
head>
<body>
    
    <p class="box box1" id="dilireba">这是p标签:boxp>
    <p class="box">这是p标签:boxp>
    <p>ppppppp>
    <div class="box">这是div标签:boxdiv>
body>
html>

注意点:

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

4、hover伪类选择器

作用:
选中鼠标悬停在元素上的状态,设置样式

选择器语法:
选择器:hover { css }

代码:

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        /* 悬停的时候文字颜色是红色 */
        a:hover {
            color: red;
            background-color: green;
        }

        /* 用户鼠标悬停到div的时候, 文字是绿色 */
        div:hover {
            color: green;
        }
    style>
head>
<body>
    <a href="#">这是超链接a>
    
    <div>divdiv>
body>
html>

注意点:

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

5、Emmet语法

作用:
VS Code中通过简写语法,快速生成代码

语法:
• 类似于刚刚学习的选择器的写法

Web前端,CSS选择器进阶,复合、并集、交集、hover伪类选择器和Emmet语法的了解_第1张图片

6、总结

Web前端,CSS选择器进阶,复合、并集、交集、hover伪类选择器和Emmet语法的了解_第2张图片

本次的分享就到这里了!!!感谢大家支持,大家的支持是我努力的动力

你可能感兴趣的:(HTML+CSS,html5,Web开发,前端)