CSS基础选择器

寒涵含

已于 2024-02-18 12:37:41 修改

阅读量134

点赞数 10

文章标签： css 前端

于 2024-02-18 12:36:53 首次发布

本文链接：https://blog.csdn.net/qq_73625238/article/details/136149684

版权

一,CSS基础选择器

(一)CSS选择器的作用

1.在同一个选择器中命名相同属性的不同个体的值

<div>我是div</div>
<div>我是div</div>

2.通过CSS的选择标签

a.找到所有对应标签

b.设置这些标签的样式,比如颜色为红色

3.优先级

id选择器 >类选择器>标签选择器

(二)CSS选择器分类

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

1.基础选择器

a.基础选择器是由单个选择器组成的

b.基础选择器又包括:标签选择器,类选择器,id选择器和通配选择器

2.标签选择器

标签选择器(元素选择器)是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式.(不能差异化设置)

<div>我是div</div>
<div>我是div</div>

3.类选择器

(1)同一标签,差异化表示(

语法(将拥有该类名的HTML元素均为该属性)

.类名 {
    属性1: 属性值1;
    ...
}

注意：a.使用类名时不要与HTML属性重复如：div p 等

b.使用时不要使用汉字，尽量要有意义

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .red {
            color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li class="red">我是一个类</li>
        <li>我是一个选</li>
        <li>我是一个择</li>
        <li>我是一个器</li>
    </ul>
</body>

(2)类选择器-多类名

给一个标签指定多个类名，达到多目标选择。所有类名都可以选出这个标签

a.多类名使用方式

<div class="red font">hanhanhan</div>

(a)可以在class中写多个类名

(b)多个类名之间使用空格分开

(c)该标签这样将获得class中所有属性

b.使用场景

减少代码量，使用方便

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        .red{
            color: red;
        }
        .font {
            font: 35px;
        }
    </style>
</head>
<body>
    <div class="red font">hanhanhan</div>
</body>

4.id选择器

a.id选择器可以为表有特定id的HTML元素指定特定的样式

b.HTML中有id属性设置CSS中的id选择器“#”

c.id选择器：只能调用一次

语法

#id名 {
    属性1: 属性值1;
    ...
}

注释：id选择器和类选择器的区别

a.类选择器可以一对多，也可以多对一

b.id选择器不可以重复

c.类选择器在修改样式中使用最多，id选择器一般为页面唯一元素，常和javascipt使用

5.通配符选择器

a.在CSS中，通配符选择器使用“*”定义，它表示选取页面中所有元素（标签）。

b.通配符选择器不需要调用，自动给全部元素使用样式

特殊情况使用：清楚所有的元素的内外边距

* {
    margin: 0;
    padding: 0;
}

语法：

* {
    属性1: 属性值1;
    ...
}

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            color: red;
        }
    </style>
    <!-- *把body及其内部所有都进行改变 -->
</head>
<body>
    <div>123</div>
    <span>123</span>
    <ul>
        <li>123</li>
    </ul>
</body>