4种基础选择器的介绍

最新推荐文章于 2023-04-01 22:19:22 发布

Q _Q

最新推荐文章于 2023-04-01 22:19:22 发布

阅读量454

点赞数

分类专栏： CSS3 文章标签： css3 css

本文链接：https://blog.csdn.net/weixin_54021642/article/details/124439619

版权

CSS3 专栏收录该内容

42 篇文章 5 订阅

订阅专栏

基础选择器

作用：选择页面中对应的标签，方便设置样式

1 标签选择器

作用：通过标签名，找到页面中所有这类标签，设置样式

代码：

标签名{

CSS属性名:属性值

}

注意：

1 标签选择器选择的是一类标签，而不是单独某一个

2 标签选择器无论嵌套关系有多深，都能够找到对应的标签

例题：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 1 标签选择器，选中所有p标签，字体颜色为红色 */
        
        p {
            color: red;
        }
    </style>
</head>

<body>
    <p>标签选择器应用1</p>
    <p>标签选择器应用2</p>
    <span>这是一个span标签</span>
</body>

</html>

效果图：

2 类选择器

作用：通过类名，到页面中所有带有这个类名的标签，设置样式

代码：

类名{

CSS属性名:属性值

}

注意：

1 所有标签上都有class属性，class属性的属性值称为类名

2 类名可以由数字、字母、下划线、中划线组成，但不能以数字或中划线开头

3 一个标签可以同时有多个类名，类名之间用空格隔开

4 类名可以重复，一个类选择器可以同时选中多个标签

例题：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 2 类选择器,选中类名为one的标签，字体设置为蓝色 */
        
        .one {
            color: blue;
        }
    </style>
</head>

<body>
    <p class="one">类选择器的应用</p>
    <p>普通的p标签</p>
</body>

</html>

效果图：

3 id选择器

作用：通过id属性值，到页面中所有带有这个id属性值标签，设置样式

代码：

#id属性值{

CSS属性名:属性值

}

注意：

1 所有标签上都有id属性

2 id属性值类似于身份证号码，在一个页面中是唯一的，不可重复

3 一个标签只可以有一个id属性值

4 一个id选择器只能选中一个标签

例题：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 3 id选择器，选中id属性值为two的标签，字体设置为绿色 */
        
        #two {
            color: green;
        }
    </style>
</head>

<body>
    <p>普通的p标签</p>
    <p id="two">id选择器的应用</p>
</body>

</html>

效果图：

4 通配符选择器

作用：找到网页中所有标签，设置样式

代码：

CSS属性名:属性值

}

注意：

1 开发使用极少，只会在极其特殊情况使用

2 在小页面可能会用于去除标签默认的margin和padding

例题：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 4 通配符选择器,选中全部标签，字体大小设置为20px */
        
        * {
            font-size: 50px;
        }
    </style>
</head>

<body>
    <div>div标签</div>
    <p>p标签</p>
</body>

</html>

效果图：