常用的CSS选择器

最新推荐文章于 2024-09-09 13:46:41 发布

路痴先森

最新推荐文章于 2024-09-09 13:46:41 发布

阅读量37

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/qq_57162921/article/details/133644353

版权

本文详细介绍了CSS选择器的五种类型：标签选择器、id选择器、class选择器、通配选择器以及它们的使用规则和权重，还提到了内联样式和伪类选择器的应用。

摘要由CSDN通过智能技术生成

常用的CSS选择器

1.标签选择器

语法：标签名{}

注意：会波及其他的同名标签的内容

示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            color: red;
        }
    </style>
</head>

<body>
    <center>
        <h1>登高</h1>
        <h3>杜甫</h3>
        <p>风急天高猿啸哀，渚清沙白鸟飞回</p>
        <p>无边落木萧萧下，不尽长江滚滚来</p>
        <p>万里悲秋常作客，百年多病独登台</p>
        <p>艰难苦恨繁霜鬓，潦倒新停浊酒杯</p>
    </center>
</body>

</html>

效果图：

2.id选择器

语法：#id属性值{}

注意：id属性值不能以数字、汉字开头，而且id的属性值不能重复

示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #p1 {
            color: red;
        }
    </style>
</head>

<body>
    <center>
        <h1>登高</h1>
        <h3>杜甫</h3>
        <p id="p1">风急天高猿啸哀，渚清沙白鸟飞回</p>
        <p>无边落木萧萧下，不尽长江滚滚来</p>
        <p>万里悲秋常作客，百年多病独登台</p>
        <p>艰难苦恨繁霜鬓，潦倒新停浊酒杯</p>
    </center>
</body>

</html>

效果图：

3.class选择器

语法：.class属性值{}

类似于id选择器，不同在于class属性值可以重复

示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .pp {
            color: red;
        }
    </style>
</head>

<body>
    <center>
        <h1>登高</h1>
        <h3>杜甫</h3>
        <p>风急天高猿啸哀，渚清沙白鸟飞回</p>
        <p class="pp">无边落木萧萧下，不尽长江滚滚来</p>
        <p class="pp">万里悲秋常作客，百年多病独登台</p>
        <p>艰难苦恨繁霜鬓，潦倒新停浊酒杯</p>
    </center>
</body>

</html>

效果图:

4.通配选择器

开发中用来清除默认样式

示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* * {
            margin: 0;
            padding: 0;
        } */
    </style>
</head>

<body>
    <center>
        <h1>登高</h1>
        <h3>杜甫</h3>
        <p>风急天高猿啸哀，渚清沙白鸟飞回</p>
        <p>无边落木萧萧下，不尽长江滚滚来</p>
        <p>万里悲秋常作客，百年多病独登台</p>
        <p>艰难苦恨繁霜鬓，潦倒新停浊酒杯</p>
    </center>
</body>

</html>

效果图：

对比实例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <center>
        <h1>登高</h1>
        <h3>杜甫</h3>
        <p>风急天高猿啸哀，渚清沙白鸟飞回</p>
        <p>无边落木萧萧下，不尽长江滚滚来</p>
        <p>万里悲秋常作客，百年多病独登台</p>
        <p>艰难苦恨繁霜鬓，潦倒新停浊酒杯</p>
    </center>
</body>

</html>

对比效果图：