首页 > 文章 > 前端

“不同类型的 CSS 选择器”

来源：dev.to

时间：2025-01-15 10:15:09 441浏览收藏

golang学习网今天将给大家带来《“不同类型的 CSS 选择器”》，感兴趣的朋友请继续看下去吧！以下内容将会涉及到等等知识点，如果你是正在学习文章或者已经是大佬级别了，都非常欢迎也希望大家都能给我建议评论哈~希望能帮助到大家！

css 中选择器的类型：

image description

类别选择器：

代码：

<body>
    <p class="heighlight">class of "heighlight".</p>
    <p>does not have any specific class.</p>
    <p class="heighlight">a class of "heighlight".</p>
</body>

<style>
.heighlight {
    color: red;
    font-weight: bold;
}
</style>

id选择器：

代码：

<body>
    <h1 id="main-heading">this h1 has an id</h1>
    <p>this paragraph does not have an id</p>
    <p id="intro-paragraph">this paragraph has an id</p>
</body>

<style>
#main-heading {
    color: blue;
    font-size: 24px;

}

#intro-paragraph {
    background-color: yellow;
    padding: 10px;

}
</style>

元素选择器：

<body>
    <h1>welcome to my website</h1>
    <p>this is a paragraph</p>
    <p>this is another paragraph</p>
    <a href="https:///www.google.com">visit example website</a>
</body>

<style>
    h1 {
        color: blue;
    }
    p {
      font-size: 16px;

    }
    a {
        text-decoration: none;
        color: red;
    }
</style>

通用选择器

代码：

<body>
    <h1>welcome to my website</h1>
    <p>this is a paragraph</p>
    <div>
        <h2>about us</h2>
        <p>this is another paragraph</p>
    </div>
</body>

<style>
*{
    margin: 0;
    padding: 0;
    border: 1 px solid;
}
</style>

分组选择器：

代码：

<body>
    <h1>welcome to my website</h1>
    <p>this is a paragraph.</p>
    <a href="#">click me</a>
    <button>submit</button>
</body>

<style>
    h1,p {
        color: blue;
    }
    a,button {
        background-color: yellow;
        padding: 10px;
    }
</style>

属性选择器：

代码：

<form>
    <label for="name">name:</label>
    <input type="text" id="name" required />
    <input type="submit" value="submit" />
</form>

<style>
    input[type="submit"] {
        background-color: #4caf50;
        color: white;
    }
    input[required] {
        border: 1px solid red;
    }
</style>

今天关于《“不同类型的 CSS 选择器”》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！

声明：本文转载于：dev.to 如有侵犯，请联系study_golang@163.com删除