从头开始创建一个网站是创建一个快速、轻量级的网站的一种方法，你可以完全控制它。然而，创建、定制和维护HTML站点需要以下方面的技术知识HTML, CSS和JavaScript这是一项重大的时间投资。< / p ><！--more-->
好消息是有很多方法raybetapp可以简化这些阶段。例如，要简化网站的定制过程，可以使用CSS选择器。< / p >
下面我们将详细了解什么是CSS选择器。然后我们将探索不同的类型，如何使用它们，以及如何结合它们创建一个网站，看起来正是你想要的方式。< / p >
什么是CSS选择器？
CSS选择器用于定义要使用CSS设置样式的元素。有许多不同类型的CSS选择器，每个选择器都有自己独特的语法。这些选择器告诉浏览器要将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 >
< / p >
< / p >CSS选择器<标题> < /名称>< / p >
< / p >
> < /头< / p >
< / p >什么是CSS选择器&它们是如何工作的
< / p >< / p >< / p >
注意?这是对CSS文件的引用。该文件将只包括你将在下面的选择器块和其他自定义CSS。< / p >
现在我们已经简要介绍了CSS选择器的工作原理，让我们看看下面的主要选择器类型。< / p >
CSS选择器的类型
下面我们将介绍CSS选择器的四种主要类型。每种类型都可以帮助您在网页上选择不同的元素组。我们将从有助于您确定最大元素组的类型开始，然后讨论更精确的类型。< / p >
对于下面的演示，我将使用W3Schools在线代码编辑器. 这意味着您可以单击任何源代码链接以查看示例背后的完整代码段，然后尝试自己的代码段。< / p >
通用选择器
星号（*）是CSS中的通用选择器。默认情况下，它选择文档中的所有元素。< / p >
但是，它可以与名称空间结合使用。@名称空间在具有多个名称空间的文档中是一个有用的规则，例如HTML5、内联SVG、MathML和/或XML。您可以使用定义的名称空间将通用选择器限制为仅限于该名称空间内的元素。< / p >
通用选择器语法
通用选择器可以具有以下语法：< / p >< ul >
通用选择器的例子
假设我想让页面上的每个元素都是橙色的，然后我可以使用通用选择器。< / p >
这是我的HTML：< / p >
页面上的所有元素，从标题1开始
< / p >至标题2，类别=田园< / p >
to the段落将是橙色的< / p >
这是我的CSS，带有定义所有元素的通用选择器。< / p >
* {< / p >
颜色：橙色；< / p >
}< / p >
结果:< / p >
类型选择器
类型选择器选择具有给定节点名称的所有HTML元素。例如，“A”将选择所有元素并对其应用CSS属性值。“Input”将选择所有元素，“span”所有元素等等。< / p > 还可以使用已定义的命名空间将类型选择器限制为仅限于该命名空间内的元素。< / p > 类型选择器的语法是:< / p >< ul > 假设我的文档包含了段落和span元素，我想用橙色高亮显示span元素。< / p > 这是我的HTML：< / p > 一个跨度< / 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 > 这是我的CSS，类选择器用类“pastoral”定义了所有元素。< / p > .田园的{< / p > 颜色：橙色< / p > }< / p > 根据这些规则，第一个h1将没有橙色文本，而第二个h1将有橙色文本。结果:< / p > ID选择器根据其ID属性选择元素。例如，#toc将选择ID为“toc”的元素。请注意，只有当选择器中给定的值与元素的ID属性完全匹配时，此选择器才起作用。< / p > ID选择器的语法为：< / p >< ul > 假设我想更改id为“hubspot”的元素的颜色和对齐方式。< / p > 这是我的HTML：< / p > 这是我的CSS，ID选择器定义了ID为“hubspot”的元素< / p > hubspot的{#< / p > 颜色:橙色;< / p > 文本对齐：右对齐；< / p > }< / p > 结果:< / p > 请注意：如果元素的ID属性是全小写的，并且我在CSS选择器中将“H”大写，那么该元素将不会被选中。< / p > 属性选择器选择具有给定属性或属性设置为特定值的所有元素。例如，[href]将匹配所有链接，而[href*=“hubspot”]将只匹配URL中带有“hubspot”的链接。< / p > 您还可以使用属性选择器将CSS规则应用于具有给定属性值（而不仅仅是属性的存在）的元素。因此，如果我想在URL中使用“hubspot”设置任何链接的样式，那么我可以使用[href=“hubspot”]。< / p > 还可以使用已定义的命名空间将属性选择器限制为仅限于该命名空间内的元素。< / p > 属性选择器的语法包括以下内容：< / p >< ul > 所使用的语法取决于您是否希望选择将属性设置为特定值的元素。< / p > 假设我想用URL橙色创建任何与hubspot相关的链接。然后我可以使用[href= " hubspot "]。< / p > 这是我的HTML：< / p > < ul >< / p > <李> < a href = " http://google.com " > google.com < / > < /李>< / p > < / ul >< / p > 这是我的CSS，属性选择器定义了所有包含“hubspot”的链接< / p > a[href*=“hubspot”]{< / p > 颜色:橙色;< / p > }< / p > 结果:< / p > 伪类选择器仅在处于特殊状态时才将CSS应用于所选元素。例如，：hover仅在用户将鼠标悬停在元素上时才会对其进行样式设置。其他常见示例包括：active、：visited和：invalid。< / p > 伪选择器的语法为：< / p >< ul > 假设我想将用户已经访问过的链接的颜色更改为绿色。我想将用户没有访问过的链接保持为蓝色。我想当用户将鼠标悬停在链接上时，将链接更改为引人注目的fuschia颜色。< / p > 这是我的HTML：< / p > 所以你已经访问了www.emcdepot.com。为什么不查看我们的主页hubspot.com? 这是我的CSS，其中包含三个不同的伪类，分别用于未访问、已访问和悬停的链接。< / p > a:链接{< / p > 颜色：#0000FF；< / p > }< / p > a:参观了{< / p > 颜色:# 00 ff00;< / p > }< / p > 答:{徘徊< / p > 颜色：#FF00FF；< / p > }< / p > 结果:< / p > 现在我们了解了CSS选择器的主要类型，让我们来了解如何在网站上组合它们。< / p > 假设您有多个元素要应用相同的CSS，比如h2和一个.spartage类，您要使其变为绿色。您可以将代码编写为两个单独的规则，如下所示。< / p > 氢{< / p > 颜色:绿色;< / p > }< / p > .spacious {< / p > 颜色:绿色;< / p > }< / p > 或者，您可以将选择器组合成一个选择器列表。要创建选择器列表，您只需列出多个选择器，并在包含样式属性的方括号前用逗号分隔它们。因为空格在逗号前后都是有效的，所以我将在每个逗号后添加一个空格，以使代码更容易阅读。< / p > 因此语法应该是:element, element, element {style properties}。下面是上面的例子:< / p > h2，宽敞{< / p > 颜色:绿色;< / p > }< / p > 您也可以将选择器放在它们自己的行上，如果这样可以使代码更易于阅读的话。在这种情况下，语法如下所示：< / p > h2，< / p > .spacious {< / p > 颜色:绿色;< / p > }< / p > 以这种方式组合CSS选择器有助于减少样式表的大小，并加快网页加载速度。< / p > CSS选择器使您能够在从头构建站点时精确控制定制过程和代码。虽然可能有学习曲线，但您应该花时间学习和测试不同类型的CSS选择器。这样做可以使您根据您的品牌来设计您的网站，同时保持代码轻量级和加载时间快速。< / p >
最初发布于2020年5月18日上午7:00:00，更新于2020年5月19日< / p > 话题：< / p >Bootstrap&CSS
类型选择器语法
类型选择器示例
类选择器
类选择器语法
类选择器示例
非常橙色
< / p >
ID选择器
ID选择符的语法
ID选择器示例
#id选择器
< / p >
属性选择器
属性选择器语法
属性选择器的例子
伪类选择器
伪类选择器语法
伪类选择器示例
如何在CSS中对多个选择器进行分组？
使用CSS选择器进行定制
相关文章
