CSS基础选择器——CSS学习笔记（2）

露球

已于 2022-12-04 20:31:12 修改

阅读量149

点赞数

分类专栏： CSS学习笔记文章标签： css 学习 css3 前端

于 2022-11-16 23:10:21 首次发布

本文链接：https://blog.csdn.net/Enuyinx/article/details/127895475

版权

CSS学习笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS选择器的各个类型和用法，包括标签选择器、类选择器、id选择器、通配符选择器。类选择器常用于差异化选择不同标签，而id选择器适用于页面唯一元素。通过实例展示了如何使用这些选择器来设置样式，强调了选择器在节省代码和提高效率方面的重要性。同时，提到了通配符选择器在特殊场景下的应用，如清除元素内外边距。

摘要由CSDN通过智能技术生成

2.1 CSS选择器的作用

选择器就是用来根据需求选择相应标签的

2.2 选择器分类

基础选择器：由单个选择器构成
- 基础选择器又包括标签选择器、类选择器、id选择器和通配符选择器。
复合选择器

2.3 标签选择器

定义：用HTML的标签名作为选择器，为页面中的某一类标签指定统一的CSS样式。

语法：

标签名 {
  属性1: 属性值1;
  属性2: 属性值2;
}

例：

h1 {
     color: green;
} //则所有的h1标签内的文字的颜色都会变成绿色

2.4 类选择器

作用：差异化选择不同的标签。单独选一个或某几个标签。最常用。

语法：

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

之后再在标签里调用类

例：将所有拥有red类的HTML元素设置为红色

.red {
  color: red;
}

<ul>
   <li class="red">かれし彼氏</li>
</ul>  //li调用red类，则“かれし彼氏”会变成红色

注意
- 类名自己取有意义的，但不能取标签名，比如不能是.li
- 长类名连接用-连接，比如prologue-title
- 有命名规范，具体查阅文档。

多类名

可以给一个标签指定多个类名。

使用方式

在class属性中写多个类名。
多个类名中间必须用空格分开。
例：

.red {
    color: red;
}
.font35{
    font-size: 35px;
}
<div class="red font35">がくせい学生</div>
//则“がくせい学生”就会变成红色并且字体变为35像素大小

用法：把共有的属性提取成一个类，然后标签就可以调用这个公共的类，再调用自己独有的类。
优点：节省CSS代码，方便统一修改。

2.5 id选择器

用法：在HTML以id属性来设置id选择器，CSS中id选择器以“#”来定义。
使用场景：一般用于页面唯一的元素上，和js搭配使用。
语法：
```
#id名 {
  属性: 属性值;
}
```

例：将“あした”改为粉色

#pink {
  color:pink;
}
<div id="pink">あした</div>

id选择器和类选择器的区别：
- 同一个id属性只能在每个HTML文档中出现一次，如果有一个标签调用了，其他标签就不能再调用。
- 类选择好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用。
- id选择器好比身份证号码，一个人只能有一个，不能重复。

2.6 通配符选择器

用法：通配符选择器使用“*”定义，表示选取页面中所有元素标签。
语法：
```
* {
  属性: 属性值;
}
```

例：把body div span li以及没写出来的html等所有的标签都改为了红色。

* {
  color: red;
}
<body>
    <div>かのじょ</div>
    <span>彼女</span>
    <ul>
        <li>女朋友</li>
    </ul>
 </body>

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