从头开始建立网站是创建一个可以完全控制的快速，轻巧网站的一种方法。但是，创建，自定义和维护HTML站点将需要技术知识HTML，CSS和JavaScriptand a significant time investment.

The good news is there are many ways you can simplify these stages. To simplify the customization process of your website, for example, you can use CSS selectors.

在下面，我们将仔细研究CSS选择器。然后，我们将探索不同类型，如何使用它们以及如何组合它们以创建一个完全按照您想要的方式创建网站。

CSS选择器针对的元素或元素称为“选择器的主题”。可以根据其元素类型，类，ID名称，给定属性或伪状态选择主题。

With so many different types available, you are not only able to customize your site faster — you’re also able to maintain granular control over your code.

在下面，我们将说明如何在网站上使用CSS选择器，然后探索不同类型的选择器。让我们开始吧。

如何在CSS中使用选择器

There are two major ways you can use selectors in CSS. If you have your HTML and CSS in one doc, then you simply have to add CSS selectors into the section of your webpage. You’ll see this method in the examples below.

However, you can also keep your HTML and CSS in separate documents. In that case, you might have an HTML document labelled index.html and a CSS file labelled style.css. The index.html file must include a line of code referencing the CSS file so that these styles are rendered on your webpage.

HTML文件看起来像这样：

<！doctype html>
<头>





<身体>
哪些CSS选择器是如何工作的？
<身体>

注意线？这就是对您的CSS文件的引用。该文件仅包括您将在下面看到的选择器块和其他自定义CSS。

Now that we’ve gone through a brief overview of how CSS selectors work, let’s look at the major selector types below.

Types of CSS Selectors

Below we’ll cover the four major types of CSS selectors. Each can help you select different groups of elements on a webpage. We’ll start with the type that will help you target the largest groups of elements and then move onto the types that get more precise.

对于下面的演示，我将使用W3Schools在线代码编辑器。这意味着您可以单击任何源链接以查看示例背后的完整代码段并尝试自己的代码段。

Universal Selector

星号（*）是CSS中的通用选择器。默认情况下，它选择文档中的所有元素。

It can, however, be used in combination with namespaces. @namespace is a useful rule in documents with multiple namespaces, such as HTML5, inline SVG, MathML, and/or XML. You can use a defined namespace to restrict the universal selector to elements only within that namespace.

Universal Selector Syntax

A universal selector can have the following syntax:

• *或 * | * {样式属性} - 匹配所有元素
• NS |* {样式属性} - 匹配名称空间中的所有元素
• |* {样式属性} - 匹配所有元素，没有任何定义的名称空间

通用选择器示例

假设我希望页面上的每个元素都是橙色，然后我可以使用通用选择器。

Here’s my HTML:

All elements on the page, from the heading 1
 to to to the class = pastoral 
到段落将是橙色。

这是我的CSS，其中包含定义所有元素的通用选择器。

* {
color: orange;
}

这是结果：

来源

Type Selector

A type selector selects all HTML elements that have a given node name. For example, “a” would select all elements and apply the CSS property values to them. “Input” would select all elements, “span” all elements and so on.

You can also use a defined namespace to restrict the type selector to elements only within that namespace.

键入选择器语法

类型选择器的语法是：

• element { style properties }

Type Selector Example

假设我的文档包含段落和跨度元素，我希望以橙色突出显示跨度元素。

Here’s my HTML:

One span. 
无跨度。
两个跨度。
无跨度。

这是我的CSS，带有定义跨度元素的类型选择器：

跨度 {
背景色：橙色；
}

这是结果：

来源

Class Selector

类选择器选择具有给定的所有元素班级名称。例如，.intro将选择具有“介绍”类的任何元素，就像.index会选择具有“索引”类的任何元素。

如果您正在使用开源框架Bootstrap CSS，然后您会注意到几乎所有样式都使用类作为选择器。您可以在W3Schools上找到Bootstrap类的完整列表。

类选择器语法

类选择器的语法是：

• .className {style properties}

Class Selector Example

假设我想将所有元素更改为class =“ pastoral”的所有元素。

Here’s my HTML:

不是橙色
非常橙色

这是我的CSS与类选择器一起定义所有元素的“田园”。

。pastoral {
color: orange
}

鉴于这些规则，第一个H1不会具有橙色文本，第二个则将。这是结果：

