CSS3之基础选择器入门

最新推荐文章于 2022-11-30 21:36:41 发布

tweatherm

最新推荐文章于 2022-11-30 21:36:41 发布

阅读量572

点赞数 1

分类专栏： web前端文章标签： css html html5

本文链接：https://blog.csdn.net/weixin_53360179/article/details/120812321

版权

web前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

基础选择器

要想将 css样式应用指定的 html元素，首先要找到该目标元素。执行这一任务的样式规则部分被称为选择器。

以下是使用选择题指定html元素的格式规则

选择器{属性1:属性值1;属性2:属性值2;}

标记选择器

基本语法格式为：

标记名{属性1:属性值1;属性2:属性值2;}

用标记选择器可以对所有该类型标记都生效
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>

    <style type="text/css">
        p{
            color: red;
        }
    </style>
</head>
<body>
    <p>如何</p>
    <p>学习选择器</p>
</body>
</html>

效果图：
在这里插入图片描述
可以看到，该选择器将的p标签的字体颜色改为了红色。

id选择器和类选择器

id选择器的基本语法格式：

#id名{属性1:属性值1;属性2:属性值2;}

类选择器的基本语法格式是：

#类名{属性1:属性值1;属性2:属性值2;}

类选择器为所有该类的标记设置样式，id选择器为该id的标记设置样式。

对于例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>

    <style type="text/css">
        .A{
            font-size: 24px;
            color:red
        }
        #B{
            color: green;
        }
    </style>
</head>
<body>
    <p class="A">如何</p>
    <p class="A">学习选择器</p>
    <p id="B">学习真难</p>
</body>
</html>

显示
在这里插入图片描述

通配符选择器

基本语法格式

*{属性1:属性值1;属性2:属性值2;}

该选择器为所有的标记设置属性

交集选择器

该选择器由两个选择器构成，其中第一个为标记选择器，第二个为类选择器或者id选择器（选择器之间没有空格），用于匹配同时满足这两个选择器的标记。
基本语法格式

标记名#id名{属性1:属性值1;属性2:属性值2;}

或

标记名.类名{属性1:属性值1;属性2:属性值2;}

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>

    <style type="text/css">
        p.A{
            font-size: 24px;
            color:red
        }
    </style>
</head>
<body>
    <p class="A">如何</p>
    <p class="A">学习选择器</p>
    <p>学习真难</p>
</body>
</html>

效果：
在这里插入图片描述

并集选择器

并集选择器是由各个选择器通过逗号连接而成的，用于选择符合其中至少一项选择器的标记。
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>

    <style type="text/css">
        h4,p.A{
            font-size: 24px;
            color:red
        }
    </style>
</head>
<body>
    <h4>学习笔记</h4>
    <p class="A">如何</p>
    <p class="A">学习选择器</p>
    <p>学习真难</p>
</body>
</html>

效果：
在这里插入图片描述
可以看到该选择器同时为h4标记和类为A的p标记配置了样式

后代选择器

后代选择器用于选择元素或元素组的后代，各个标记用空格隔开，后写的标记是先写标记的后代
基本语法格式

父亲 后代{属性1:属性值1;属性2:属性值2;}

<p>不经巨大的<strong>困难</strong>，
不会有伟大的<strong>事业</strong>。
</p>

可以通过这样设置其中的strong标记

p strong{
            color: red;
        }

tweatherm

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS3之基础选择器入门

css选择器标记选择器id选择器和类选择器通配符选择器交集选择器并集选择器后代选择器要想将css样式应用指定的html元素，首先要找到该目标元素。执行这一任务的样式规则部分被称为选择器。以下是使用选择题指定html元素的格式规则选择器{属性1:属性值1;属性2:属性值2;}标记选择器基本语法格式为：标记名{属性1:属性值1;属性2:属性值2;}用标记选择器可以对所有该类型标记都生效例如：<!DOCTYPE html><html lang="en"><h
复制链接

扫一扫