CSS篇一——（3）

lewis 1年前 (2024-04-02) 阅读数 5 #技术

一、id选择器

id选择器可以为标有特定的id的HTML元素指定特定的样式。 HTML元素以id属性来设置id选择器，CSS中id选择器以**"#"来定义**。

1. 使用方式1.1 语法

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

如：将id为nav元素中的内容设置为红色

#nav {
  color: red;
}

代码示例：

<!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>id选择器</title>
    <style>
        /* id选择器的口诀:样式#定义,结构id调用，只能调用一次，别人切勿使用 */
        #pink {
            color: pink;
        }
    </style>
</head>
<body>
    <div id="pink">夏洛克·福尔摩斯</div>
    <div>柯南·道尔</div>
</body>
</html>

1.2 id选择器和类选择器的区别

1.类选择器（class）就如同人的名字，一个人可以有多个名字，同时一个名字可以被多个人使用。

2.id选择器就像人的身份证号码，是唯一的，不得重复。

3.id选择器和类选择器最大的不同在于使用次数上。

4.类选择器在修改样式中用的最多，id选择器一般用于唯一性的元素上，经常和JavaScript搭配使用。

1.3 总结

id选择器的口诀:样式#定义,结构id调用，只能调用一次，别人切勿使用。

二、通配符选择器

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

1. 使用方式1.1 语法

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

通配符选择器不需要调用，自动给所有的元素使用样式；特殊情况才使用，如清除所有元素标签的内外边距，后面涉及的时候详细描述。

代码示例：

<!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>通配符选择器</title>
    <style>
        /* * 把这里的html body div span li p h2等标签都改为了红色 */
        * {
            color: red;
        }
    </style>
</head>
<body>
    <div>天空</div>
    <span>大海</span>
    <ul>
        <li>星辰</li>
    </ul>
    <p>高山</p>
    <h2>流水</h2>
</body>
</html>

三、基础选择器总结

基础选择器

作用

特点

使用情况

用法

标签选择器

可以选出所有相同的标签

不能差异化选择

较多

p { color: red; }

类选择器

可以选出1个或者多个标签

可以根据需求选择

非常多

.nav { color: red; }

id选择器

一次只能选择1个标签

ID属性只能在每个HTML文档中出现一次

一般和js搭配

#nav { color: red; }

通配符选择器

选择所有的标签

选择的太多，有部分不需要

特殊情况使用

* { color: red; }

每个基础选择器都有使用场景，都需要掌握；如果是修改样式，类选择器是使用最多的。

版权声明

本文仅代表作者观点，不代表博信信息网立场。

上一篇： Java常量和变量在使用上有以下几个区别：值的可变性：常量的值在初始化之后不能被修改，而变量的值可以被修改下一篇：哪个云服务器好?如何选出性价比高的云服务器?

CSS篇一——（3）

版权声明

作者文章