CSS三种基本选择器

最新推荐文章于 2024-03-06 17:08:15 发布

散人不修

最新推荐文章于 2024-03-06 17:08:15 发布

阅读量138

点赞数

分类专栏： Java自学

本文链接：https://blog.csdn.net/weixin_44549331/article/details/115298699

版权

Java自学专栏收录该内容

13 篇文章 0 订阅

订阅专栏

选择器

基本选择器

1、标签选择器：选择一类标签标签{}
示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1{
            color:#a13d30;
            background: #3cbda6;
            border: 24px;
        }
        p{
            font-size: 80px;
        }
    </style>
</head>
<body>
<h1>学java</h1>
<h1>学Java</h1>
<p>听狂神说</p>
</body>
</html>

2、类选择器 class：选择所有class属性一致的标签，跨标签 .类名{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .qing{
            color: #3cbda6;
        }
        .ko{
            color:#a13d30;
        }
    </style>
</head>
<body>
<h1 class="qing">标题1</h1>
<h1 class="ko">标题2</h1>
<h1>标题3</h1>
</body>
</html>

3、ID选择器:全局唯一！ #id名{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #qingjing{
            color: #ff008a;
        }
        .style1{
            color: #a13d30;
        }
        h1{
            color: green;
        }
    </style>
</head>
<body>
<h1 class="style1" id="qingjing">标题1</h1>
<h1 class="style1">标题2</h1>

</body>
</html>

散人不修

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS三种基本选择器

选择器基本选择器1、标签选择器：选择一类标签标签{}示例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> h1{ color:#a13d30; background: #3cbda6;
复制链接

扫一扫