CSS学习总结基础篇 CSS选择器

最新推荐文章于 2024-04-06 05:21:41 发布

原创最新推荐文章于 2024-04-06 05:21:41 发布 · 358 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#html #css

HTML、CSS、JS 专栏收录该内容

15 篇文章

订阅专栏

本文深入解析CSS选择器的功能与应用，涵盖标签、类、ID及通配选择器，示例丰富，助您掌握高效样式设定技巧。

选择器

选择器的作用

选择器就是根据不同需求把不同的标签选出来，然后针对性性的进行样式设定
通过选择器，我们还可以实现各种复杂的指定，同时也能大量减少样式表的代码书写量，最终书写出来的样式表也会变得简洁明了。
即把某个标签选择出来
示例代码：

选择器分类

选择器分为基础选择器和复合选择器两大类。

基础选择器

基础选择器就是由单个选择器构成
基础选择器又可以分为 标签选择器、类选择器、id选择器和通配选择器

标签选择器

标签选择器(元素选择器)是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。
语法格式：
标签名 {
属性1：属性值1；
属性2：属性值2；
属性3：属性值3；
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签选择器</title>
    <style>
        p{
            color: red;
        }
        div{
            color: yellow;
        }
    </style>
</head>
<body>
    <p>第一个标签</p>
    <p>第二个标签</p>
    <div>第三个标签</div>
    <div>第四个标签</div>
</body>
</html>

< style >写在< head >标签里，直接引用标签名加大括号。是对所用使用相同标签的内容进行样式设定。如图：

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

标签和所有的

标签。
优点
能快速为页面中同类型的标签统一设置样式。
缺点
不能设计差异化样式,只能选择全部的当前标签。

类选择器

为了能够针对某个特定的标签进行设计，而不是全部同名标签进行设定，就可以用类选择器。类选择器可以差异化选择不同的标签，单独选一个或某几个标签。
语法格式：
.类名{
属性1：属性值1；
…
}
注意是一个点**.**加类名
示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签选择器</title>
    <style>
        .red{
            color:red;
        }
    </style>
</head>
<body>
    <p class="red">第一个标签</p>
    <p>第二个标签</p>
    <div class="red">第三个标签</div>
    <div>第四个标签</div>
</body>
</html>

输出结果：

就是在head内用样式点定义，在标签内用结构类class调用，可以一个或多个标签调用，这是开发时最常用的方法。
点后面的名字可以任意取，但是不能和标签名相同
注意事项：
①类选择器使用"."(英文点号)进行标识,后面紧跟类名(自定义).
②可以理解为给这个标签起了一个名字,
③长名称或词组可以使用中横线来为选择器命名。
④不要使用纯数字、中文等命名,尽量使用英文字母来表示
⑤命名要有意义,尽量使别人-眼就知道这个类名的目的。

类选择器多类名

我们可以给一个标签指定多个类名 ,从而达到更多的选择目的。就是一个标签有多个名字. 每个类名必须用空格分开
格式：

    <div class="red box">第一个是红色</div>
    <div class="green box">第二个是绿色</div>

类名之间必须用空格隔开
示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签选择器</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
        }
        .red{
            background-color: red;
        }
        .green{
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="red box">第一个是红色</div>
    <div class="green box">第二个是绿色</div>
    <div class="red box">第三个是红色</div>
    <div class="green box">第三个是绿色</div>
</body>
</html>

样式结果：

此时可以直接在box里面修改所有方格的长宽高属性。

(1)可以把一些标签元素相同的样式(共同的部分)放到一个类里面.
(2)这些标签都可以调用这个公共的类然后再调用自己独有的类.
(3)从而节省CSS代码,统-修改企非常方便.

id选择器

id选择器可以为标有特定id的HTML元素指定特定的样式。
HTML元素以id属性来设置id选择器, CS中id选择器以**"#"**来定义。
语法格式：
#id名{
属性1；属性值1；
…
}
调用直接在标签内调用。
注意是先用#id名定义样式，再在标签内调用
示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签选择器</title>
    <style>
        #pink{
            color: pink;
        }
    </style>
</head>
<body>
<div id="pink">这是一个用id选择器设定的标签</div>
</body>
</html>

输出结果：
id选择器只能调用一次，其他标签不能调用已经被调用的id，而类选择器是可用被多次调用的。

通配选择器

通配选择器表示选取页面内的所有标签，包括body，head，等等；
不需要调用通配选择器，自动讲所有元素标签使用样式。
语法格式：

*{
属性：属性值；
…
}
示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签选择器</title>
    <style>
        * {
            color: red;
        }
    </style>
</head>
<body>
    <div>这是一个标签</div>
    <div>这是二个标签</div>
    <div>这是三个标签</div>
    <div>这是四个标签</div>
</body>
</html>

输出结果：