从头开始创建一个网站是创建一个快速、轻量级的网站的一种方法，你可以完全控制它。然而，创建、定制和维护HTML站点需要以下方面的技术知识HTML, CSS和JavaScript以及大量的时间投入。< / p ><！--more-->

好消息是，有很多方raybetapp法可以简化这些阶段。例如，为了简化网站的定制过程，你可以使用CSS选择器。< / p >

下面我们将详细了解什么是CSS选择器。然后我们将探索不同的类型，如何使用它们，以及如何结合它们创建一个网站，看起来正是你想要的方式。< / p >

CSS选择器指向的一个或多个元素被称为“选择器的主题”。可以根据主题的元素类型、类、ID名称、给定属性或伪状态来选择主题。< / p >

有了这么多不同的类型，您不仅能够更快地自定义您的站点——您还能够对您的代码保持粒度控制。< / p >

下面我们将解释如何在你的网站上使用CSS选择器，然后探索不同类型的选择器。让我们开始吧。< / p >

如何在CSS中使用选择器

在CSS中有两种主要的使用选择器的方法。如果你有HTML和CSS在一个文档，那么你只需要添加CSS选择器到你的网页的部分。您将在下面的示例中看到这个方法。< / p >

但是，您也可以将HTML和CSS保存在单独的文档中。在这种情况下，你可能有一个标签为index.html的HTML文档和一个标签为style.css的CSS文件。index.html文件必须包含一行引用CSS文件的代码，以便在你的网页上呈现这些样式。< / p >

这个HTML文件看起来像这样:< / p >

<！DOCTYPE html >< / p >
< html lang =“en”>< / p >
< >头< / p >
CSS选择器<标题> < /名称>< / p >
< link rel = "样式表" href = " style.css " >< / p >
> < /头< / p >
<身体>< / p >
什么是CSS选择器和它们如何工作?< / h1 >< / p >
<身体>< / p >
< / html >< / p >

注意?这是对CSS文件的引用。该文件将只包括你将在下面的选择器块和其他自定义CSS。< / p >

现在，我们已经简要了解了CSS选择器的工作原理，下面让我们看看主要的选择器类型。< / p >

CSS选择器的类型

下面我们将介绍CSS选择器的四种主要类型。每一个都可以帮助你在网页上选择不同的元素组。我们将从帮助您定位最大的元素组的类型开始，然后转移到更精确的类型。< / p >

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

通用选择器

星号(*)是CSS中的通用选择器。默认情况下，它选择文档中的所有元素。< / p >

但是，它可以与名称空间结合使用。@namespace在具有多个名称空间的文档(如HTML5、内联SVG、MathML和/或XML)中是一个有用的规则。可以使用已定义的名称空间将通用选择器限制为该名称空间内的元素。< / p >

通用选择器语法

通用选择器可以有以下语法:< / p >< ul >

通用选择器的例子

假设我想让页面上的每个元素都是橙色的，然后我可以使用通用选择器。< / p >

这是我的HTML:< / p >

页面上的所有元素，从标题1< / p >
to the heading 2 with< / p >
to the段落将是橙色的< / p >

这是我的CSS，通用选择器定义了所有元素。< / p >

