CSS基础选择器

椒绿个屁i

已于 2023-03-10 10:59:40 修改

阅读量59

点赞数

分类专栏： CSS 文章标签： css 前端 html

于 2023-03-08 21:48:48 首次发布

本文链接：https://blog.csdn.net/w1520410127/article/details/129411300

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1、标签选择器

<head>
<style>
    p {
        color: blue;
    }
</style>
<head>
<body>
    <p>你来打我呀～</p>
</body>

作用：标签选择器可以把某一类标签全部选择出来，比如：所有的p标签。

优点：能快速为页面中同类型的标签统一设置样式。

缺点：不能设计差异化样式。

2、类选择器（口诀：样式点定义，结构类（class）调用）

<head>
<style>
    .red {
        color: yellow;
    }
</style>
<head>
<body>
    <p class = "red">你来打我呀～</p>
</body>

作用：如果想要差异化选择不同的标签，单独选一个或者多个标签，可以使用类标签。

注意：

1、类选择器使用"."来进行标识，后面紧跟类名（自定义）。

2、命名要有意义，尽量使用别人能看懂的类名。

3、不要使用纯数字、中文等命名，尽量使用英文字母来表示。

3、类选择器-多类名（多个类名中间必须用空格分开）

<head>
<style>
    .yellow {
        wight: 35px;
        height: 25px;
    }

    .red {
        color: red;
    }

    .blue {
        color: blue;
    }
</style>
<head>
<body>
    <div class="yellow red">话不多说</div>
    <div class="yellow blue">请叫我大帅哥</div>
</body>

作用：

1、把一些标签元素相同的样式（共同的部分）放到一个类里面。

2、这个些标签可以调用公共的类，然后再调用自己独有的类。

3、节省css代码，统一修改也非常方便。

4、ID选择器（口诀：样式“#”定义，结构id调用）

<head>
<style>
    #red {
        color: red;
    }

    #blue {
        color: blue;
    }
</style>
<head>
<body>
    <div id="red">话不多说</div>
    <div id="blue">请叫我大帅哥</div>
</body>

注意：

1、id选择器和类选择器最大的不同在于使用次数。

2、只能调用一次，别人切勿使用。

5、通配符选择器（样式“*”定义，表示选取页面中所有的标签）

<head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

</style>
<head>
<body>
    <div>话不多说</div>
    <div>请叫我大帅哥</div>
</body>

注意：

1、通配符选择器不需要调用，自动就给所有的元素使用样式。

2、特殊情况才使用，用来清除所有元素标签的内外边距。

优先级：ID选择器>类选择器>标签选择器

椒绿个屁i

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS基础选择器

2、这个些标签可以调用公共的类，然后再调用自己独有的类。如果想要差异化选择不同的标签，单独选一个或者多个标签，可以使用类标签。标签选择器可以把某一类标签全部选择出来，比如：所有的p标签。2、命名要有意义，尽量使用别人能看懂的类名。3、不要使用纯数字、中文等命名，1、id选择器和类选择器。2、特殊情况才使用，，自动就给所有的元素使用样式。用来清除所有元素标签的内外边距。只能调用一次，别人切勿使用。，表示选取页面中所有的标签）同类型的标签统一设置样式。相同的样式（共同的部分）最大的不同在于使用次数。
复制链接

扫一扫