srcmini本文概述
- 1）CSS元素选择器
- 2）CSS ID选择器
- 3）CSS类选择器
- 此标题为蓝色且居中对齐。
- 特定元素的CSS类选择器
- 此标题不受影响
- 4）CSS通用选择器
- 这是前进的方向
- 5）CSS组选择器
- 你好srcmini02.com
CSS选择器用于选择要设置样式的内容。选择器是CSS规则集的一部分。 CSS选择器根据其ID, 类, 类型, 属性等选择HTML元素。
CSS中有几种不同类型的选择器。
- CSS元素选择器
- CSS ID选择器
- CSS类选择器
- CSS通用选择器
- CSS组选择器
1）CSS元素选择器
元素选择器通过名称选择HTML元素。
<!DOCTYPE html>
<html>
<head>
<style>
p{
text-align: center;
color: blue;
}
</style>
</head>
<body>
<p>This style will be applied on every paragraph.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>输出：
此样式将应用于每个段落。
我也是！
和我！
2）CSS ID选择器
id选择器选择HTML元素的id属性以选择特定元素。 id在页面内始终是唯一的, 因此可以选择它来选择一个唯一的元素。
它用井号（＃）加上元素的ID编写。
让我们以id为“ para1”的示例为例。
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<p id="para1">Hello srcmini02.com</p>
<p>This paragraph will not be affected.</p>
</body>
</html>输出：
你好srcmini02.com
本段不会受到影响。
3）CSS类选择器
类选择器选择具有特定类属性的HTML元素。与句号一起使用。 （句号）, 后跟类名。
注意：类别名称不应以数字开头。
让我们以“中心”类为例。
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1 class="center">This heading is blue and center-aligned.</h1>
<p class="center">This paragraph is blue and center-aligned.</p>
</body>
</html>输出：
此标题为蓝色且居中对齐。
本段为蓝色, 居中对齐。
特定元素的CSS类选择器
如果要指定只影响一个特定的HTML元素, 则应将元素名称与类选择器一起使用。
让我们来看一个例子。
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1 class="center">This heading is not affected</h1>
<p class="center">This paragraph is blue and center-aligned.</p>
</body>
</html>输出：
此标题不受影响
本段为蓝色, 居中对齐。
4）CSS通用选择器
通用选择器用作通配符。它选择页面上的所有元素。
<!DOCTYPE html>
<html>
<head>
<style>
* {
color: green;
font-size: 20px;
}
</style>
</head>
<body>
<h2>This is heading</h2>
<p>This style will be applied on every paragraph.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>输出：
这是前进的方向
此样式将应用于每个段落。
我也是！
和我！
5）CSS组选择器
分组选择器用于选择具有相同样式定义的所有元素。
分组选择器用于最小化代码。逗号用于分组每个选择器。
让我们看看没有组选择器的CSS代码。
h1 {
text-align: center;
color: blue;
}
h2 {
text-align: center;
color: blue;
}
p {
text-align: center;
color: blue;
}如你所见, 你需要为所有元素定义CSS属性。可以按以下方式将其分组：
h1, h2, p {
text-align: center;
color: blue;
}让我们看一下CSS组选择器的完整示例。
<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>Hello srcmini02.com</h1>
<h2>Hello srcmini02.com (In smaller font)</h2>
<p>This is a paragraph.</p>
</body>
</html>输出：
你好srcmini02.com
你好srcmini02.com（较小的字体）
这是一段。
评论前必须登录！
注册