* {< / p >
颜色:橙色;< / p >
｝< / p >

结果:< / p >

源

类型选择器

类型选择器选择具有给定节点名的所有HTML元素。例如，“a”将选择所有元素，并对它们应用CSS属性值。“Input”将选择所有< Input >元素，“span”将选择所有元素，以此类推。< / p >

还可以使用已定义的名称空间将类型选择器限制为该名称空间内的元素。< / p >

类型选择器语法

类型选择器的语法是:< / p >< ul >

类型选择器的例子

假设我的文档包含了段落和span元素，我想用橙色高亮显示span元素。< / p >

这是我的HTML:< / p >

< span >一个跨度。< / span >< / p >
< p >没有跨越。< / p >< / p >
< span >两个跨度。< / span >< / p >
< p >没有跨越。< / p >< / p >

这是我的CSS和类型选择器定义了span元素:< / p >

跨度{< / p >
背景颜色:橙色;< / p >
｝< / p >

结果:< / p >

源

类选择器

类选择器选择具有给定值的所有元素类名．例如，.intro会选择类为“intro”的任何元素，就像.index会选择类为“index”的任何元素一样。< / p >

如果你使用的是开源框架引导CSS，那么你会注意到几乎它的所有样式都使用类作为选择器。你可以在W3Schools上找到Bootstrap类的完整列表。

类选择器语法

类选择器的语法是:< / p >< ul >

类选择器的例子

假设我想把class ="pastoral"的所有元素都改成橙色。< / p >

这是我的HTML:< / p >

<标题>不是橙色的h1 > < /< / p >
< h1类=“田园”>很橙色h1 > < /< / p >

这是我的CSS，类选择器用类“pastoral”定义了所有元素。< / p >

.pastoral {< / p >
颜色:橘色< / p >
｝< / p >

根据这些规则，第一个h1将没有橙色文本，而第二个h1将有橙色文本。结果:< / p >

源

ID选择器

ID选择器根据元素的ID属性选择元素。例如，#toc将选择ID为"toc "的元素。请注意，这个选择器只有在选择器中给出的值与元素的ID属性完全匹配时才能工作。< / p >

ID选择符的语法

ID选择器的语法是:< / p >< ul >

ID选择符的例子

假设我想用id "hubspot "改变元素的颜色和对齐方式。< / p >

这是我的HTML:< / p >

 #id选择器
< / p >

下面是我的CSS，使用ID选择器定义ID为“hubspot”的元素。< / p >

hubspot的{#< / p >
颜色:橙色;< / p >
text-align:正确;< / p >
｝< / p >

结果:< / p >

源

请注意:如果元素的ID属性都是小写的，而我在CSS选择器中大写“H”，那么元素将不会被选中。< / p >

属性选择器

属性选择器选择具有给定属性或将属性设置为特定值的所有元素。例如，a[href]将匹配所有链接，而a[href*= "hubspot"]将只匹配URL中带有"hubspot"的链接。< / p >

您还可以使用属性选择器将CSS规则应用于具有给定属性值的元素(而不仅仅是属性的存在)。所以，如果我想样式任何链接与"hubspot"在他们的URL，然后我可以使用[href= "hubspot"]。< / p >

还可以使用已定义的名称空间将属性选择器限制为仅在该名称空间内的元素。< / p >

属性选择器语法

属性选择器的语法包括以下内容:< / p >< ul >

所使用的语法取决于您是否希望选择将属性设置为特定值的元素。< / p >

属性选择器的例子

假设我想用URL橙色创建任何与hubspot相关的链接。然后我可以使用[href= " hubspot "]。< / p >

这是我的HTML:< / p >

< ul >< / p >
<李> < a href = " http://blog.com " > blog.com < / > < /李>< / p >
<李> < a href = " http://hubspot.com " > hubspot.com < / > < /李>< / p >
<李> < a href = " http://google.com " > google.com < / > < /李>< / p >
<李> < a href = " //www.emcdepot.com " > www.emcdepot.com < / > < /李>< / p >
< / ul >< / p >

下面是我的CSS，属性选择器定义了包括“hubspot”的所有链接。< / p >

(href * =“hubspot的”){< / p >
颜色:橙色;< / p >
｝< / p >

结果:< / p >

源

伪类选择器

伪类选择器只在特定状态下对选定的元素或元素应用CSS。例如，:hover只会在用户将鼠标悬停在某个元素上时对其进行样式设置。其他常见的例子有:active、:visited和:invalid。< / p >

伪类选择器语法

伪选择器的语法是:< / p >< ul >

伪类选择器的例子

假设我想将用户已经访问过的链接的颜色改为绿色。我想让用户没有访问过的链接保持蓝色。当用户将鼠标悬停在链接上方时，我希望链接变成引人注目的紫红色。< / p >

这是我的HTML:< / p >

所以你已经访问了www.emcdepot.com。为什么不查看我们的主页hubspot.com?
< / p >

下面是我的CSS，包含三个不同的伪类，用于未访问、已访问和正在悬停的链接。< / p >

{:链接< / p >
颜色:# 0000 ff;< / p >
｝< / p >
答:访问{< / p >
颜色:# 00 ff00;< / p >
｝< / p >
答:{徘徊< / p >
颜色:#就;< / p >
｝< / p >

结果:< / p >

源

现在我们已经了解了CSS选择器的主要类型，让我们来看看如何在你的网站上组合它们。< / p >

如何在CSS中对多个选择器进行分组?

假设你有多个想要应用相同CSS的元素，比如h2和一个想要设置为绿色的。spacious类。您可以将代码编写为两个独立的规则，如下所示。< / p >

h2 {< / p >
颜色:绿色;< / p >
｝< / p >
.spacious {< / p >
颜色:绿色;< / p >
｝< / p >

或者，您可以将选择器组合成一个选择器列表。要创建选择器列表，您只需列出多个选择器，并在包含样式属性的方括号前用逗号分隔它们。因为空格在逗号前后都是有效的，所以我将在每个逗号后添加一个空格，以使代码更容易阅读。< / p >

因此语法应该是:element, element, element {style properties}。下面是上面的例子:< / p >

h2, .spacious {< / p >
颜色:绿色;< / p >
｝< / p >

如果可以使代码更容易阅读，还可以将选择器放在它们自己的行中。在这种情况下，语法看起来像这样:< / p >

h2,< / p >
.spacious {< / p >
颜色:绿色;< / p >
｝< / p >

以这种方式组合CSS选择器可以帮助减少样式表的大小，并使您的网页加载更快。< / p >

使用CSS选择器进行定制

CSS选择器使您能够在从头构建站点时精确控制定制过程和代码。虽然可能有学习曲线，但您应该花时间学习和测试不同类型的CSS选择器。这样做可以使您根据您的品牌来设计您的网站，同时保持代码轻量级和加载时间快速。< / p >