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

最新推荐文章于 2022-01-15 21:07:56 发布

Ace_bb

最新推荐文章于 2022-01-15 21:07:56 发布

阅读量296

点赞数

分类专栏： HTML、CSS、JS 文章标签： html css

本文链接：https://blog.csdn.net/Ace_bb/article/details/104263485

版权

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

15 篇文章 0 订阅

订阅专栏

选择器

选择器的作用

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

选择器分类

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

基础选择器

基础选择器就是由单个选择器构成
基础选择器又可以分为 标签选择器、类选择器、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>

输出结果：

Ace_bb

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS学习总结基础篇 CSS选择器

选择器选择器的作用选择器就是根据不同需求把不同的标签选出来，然后针对性性的进行样式设定通过选择器，我们还可以实现各种复杂的指定，同时也能大量减少样式表的代码书写量，最终书写出来的样式表也会变得简洁明了。即把某个标签选择出来示例代码：选择器分类选择器分为基础选择器和复合选择器两大类。基础选择器基础选择器就是由单个选择器构成基础选择器又可以分为标签选择器、类选择器、id选择器和通...
复制链接

扫一扫