来源

ID选择器

An ID selector selects an element based on its ID attribute. For example, #toc will select the element that has the ID "toc.” Please note that this selector only works if the value given in the selector matches the element’s ID attribute exactly.

ID选择器语法

ID选择器的语法是：

• #idname {样式属性}

ID选择器Example

假设我想将元素的颜色和对齐方式与ID“ HubSpot”更改。

Here’s my HTML:

 #id选择器

这是我的CSS，带有ID选择器，用ID“ HubSpot”定义元素。

#hubspot {
颜色为橙色;
文本合格：正确；
}

这是结果：

来源

Please note: if the element’s ID attribute is written in all lowercase and I capitalize the “H” in my CSS selector, then the element will not be selected.

属性选择器

属性选择器选择具有给定属性或属性设置为特定值的所有元素。例如，[HREF]将匹配所有链接，而[HREF*=“ HubSpot”]只能在其URL中与“ HubSpot”匹配。

You can also use an attribute selector to apply CSS rules to elements with the given value of an attribute (and not just the presence of an attribute). So if I want to style any links with "hubspot" in their URL then I can use a[href=”hubspot”].

You can also use a defined namespace to restrict the attribute selector to elements only within that namespace.

属性选择器Syntax

The syntax of an attribute selector includes the following:

• [attr] {样式属性}
• [attr=value] { style properties }
• [attr ~ =价值]{样式属性}
• [attr|=value] { style properties }
• [attr^= value] {样式属性}
• [attr $ = value] {style properties}
• [attr*=value] { style properties }

您使用的语法取决于您是否要选择将属性设置为特定值的元素。

属性选择器示例

假设我想在其URL橙色中与“ Hubspot”建立任何链接。然后，我可以使用[HREF =“ HubSpot”]。

Here’s my HTML:

  blog.com  
  hubspot.com  
  google.com  
www.emcdepot.com

Here’s my CSS with the attribute selector defining all links that include “hubspot.”

a[href*=”hubspot”] {
颜色为橙色;
}

这是结果：

来源

伪级选择器

伪级选择器仅在特殊状态时将CSS应用于选定的元素或元素。例如，：Hover仅在用户悬停在其上时会设置元素。其他常见的例子是：活动，：访问和：无效。

伪级选择器语法

The syntax of a pseudo selector is:

• selector:pseudo-class { style properties }

伪级选择器Example

假设我想更改用户已经访问过Green的链接的颜色。我想保留用户尚未访问蓝色的链接。而且，当用户徘徊时，我希望将链接更改为引人注目的Fuschia颜色。

Here’s my HTML:

因此，您已经访问过 www.emcdepot.com  。为什么不在 hubspot.com ？
上查看我们的家庭网站

这是我的CSS，有三个不同的伪班，用于尚未访问过，已经访问过并悬停的链接。

一条链接 {
color: #0000FF;
}
a:visited {
颜色：＃00ff00;
}
答：悬停{
color: #FF00FF;
}

这是结果：

来源

现在，我们了解了主要类型的CSS选择器，让我们仔细研究如何在网站上组合它们。

您如何在CSS中分组多个选择器？

假设您有多个要应用相同CSS的元素，例如H2和一类。您可以将代码写为两个单独的规则，如下所示。

h2 {
颜色：绿色；
}
宽敞{
颜色：绿色；
}

或者，您可以将选择器组合到选择器列表中。要创建一个选择器列表，您只需列出多个选择器，然后在包含样式属性的括号之前通过逗号分隔它们。由于逗号之前和之后的空白空间是有效的，因此我将在每个逗号之后添加一个空间，以使代码更易于阅读。

因此，语法将是：元素，元素，元素{样式属性}。这是上面的示例：

H2，宽敞{
颜色：绿色；
}

如果代码更易于阅读，您还可以将选择器放在自己的行上。在这种情况下，语法看起来像这样：

h2,
宽敞{
颜色：绿色；
}

Combining CSS selectors in this way can help reduce the size of style sheets and make your web page load faster.

使用CSS选择器自定义

CSS选择器使您能够在从头开始构建网站时对定制过程和代码保持精确的控制。虽然可能有学习曲线，但您应该花费时间来学习和测试不同类型的CSS选择器。这样做可以使您可以根据自己的品牌设置网站，同时保持代码轻巧和加载时间。