学习记录 --【零基础CSS学习】04.通用选择器和后代选择器

最新推荐文章于 2024-03-28 20:09:35 发布

钟情于山海

最新推荐文章于 2024-03-28 20:09:35 发布

阅读量587

点赞数 1

文章标签： css 学习 html

本文链接：https://blog.csdn.net/m0_37612107/article/details/124683946

版权

一、通用选择器(一般用不上，有时会使用一次)

二、后代选择器

一、通用选择器(一般用不上，有时会使用一次)

1.可以选中页面中的所有元素。
2.使用通配符"*"进行选择

示例：选择所有元素字体颜色变成红色，字体字号变成24px

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通用选择器</title>
    <style type="text/css">
        *{
            color: red;
            font-size:24px;
        }
    </style>
</head>
<body>
    <div>我想打游戏</div>
    <p>我好想睡觉</p>
    <a href="">我要去学习</a><br>
    <span>我要吃饭啦！</span>
</body>
</html>

二、后代选择器

1.描述的是一种祖先结构关系，并不一定是父子关系
2.使用时祖先和后代之间要用一个空格隔开

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代选择器</title>
    <style type="text/css">
        .enj .ls{
            color: red;
        }
        .yb .ww{
            color: blue;
        }
    </style>
</head>
<body>
    <div class="ynj">
        <ul class="yb">
            <li class="zs">张三</li>
            <li class="ls">李四</li>
            <li class="ww">王五</li>
            <li class="zl">赵六</li>
        </ul>
    </div>

    <div class="enj">
        <ul class="sb">
            <li class="zs">张三</li>
            <li class="ls">李四</li>
            <li class="ww">王五</li>
            <li class="zl">赵六</li>
        </ul>
    </div>
</body>
</html>

钟情于山海

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习记录 --【零基础CSS学习】04.通用选择器和后代选择器

目录一、通用选择器(一般用不上，有时会使用一次)二、后代选择器一、通用选择器(一般用不上，有时会使用一次)1.可以选中页面中的所有元素。2.使用通配符"*"进行选择示例：选择所有元素字体颜色变成红色，字体字号变成24px<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>通用选择器</title> ...
复制链接

扫一扫