1、元素选择器
元素选择器是最简单的选择器，通过标签名选择元素。元素选择器通过直接指定元素名称来选择HTML文档中的所有特定元素，并对它们应用样式。
要为所有<p>元素设置样式，可以使用以下CSS：
p {
color: blue;
font-size: 16px;
line-height: 1.5;
}代码如下，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Element Selector Example</title>
<style>
/* 应用于所有h1元素的样式 */
h1 {
color: red;
text-align: center;
}
/* 应用于所有div元素的样式 */
div {
background-color: lightgray;
padding: 20px;
margin-top: 10px;
}
/* 应用于所有ul元素的样式 */
ul {
list-style-type: none;
padding: 0;
}
/* 应用于所有li元素的样式 */
li {
padding: 8px;
background-color: white;
border: 1px solid black;
margin-bottom: 5px;
}
</style>
</head>
<body>
<h1>Welcome to My Page</h1>
<div>
This is a div element.
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</body>
</html>
2、类选择器
类选择器通过元素的class属性选择元素。这是一个非常强大的选择器，因为可以将相同的样式应用于任何拥有该类的元素。要使用类选择器，首先需要在HTML元素上通过class属性指定一个或多个类名。然后在CSS中，可以使用这个类名前加点（.）来定义样式。类选择器在CSS中以点.开始，后面跟类名：
.highlight {
background-color: yellow;
}代码如下，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Class Selector Example</title>
<style>
/* 应用到所有带有 'content' 类的元素 */
.content {
color: green;
font-size: 16px;
}
/* 应用到所有带有 'main-heading' 类的元素 */
.main-heading {
color: navy;
font-size: 24px;
}
/* 应用到同时具有 'content' 和 'special' 类的元素 */
.content.special {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<h1 class="main-heading">Welcome to My Website</h1>
<p class="content">This is a paragraph with content class.</p>
<p class="content special">This is another paragraph with content and special classes.</p>
</body>
</html>
3、ID选择器
CSS中，ID选择器是一种非常强大的选择器，用于选择带有特定 id 属性的HTML元素。ID选择器在CSS中通过井号（#）标记来指定，后面跟上对应的ID名称。这种选择器非常有用，因为可以直接定位到页面上的一个唯一元素，并为其应用特定的样式。
#header {
background-color: gray;
}代码如下，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ID选择器示例</title>
<style>
#header {
background-color: #007BFF;
color: white;
padding: 20px;
text-align: center;
}
#content {
background-color: #f8f9fa;
padding: 20px;
}
#footer {
background-color: #343a40;
color: white;
text-align: center;
padding: 10px;
}
</style>
</head>
<body>
<div id="header">
<h1>Welcome to My Website</h1>
</div>
<div id="content">
<p>This is some content with more generic styling.</p>
</div>
<div id="footer">
<p>Contact us: email@example.com</p>
</div>
</body>
</html>
4、通用选择器
通用选择器使用*符号，它匹配文档中的每个元素。可以使用通用选择器来设置所有元素的某些默认样式：
* {
margin: 0;
padding: 0;
}5、属性选择器
属性选择器可以根据元素的属性及其值来选择元素。它们在处理带有特定特征的元素时非常有用，特别是当元素没有类或ID时。
选择器 | 描述 |
[attribute] | 选择具有指定属性的所有元素。 |
[attribute=value] | 选择属性值完全匹配给定值的所有元素。 |
[attribute~=value] | 选择属性值中包含一个以空格分隔的 给定词汇的所有元素。 |
[attribute|=value] | 选择属性值是给定值或以该值后 接连字符-开始的所有元素。 |
[attribute^=value] | 选择属性值以给定值开头的所有元素。 |
[attribute$=value] | 选择属性值以给定值结尾的所有元素。 |
*[attribute=value]* | 选择属性值中包含给定值的所有元素。 |
使用示例：
<!DOCTYPE html> <html lang="en"> <head> <style> input[type="text"] { border: 2px solid blue; } a[href^="http"] { color: red; } [data-info*="important"] { background-color: yellow; } </style> </head> <body> <input type="text" placeholder="Enter your name"> <a href="http://example.com">Visit Example</a> <div data-info="very-important-note">Important Note</div> </body> </html>
6、组合选择器
CSS中，基本选择器和组合选择器都是构建页面样式的重要工具。它们使得开发者可以准确地指定哪些HTML元素应当应用特定的样式规则。
1）后代选择器 (space)
选择所有在指定元素内部的指定后代元素。
div p 选择所有位于 div 元素内部的 p元素。
div p {
padding: 10px;
border: 1px solid #ccc;
}2）子选择器 (>)
只选择直接子元素。
ul > li 选择所有直接作为 ul 子元素的li 元素。
ul > li {
list-style-type: none;
}3）相邻兄弟选择器 (+)
选择紧接在另一个元素之后的兄弟元素。
h1 + p 选择所有紧跟在 h1 元素后的 p 元素。
h1 + p {
margin-top: 0;
}4）通用兄弟选择器 (~)
选择所有在另一个元素之后的兄弟元素。
h1 ~ p 选择所有在 h1 元素后的所有 p 元素。
h1 ~ p {
color: red;
}5）使用示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Selector Example</title>
<style>
/* 元素选择器 */
p {
color: green;
}
/* 类选择器 */
.highlight {
background-color: yellow;
}
/* ID选择器 */
#main {
border: 2px solid black;
}
/* 后代选择器 */
div p {
color: red;
}
/* 子选择器 */
ul > li {
list-style-type: none;
}
/* 相邻兄弟选择器 */
h1 + p {
margin-top: 0;
}
/* 通用兄弟选择器 */
h1 ~ p {
color: blue;
}
</style>
</head>
<body>
<div id="main">
<h1>Welcome!</h1>
<p>This paragraph is red (direct child of div).</p>
<p class="highlight">This paragraph is yellow and red.</p>
<div>
<p>This paragraph is green (nested div).</p>
</div>
</div>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
</ul>
<h1>Main Title</h1>
<p>First paragraph after H1.</p>
<p>Second paragraph after H1.</p>
</body>
</html>