Javaweb-CSS常用选择器

最新推荐文章于 2022-04-07 22:25:38 发布

宁啊宁啊宁啊

最新推荐文章于 2022-04-07 22:25:38 发布

阅读量242

点赞数

分类专栏： Javaweb 文章标签：标签选择器 id选择器 class选择器组合选择器 CSS样式

本文链接：https://blog.csdn.net/qq_45739810/article/details/115694348

版权

Javaweb 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1.标签名选择器
标签名选择器的格式是：标签名{
属性：值;
}
标签名选择器，可以决定哪些标签被动的使用这个样式。
举个栗子：在所有 div 标签上修改字体颜色为蓝色，字体大小 30 个像素。边框为 1 像素黄色实线。并且修改所有 span 标签的字体颜色为黄色，字体大小 20 个像素。边框为 5 像素蓝色虚线

<!DOCTYPE html>
<html lang="en"><head>
    <meta charset="UTF-8">
    <title>标签名选择器</title>
    <style type="text/css">
        div {
            border: 1px solid red;
            color: red;
            font-size: 20px;
        }

        span {
            border: 5px dashed blue;
            color: yellow;
            font-size: 20px;
        }
    </style>
 </head>
<body>

<div>div 标签 1</div>
<div>div 标签 2</div>
<span>span 标签 1</span>
<span>span 标签 2</span>


</body>
</html>

在这里插入图片描述

2.id选择器
id 选择器的格式是： #id 属性值{
属性：值;
}
id 选择器，可以让我们通过 id 属性选择性的去使用这个样式
举个栗子：第一个 div 标签定义 id 为 id001 ，然后根据 id 属性定义 css 样式修改字体颜色为蓝色，字体大小 6 个像素。边框为 2 像素红色实线。第二个 div 标签定义 id 为 id002 ，然后根据 id 属性定义 css 样式修改的字体颜色为黄色，字体大小 100 个像素。边框为 2 像素黄色点线。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>id选择器</title>
    <style type="text/css">
        #id001 {
            border: 2px solid red;
            color: blue;
            font-size: 6px;
        }

        #id002 {
            border: 2px dotted yellow;
            color: blueviolet;
            font-size: 100px;
        }
    </style>
</head>
<body>
<div id="id001">div1</div>
<div id="id002">div2</div>
<!--id不可重复-->
</body>
</html>

在这里插入图片描述
3.class选择器（类选择器）
class 类型选择器的格式是： .class 属性值{
属性：值;
}
class 类型选择器，可以通过 class 属性有效的选择性地去使用这个样式
举个栗子：修改 class 属性值为 class01 的 span 或 div 标签，字体颜色为蓝色，字体大小 30 个像素。边框为 1 像素黄色实线。修改 class 属性值为 class02 的 div 标签，字体颜色为灰色，字体大小 26 个像素。边框为 1 像素红色实线。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>class类型选择器</title>
    <style type="text/css">
        .class001 {
            border: 5px solid red;
            color: blueviolet;
            font-size: 10px;
        }

        .class002 {
            border: 100px solid yellow;
            color: blanchedalmond;
            font-size: 20px;
        }
    </style>
</head>
<body>
<div class="class001">div1</div>
<div class="class002">div2</div>
<div class="class001">div3</div>
<!--class标签可以重复-->
</body>
</html>

在这里插入图片描述
4.组合选择器
组合选择器的格式是：选择器 1，选择器 2，选择器 n{
属性：值;
}
组合选择器可以让多个选择器共用同一个 css 样式代码。
举个栗子：修改 class=“class01” 的 div 标签和 id=“id01” 所有的 span 标签，字体颜色为黄色，字体大小 20 个像素。边框为 1 像素红色实线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组合选择器</title>
    <style type="text/css">
        .class001, #id001 {
            border: 10px solid red;
            color: yellow;
            font-size: 20px;
        }
    </style>
</head>
<body>
<div id="id001">div1</div>
<div class="class001">div2</div>
</body>
</html>

在这里插入图片描述

宁啊宁啊宁啊

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Javaweb-CSS常用选择器

1.标签名选择器标签名选择器的格式是：标签名{属性：值;}标签名选择器，可以决定哪些标签被动的使用这个样式。举个栗子：在所有 div 标签上修改字体颜色为蓝色，字体大小 30 个像素。边框为 1 像素黄色实线。并且修改所有 span 标签的字体颜色为黄色，字体大小 20 个像素。边框为 5 像素蓝色虚线<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &l
复制链接

扫一扫

专栏目录