1 、元素或组选择器
这是在CSS中使用的最基本的选择器之一。元素选择器允许您选择所有具有相同指定元素名称的元素并为其指定样式。如果有多个具有相同样式定义的元素，则可以将所有元素分组
- 样式应用于所有元素。这样，您就可以最小化代码，因为您不必为每个元素使用类。
- 示例1： 在这里，页面上的所有段落都将右对齐，文本颜色为黄色
p {
text-align: right;
color: red;
}
示例2： 现在，看下面的CSS代码…
h2 {
text-align: center;
color: yellow;
}
h3 {
text-align: center;
color: yellow;
}
p
text-align: center;
color: yellow;
}
您可以使用组选择器最小化以上代码，并编写与以下相同的代码：
h2, h3, p {
text-align: center;
color: yellow;
}
2、 #id选择器
- id选择器是CSS中另一个功能最强大的通用选择器。使用＃符号后跟ID名称，您可以按ID定位，并将样式应用于具有选定ID的所有指定元素。使用此选择器听起来很不错，因为它很简单，但是请记住，id对于整个网页应该是唯一的。这意味着您不允许为多个元素分配ID选择器。
- 如果你不分配唯一ID，则在处理JavaScript中的特定元素时会遇到问题。另外，您的代码将不会被W3C验证，并且您将面临跨不同浏览器的兼容性问题。因此，与其创建许多#id的use类或其他用于样式的逻辑，否则以后很难维护CSS。
例：
#box{
width : 250px;
height: 250px;
background : yellow;
}
- 3、 .class选择器
- 类选择器是开发人员使用的最有用的通用选择器。你可以使用句点（。）和类名来定义类选择器。它为具有指定类属性的所有元素提供样式。它类似于id选择器，但唯一的区别是，类选择器允许您将页面中的多个元素作为目标。您还可以在HTML元素上使用多个类（以空格分隔）。
- 范例1：
.center{
text-align: center;
color: yellow;
}
- 示例2：在下面的示例中，仅会影响类'center'的p个元素。
p.center {
text-align: center;
color: yellow;
}
- 4、属性选择器
- 使用属性选择器，你可以通过给定属性的名称或值选择所有元素，然后对它们应用样式。
- 示例1：下面是一个HTML行示例，该行具有“ rel”属性，其值为“ newfriend”
- <h3 id="title" class="friend" rel="newfriend">David Walsh</h3>
- 让我们看看如何在上一行中将属性选择器用于“ rel”属性。
h3[rel="newfriend"] {
color: yellow;
}
- 开发人员经常在代码中使用“选择器”复选框来使用此选择器。阅读下面给出的示例。
- 范例2：
input[type="checkbox"] {
color: purple;
}
- 它也经常用于代码中的定位标记。阅读下面给出的示例。
范例3：
a[title] {
color: red;
}
- 组合器：这些组合 器用于通过使用选择器之间的关系将样式应用于html元素。组合器使您可以混合简单的选择器并在它们之间应用逻辑。让我们讨论CSS中的四个不同的组合器选择器。
- 后代选择器
- 的选择器
- 相邻兄弟选择器
- 通用兄弟选择器
- 5、后代选择器
- 后代选择器仅将样式应用于指定元素的后代。当你只需要为某些特定元素应用样式时，此选择器非常有用。例如，如果只定位“ h2”而不是定位所有“ h2”标记，而只定位“ div”标记的一部分，该怎么办？在这些情况下，你可以使用后代选择器。
- 范例1：
div h2 {
background-color: green;
}
- 示例2：您还可以制作一个链并使用后代选择器。
ol li a {
background-color: green;
}
- 示例3：在下面的示例中，你可以将其与类选择器混合使用。
.box a{
color :green;
}
6、子选择器
- 智利选择器允许你选择所有属于指定元素的子元素。
- 范例1：
div > h1 {
background-color: green;
}
- 子选择器和子代选择器之间的区别在于后者将仅选择直接子代。
范例2：
CSS：
span {
background-color: white;
}
div > span {
background-color: yellow;
}
HTML：
<div>
<span>Span #1, in the div.
<span>Span #2, in the span that's in the div.</span>
</span>
</div>
<span>Span #3, not in the div at all.</span>
结果：
- 示例3：你有一个“ ul”，其中包含一些项，并且在这些项中，有新的“ ol”项，你可能只想为较高层次的列表项选择某种样式，而不为嵌套列表的项选择某种样式。
CSS：
ul > li {
border-top: 5px solid red;
}
HTML：
<ul>
<li>Unordered item</li>
<li>Unordered item
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>
</li>
</ul>
结果：
7、相邻和通用同级选择器
相邻的意思是“立即跟随”。当你要选择紧跟指定元素（相邻的兄弟姐妹）的元素时，使用此选择器。换句话说，它选择在层次结构相同级别上紧挨另一个元素的元素。
示例：在下面的示例中，选择直接在'div'元素之后的p元素
CSS：
div + p {
background-color: red;
}
HTML：
<div>
<p>Paragraph 1 in the div.</p>
<p>Paragraph 2 in the div.</p>
</div>
<p>Paragraph 3. Not in a div.</p>
<p>Paragraph 4. Not in a div.</p>
结果：
通用的同级选择器（?）不如相邻的同级选择器严格。它使你可以选择作为指定元素的同级的所有元素，即使它们并非直接相邻。
示例：下面的示例选择所有与“ div”元素同级的“ p”元素