如何使用CSS选择器
CSS中最重要的概念之一是CSS选择器。CSS选择器让你对网站上的特定HTML元素采用不同的样式。
如果你想创造出令人惊奇的元素，那么你需要了解CSS选择器以及你能用它们做什么。
你首先要学习基本的CSS选择器，然后再学习高级的选择器。
在本教程结束时，你将能够使用CSS选择器来创建令人难以置信的元素。
什么是CSS选择器？
CSS规则的第一部分是一个CSS选择器。一个CSS选择器是一组元素和其他术语，它告诉浏览器要对哪些HTML元素应用CSS属性值。
CSS选择器分为两类：basic 和advanced 。本教程将介绍这两类。
基本选择器是最常见的，用于为网站上的特定元素设置样式。
在基本类别中，我们有这样的选择器。
- 类型选择器
- CSS id选择器
- CSS类选择器
- 通用选择器
在高级选择器中，我们有以下几种。
- 组合选择器
- 伪类选择器
- CSS 伪元素
基本的CSS选择器
为了更好地理解CSS选择器，我们需要从基本选择器开始。这构成了我们在本文后面要学习的内容的基础。
让我们来看看基本选择器。
CSS类型选择器
CSS类型选择器是根据HTML元素的名称来应用的。这种选择器的例子是p 和h1 。它们被用来选择所有具有指定名称的HTML组件。
请看下面的例子。
<html>
<body>
<style>
/* selecting all h6 elements */
h6 {
color: red;
font: bond;
}
/* selecting all p elements */
p {
text-align: center;
background-color: blue;
}
</style>
</body>
</html>
在上面的例子中，我们选择了所有类型为h6 和p 的元素，并将其应用于样式。
当你通过选择一个单一的元素来代表所有其他类似的元素来应用样式时，代码会变得干净和简单。
CSS id选择器
id选择器适用于符合选择器id的HTML元素。
每个元素都有一个唯一的ID。因此，应用于所选元素的样式在不同的元素之间是不同的。
id选择器的语法是。
#id-name {
property: value;
}
让我们看一下下面的例子。
<html>
<body>
<style>
#contacts {
background-color: yellow;
color: green;
}
#about {
background-color: black;
color: green;
}
</style>
</body>
</html>
在上面的代码中，我们选择了两个不同的HTML元素，并对它们应用了不同的样式。如id#contacts 的背景颜色与id#about 的背景颜色不同。
CSS类选择器
CSS类选择器对所有具有相同类名的HTML元素应用样式。
. 后面的字符class-name 是用来选择具有特定类别的元素。如.class-name 。
这个选择器在为需要相同样式的多个元素设置样式时非常有用。
类选择器的例子。
<html>
<body>
<style>
.card {
text-align: center;
color: white;
}
</style>
</body>
</html>
在上面的片段中，我们选择了所有具有类名card 的元素并对其进行了造型。这些元素将有一个white color ，并将在网页上居中。
CSS通用选择器
顾名思义，这个选择器适用于所有HTML元素。每个元素，从标题到页脚，都遵循通用选择器所指定的样式。
一个通用选择器用星号（* ）表示。
下面是一个说明通用选择器的例子。
<html>
<body>
<style>
/* selecting all the elements */
* {
padding: 10px;
margin: 20px;
}
</style>
</body>
</html>
上面的代码将padding 和margin 分别归零为10px 和20px 。
CSS选择器是如何分组的？
我们有时想对不同的元素进行分组，对它们应用类似的样式。这可以节省时间，并使你的代码简洁，便于其他开发者理解。
然而，如果你不知道如何去做，这可能是一个挑战。
在本节中，我们将研究如何对CSS选择器进行分组。
下面的代码片断将是我们的参考。
<html>
<body>
<style>
p {
background-color: red;
font: large;
text-align: center;
color: blue;
}
h5 {
background-color: red;
font: large;
text-align: center;
color: blue;
}
h6 {
background-color: red;
font: large;
text-align: center;
color: blue;
}
</style>
</body>
</html>
在上面的代码片段中，我们给了三个不同的元素，p ，h5 ，和h6 相同的样式。这是重复的，也是对时间和资源的糟糕利用😒。
为了避免这种情况，我们可以使用(,)字符对选择器进行分组，以分隔元素，如下所示。
<html>
<body>
<style>
p,
h6,
h5 {
background-color: red;
font: large;
text-align: center;
color: blue;
}
</style>
</body>
</html>
在上面的片段中，我们为不同的元素组成了一次样式，因为它们有相同的定义。
我们也可以在每个元素上添加不同的定义，尽管将它们分组在一起。
<html>
<body>
<style>
/*group the selectors and state definitions that are the same*/
p,
h5,
h6 {
background-color: red;
font: large;
text-align: center;
}
/*apply individual styles(eg color: black;) to selector p*/
p {
color: black;
}
/*apply individual styles(eg padding: 10px;) to selector h5*/
h5 {
padding: 10px;
color: yellow;
}
/*apply individual styles(eg color: black;) to selector h6*/
h6 {
color: white;
}
</style>
</body>
</html>
我希望基本选择器已经很清楚了🥳。让我们继续讨论高级选择器。
高级CSS选择器
为了获得更多关于CSS选择器的知识，我们需要更深入地研究advanced CSS selectors 。
高级CSS选择器允许我们执行比基本选择器更多的东西。它们还允许我们超越CSS的界限。
让我们来看看一些高级的CSS选择器。
组合选择器
组合是一个用来描述选择器之间关系的术语。组合选择器将两个CSS选择器合并起来。
有四种类型的CSS组合选择器。
它们是
- 子代选择器
- 子选择器
- 邻近的兄弟姐妹选择器
- 一般兄弟姐妹选择器
后裔选择器
在子代选择器中，所有属于某个特定元素的元素都是相互匹配的。
下级选择器的语法如下所示。
selector1 selector2 { /* property declarations */ }
让我们看一下下面的例子。
<html>
<body>
<ul>
<li>
<li>Item 1</li>
<ol>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol>
</li>
</ul>
</body>
</html>
<style>
ul,ol{
font: large;
}
</style>
上面的代码选择了ul 元素中的所有ol 元素。
子代组合选择器
一个子代组合选择器出现在两个选择器的中间。它只选择指定元素的直接子元素。
我们使用> 字符来表示一个子选择器。
让我们看一下下面的例子。
<html>
<body>
<div>
<p>Hello World!</p>
<title><h1>My website</h1></title>
</div>
</body>
</html>
对上述HTML代码进行造型。
div > h1 {
color: blue;
}
在上面的片段中，元素(div)只会找到p 元素，而不是h1 。这是因为h1 标签不是div 标签的直接子元素。
相邻的兄弟姐妹选择器
相邻的兄弟姐妹选择器选择紧随其后的一个元素。
它们用加号(+)字符表示。
下面是一个演示相邻兄弟姐妹选择器的例子。
div + p {
font-size: 50px;
color: white;
font-style: large;
}
任何跟在div元素后面的p 元素都会有上述的样式定义。
一般兄弟姐妹组合选择器
一般兄弟姐妹组合选择器选择any ，该元素是一个指定元素的兄弟姐妹。它们由tilde (~)字符表示。
例子。
title ~ h1 {
color: blue;
}
在上面的例子中，所有作为title 元素的兄弟姐妹的h1 元素都将被选中，并以蓝色的颜色进行样式设计。
伪选择器
伪选择器被分为两类。
- [伪类选择器]：它们被用来定义一个元素的状态。
例如，它们可以被用来。
- 当用户将鼠标悬停在一个元素上时，为该元素设计样式。
- 对已访问和未访问的链接采用不同的样式。
- [CSS Pseudo-elements]（伪元素）：为一个元素的特定部分设计样式。
它们可以用来。
- 样式化一个元素的第一个字母或行。
- 在一个元素的内容之前或之后插入内容。
伪类选择器的例子。
/* mouse over link */
a:hover {
color: hotpink;
}
/* unvisited link */
a:link {
color: yellow;
}
/* visited link */
a:visited {
color: purple;
}
当用户将鼠标悬停在链接上时，其颜色会变成热粉色。Visited 和unvisited 链接的样式是不同的。
CSS伪元素的例子。
<html>
<body>
<p>
The first character has a yellow color. I.e `T`. The first line has color
red.
</p>
</body>
</html>
让我们对上面的HTML代码进行样式设计。
<style>
p::first-letter {
color: yellowgreen;
font-size: large;
}
p::first-line {
color: red;
}
</style>
第一个字母，即T ，将有一个yellow-green 的颜色，其字体大小将是large 。
上述句子中的第一行将有一个红色。
总结!
祝贺你!🥳.你现在可以运用CSS选择器的知识，根据你的品味，以不同的方式来设计你的网页。
