标签选择器，类选择器，id选择器

最新推荐文章于 2023-09-20 11:08:31 发布

原创最新推荐文章于 2023-09-20 11:08:31 发布 · 839 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#标签选择器 #类选择器 #id选择器

标签选择器，类选择器，id选择器专栏收录该内容

1 篇文章

订阅专栏

本文通过实例详细介绍了CSS中三种主要的选择器：标签选择器、类选择器和ID选择器的作用范围及应用方式。标签选择器适用于所有匹配标签；类选择器应用于所有class值相同的情况；而ID选择器则因为ID的唯一性只针对特定元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        /*标签选择器：作用于当前页面所有匹配标签*/
        li{
            color: red;
        }
        /*类选择器：作用于当前页面所有class值为red的标签*/
        .red{
           color:bisque;
        }
        /*id选择器：id具有唯一性*/
        #z
        {
            color: aqua;
        }
    </style>
    <title>选择器</title>
</head>
<body>
    <ul>
        <li style="color: aqua">1</li>
        <li style="color: aqua">2</li>
        <li style="color: aqua">3</li>
        <li style="color: aqua">4</li>
    </ul>


    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>

    <ul>
        <li>1</li>
        <li class="red">2</li>
        <li>3</li>
        <li class="red">4</li>
    </ul>


    <ul>
        <li id="z">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>



</body>
</html>