css选择器标签选择器和id选择器

最新推荐文章于 2024-06-29 20:56:07 发布

小鱼的池塘

最新推荐文章于 2024-06-29 20:56:07 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端基础语言从学习文章标签： css 标签界面

本文链接：https://blog.youkuaiyun.com/haha_hello/article/details/54951477

前端基础语言从学习专栏收录该内容

27 篇文章

订阅专栏

本文介绍了CSS中的两种基本选择器：标签选择器和ID选择器。标签选择器用于为所有相同类型的标签设置统一样式，而ID选择器则针对具有特定ID的单一元素进行样式设置。文章通过实例展示了如何使用这两种选择器。

一，标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>08-css标签选择器.html</title>
    <!--
        标签选择器,根据指定的标签名称,找到当前界面所有的该名称的标签,然后设置属性
        1,格式:
        2,注意点:
        (1),标签选择器选中的是当前界面所有的标签,而不是选择的某个标签
        (2),不管藏得多深,都会被选中
    -->

    <style>
        p{
            color: red;
        }
    </style>
</head>
<body>
<p>我是标签选择器</p>
<p>我是标签选择器</p>
<p>我是标签选择器</p>
<p>我是标签选择器</p>

<ul>
    <li>你好</li>
    <li>你好</li>
    <li>你好</li>
</ul>
</body>
</html>

二，id选择器

<!--
        id选择器,根据指定id找到对应的标签,然后设置属性
        1,格式:
        #id的属性值{
            属性名称:属性值;
        }
        2,注意点:
        (1),id命名,不能以数字开头
        (2),id命名格式包括字母、数字、下划线
        (3),不能是标签的名称
        (4),在编写id选择器时,一定要在id前面加上#
        (5),在同一界面中id命名不能重复
        (6),仅仅是为了设置样式,一般不会用id,因为id是留给js开发用的
    -->

    <style>
        #id1{
            color: red;
        }
        #id2{
            color: lightcoral;
        }
        #id3{
            color: greenyellow;
        }
        #id4{
            color: purple;
        }
    </style>

<h1>成功法则</h1>
<p id="id1">迟到毁一生</p>
<p id="id2">早退穷三代</p>
<p id="id3">按时上下班</p>
<p id="id4">终成高富帅</p>