从头开始建立一个网站是建立一个快速,轻量级的网站,你有完全控制的一种方式。然而,创建,定制和维护一个HTML网站将需要的技术知识HTML,CSS和JavaScript以及大量的时间投入。

立即下载:免费介绍指南HTML和CSS

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

下面我们将采取什么CSS选择器是仔细看看。然后,我们将探索不同类型,你如何使用它们,以及如何将它们结合起来,以创建一个网站,看起来正是你想要的方式。

通过CSS选择靶向的元件或元件被称为“选择器的主题。”受试者可以根据它的元件类型,类ID名,给定的属性,或伪状态来选择。

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

下面我们将解释如何在站点上使用CSS选择器,然后探索不同类型的选择器。让我们开始吧。

如何在CSS中使用选择器

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

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

这HTML文件看起来是这样的:

<!DOCTYPE HTML>

< html lang =“en”>

CSS选择</ TITLE></ p><p><link rel=“stylesheet”href=“style.css”></ p><p></ HEAD></ p><p></p><p><body></ p><p></p><p><h1>什么是CSS选择器&它们是如何工作的</h1></ p><p></p><p><body></ p><p>< / html ></ p><p></p></code><p><code class="html"></code></p></pre><p></p><p>注意行<链路的rel = “样式表的” href = “style.css文件”>?这是参考你的CSS文件。该文件将只包括选择块,你会看到下面和其他自定义CSS。</ p><p>现在,我们已经简要了解了CSS选择器的工作原理,下面让我们看看主要的选择器类型。</ p><h3>CSS选择器的类型</h3><p>下面我们将介绍CSS选择器的四种主要类型。每一个都可以帮助你在网页上选择不同的元素组。我们将从帮助您定位最大的元素组的类型开始,然后转移到更精确的类型。</ p><p>对于下面的演示,我将使用<a href="https://www.w3schools.com/tryit/" rel="noopener" target="_blank">W3Schools的在线代码编辑器</a>. 这意味着您可以单击任何源代码链接以查看示例背后的完整代码段,然后尝试自己的代码段。</ p><h4>通用选择器</h4><p>星号(*)是CSS中的通用选择器。默认情况下,它选择文档中的所有元素。</ p><p>但是,它可以与名称空间结合使用。@namespace在具有多个名称空间的文档(如HTML5、内联SVG、MathML和/或XML)中是一个有用的规则。可以使用已定义的名称空间将通用选择器限制为该名称空间内的元素。</ p><h5 style="font-weight: bold;">通用选择器语法</h5><p>通用选择器可以有以下语法:</ p><UL><li>*或* | * {样式属性} - 所有元素相匹配</li> <li>NS | * {样式属性} - 命名空间中的NS的所有元素相匹配</li> <li>|*{style properties}-匹配没有定义名称空间的所有元素</li> </ul><h5>通用选择示例</h5><p>比方说,我想在页面上的每一个元素是橙色,然后我可以使用通用选择。</ p><p>这是我的HTML:</ p><p></p><pre class="syntax"><code class="html"><p></p><p></p><p><h1>页面上的所有元素,从标题1</ p><p><h2 class=“田园”>至标题2,类别=田园</h1></ p><p><P>段落将是橙色。</ P></ p><p><br><br></p></code><p><code class="html"></code></p></pre><p></p><p>这是我的CSS,带有定义所有元素的通用选择器。</ p><p></p><pre class="syntax"><code class="css"><p></p><p></p><p>* {</ p><p>颜色:橙色;</ p><p>}</ p><p></p></code><p><code class="css"></code></p></pre><p></p><p></p><p>这里的结果:</ p><div> <img src="//www.emcdepot.com/hs-fs/hubfs/What%20are%20CSS%20Selectors%20%26%20How%20Do%20They%20Work-3.png?width=471&name=What%20are%20CSS%20Selectors%20%26%20How%20Do%20They%20Work-3.png" alt="通用选择应用CSS所有元素" width="471" style="width: 471px; display: block; margin: 0px auto;" srcset="//www.emcdepot.com/hs-fs/hubfs/What%20are%20CSS%20Selectors%20%26%20How%20Do%20They%20Work-3.png?width=236&name=What%20are%20CSS%20Selectors%20%26%20How%20Do%20They%20Work-3.png 236w, //www.emcdepot.com/hs-fs/hubfs/What%20are%20CSS%20Selectors%20%26%20How%20Do%20They%20Work-3.png?width=471&name=What%20are%20CSS%20Selectors%20%26%20How%20Do%20They%20Work-3.png 471w, //www.emcdepot.com/hs-fs/hubfs/What%20are%20CSS%20Selectors%20%26%20How%20Do%20They%20Work-3.png?width=707&name=What%20are%20CSS%20Selectors%20%26%20How%20Do%20They%20Work-3.png 707w, //www.emcdepot.com/hs-fs/hubfs/What%20are%20CSS%20Selectors%20%26%20How%20Do%20They%20Work-3.png?width=942&name=What%20are%20CSS%20Selectors%20%26%20How%20Do%20They%20Work-3.png 942w, //www.emcdepot.com/hs-fs/hubfs/What%20are%20CSS%20Selectors%20%26%20How%20Do%20They%20Work-3.png?width=1178&name=What%20are%20CSS%20Selectors%20%26%20How%20Do%20They%20Work-3.png 1178w, //www.emcdepot.com/hs-fs/hubfs/What%20are%20CSS%20Selectors%20%26%20How%20Do%20They%20Work-3.png?width=1413&name=What%20are%20CSS%20Selectors%20%26%20How%20Do%20They%20Work-3.png 1413w" sizes="(max-width: 471px) 100vw, 471px"> </div><p style="font-size: 13px; text-align: center;"><a href="https://www.w3schools.com/code/tryit.asp?filename=GER8WJ4JJ7IE" rel="noopener" target="_blank" style="font-style: italic;">来源</a></p><h4>类型选择器</h4><p>类型选择器选择具有给定节点名的所有HTML元素。例如,“a”将选择所有<a>元素,并对它们应用CSS属性值。“Input”将选择所有< Input >元素,“span”将选择所有<span>元素,以此类推。</ p><p>还可以使用已定义的名称空间将类型选择器限制为该名称空间内的元素。</ p><h5>类型选择器语法</h5><p>类型选择的语法是:</ p><UL><li>元素{样式属性}</li> </ul><h5>类型选择器的例子</h5><p>比方说,我的文档包含段落和span元素,我想跨度元素以橙色高亮显示。</ p><p>这是我的HTML:</ p><p></p><pre class="syntax"><code class="html"><p></p><p></p><p>< span >一个跨度。< / span ></ p><p><p>没有跨度。</ p></ p><p><跨度>两个跨度。</跨度></ p><p><p>没有跨度。</ p></ p><p><br><br></p></code><p><code class="html"></code></p></pre><p></p><p>下面是我的CSS,其中类型选择器定义了span元素:</ p><p></p><pre class="syntax"><code class="css"><p></p><p></p><p>跨度{</ p><p>背景颜色:橙色;</ p><p>}</ p><p></p></code><p><code class="css"></code></p></pre><p></p><p>这里的结果:</ p><div> <img src="//www.emcdepot.com/hs-fs/hubfs/What%20are%20CSS%20Selectors%20%26%20How%20Do%20They%20Work-5.png?width=418&name=What%20are%20CSS%20Selectors%20%26%20How%20Do%20They%20Work-5.png" alt="将CSS应用到span元素的类型选择器" width="418" style="width: 418px; display: block; margin: 0px auto;" srcset="//www.emcdepot.com/hs-fs/hubfs/What%20are%20CSS%20Selectors%20%26%20How%20Do%20They%20Work-5.png?width=209&name=What%20are%20CSS%20Selectors%20%26%20How%20Do%20They%20Work-5.png 209w, //www.emcdepot.com/hs-fs/hubfs/What%20are%20CSS%20Selectors%20%26%20How%20Do%20They%20Work-5.png?width=418&name=What%20are%20CSS%20Selectors%20%26%20How%20Do%20They%20Work-5.png 418w, //www.emcdepot.com/hs-fs/hubfs/What%20are%20CSS%20Selectors%20%26%20How%20Do%20They%20Work-5.png?width=627&name=What%20are%20CSS%20Selectors%20%26%20How%20Do%20They%20Work-5.png 627w, //www.emcdepot.com/hs-fs/hubfs/What%20are%20CSS%20Selectors%20%26%20How%20Do%20They%20Work-5.png?width=836&name=What%20are%20CSS%20Selectors%20%26%20How%20Do%20They%20Work-5.png 836w, //www.emcdepot.com/hs-fs/hubfs/What%20are%20CSS%20Selectors%20%26%20How%20Do%20They%20Work-5.png?width=1045&name=What%20are%20CSS%20Selectors%20%26%20How%20Do%20They%20Work-5.png 1045w, //www.emcdepot.com/hs-fs/hubfs/What%20are%20CSS%20Selectors%20%26%20How%20Do%20They%20Work-5.png?width=1254&name=What%20are%20CSS%20Selectors%20%26%20How%20Do%20They%20Work-5.png 1254w" sizes="(max-width: 418px) 100vw, 418px"> </div><p style="font-size: 13px; text-align: center;"><a href="https://www.w3schools.com/code/tryit.asp?filename=GER8OBUF2G2K" style="font-style: italic;" rel="noopener" target="_blank">来源</a></p><h4>类选择器</h4><p>一类选择器选择具有给定的所有元素<a href="//www.emcdepot.com/website/what-is-css-class" rel="noopener" target="_blank">班级名称</a>. 例如,.intro将选择具有“intro”类的任何元素,就像.index将选择具有“index”类的任何元素一样</ p><p>如果您使用的开源框架<a href="//www.emcdepot.com/website/bootstrap-css" rel="noopener" target="_blank">引导CSS</a>,然后您会注意到,几乎所有的样式都使用类作为选择器。<a href="https://www.w3schools.com/bootstrap/bootstrap_ref_all_classes.asp" rel="noopener" target="_blank">你可以找到自举类的上W3Schools的完整列表。</a></p><h5>类选择器语法</h5><p>类选择器的语法为:</ p><UL><li>.classname {样式属性}</li> </ul><h5>类选择器的例子</h5><p>比方说,我想改变这一切的元素带有class =“田园”到橙色。</ p><p>这是我的HTML:</ p><p></p><pre class="syntax"><code class="html"><p></p><p></p><p><H1>不橙</ H1></ p><p><h1 class=“田园”>非常橙色</h1></ p><p><br><br><br></p></code><p><code class="html"></code></p></pre><p></p><p>这是我与类选择定义与类的所有元素的CSS“田园”。</ p><p></p><pre class="syntax"><code class="css"><p></p><p></p><p>.pastoral {</ p><p>颜色:橘色</ p><p>}</ p><p></p></code><p><code class="css"></code></p></pre><p></p><p>鉴于这些规则,第一H1不会有橙色文字和第二会。这里的结果:</ p><div> <img src="//www.emcdepot.com/hs-fs/hubfs/What%20are%20CSS%20Selectors%20%26%20How%20Do%20They%20Work-4.png?width=273&name=What%20are%20CSS%20Selectors%20%26%20How%20Do%20They%20Work-4.png" alt="类选择器,将CSS应用于带有田园类的元素" width="273" style="width: 273px; display: block; margin: 0px auto;" srcset="//www.emcdepot.com/hs-fs/hubfs/What%20are%20CSS%20Selectors%20%26%20How%20Do%20They%20Work-4.png?width=137&name=What%20are%20CSS%20Selectors%20%26%20How%20Do%20They%20Work-4.png 137w, //www.emcdepot.com/hs-fs/hubfs/What%20are%20CSS%20Selectors%20%26%20How%20Do%20They%20Work-4.png?width=273&name=What%20are%20CSS%20Selectors%20%26%20How%20Do%20They%20Work-4.png 273w, //www.emcdepot.com/hs-fs/hubfs/What%20are%20CSS%20Selectors%20%26%20How%20Do%20They%20Work-4.png?width=410&name=What%20are%20CSS%20Selectors%20%26%20How%20Do%20They%20Work-4.png 410w, //www.emcdepot.com/hs-fs/hubfs/What%20are%20CSS%20Selectors%20%26%20How%20Do%20They%20Work-4.png?width=546&name=What%20are%20CSS%20Selectors%20%26%20How%20Do%20They%20Work-4.png 546w, //www.emcdepot.com/hs-fs/hubfs/What%20are%20CSS%20Selectors%20%26%20How%20Do%20They%20Work-4.png?width=683&name=What%20are%20CSS%20Selectors%20%26%20How%20Do%20They%20Work-4.png 683w, //www.emcdepot.com/hs-fs/hubfs/What%20are%20CSS%20Selectors%20%26%20How%20Do%20They%20Work-4.png?width=819&name=What%20are%20CSS%20Selectors%20%26%20How%20Do%20They%20Work-4.png 819w" sizes="(max-width: 273px) 100vw, 273px"> </div><p style="font-size: 13px; text-align: center;"><a href="https://www.w3schools.com/code/tryit.asp?filename=GER8Q23BX6CK" rel="noopener" target="_blank" style="font-style: italic;">来源</a></p><h4>ID选择</h4><p>ID选择器根据元素的ID属性选择元素。例如,#toc将选择ID为"toc "的元素。请注意,这个选择器只有在选择器中给出的值与元素的ID属性完全匹配时才能工作。</ p><h5>ID选择器语法</h5><p>ID选择器的语法为:</ p><UL><li>#idname{样式属性}</li> </ul><h5>ID选择符的例子</h5><p>假设我想更改id为“hubspot”的元素的颜色和对齐方式。</ p><p>这是我的HTML:</ p><p></p><pre class="syntax"><code class="html"><p></p><p></p><p><H1 ID = “hubspot”> #ID选择</ H1></ p><p><br><br></p></code><p><code class="html"></code></p></pre><p></p><p>这是我的CSS,ID选择器定义了ID为“hubspot”的元素</ p><p></p><pre class="syntax"><code class="css"><p></p><p></p><p>#hubspot {</ p><p>颜色为橙色;</ p><p>文本对齐:右对齐;</ p><p>}</ p><p></p></code><p><code class="css"></code></p></pre><p></p><p>这里的结果:</ p><div> <img src="//www.emcdepot.com/hs-fs/hubfs/What%20are%20CSS%20Selectors%20%26%20How%20Do%20They%20Work.png?width=600&name=What%20are%20CSS%20Selectors%20%26%20How%20Do%20They%20Work.png" alt="ID选择器将CSS应用到具有hubspot ID的元素" width="600" style="width: 600px; display: block; margin: 0px auto;" srcset="//www.emcdepot.com/hs-fs/hubfs/What%20are%20CSS%20Selectors%20%26%20How%20Do%20They%20Work.png?width=300&name=What%20are%20CSS%20Selectors%20%26%20How%20Do%20They%20Work.png 300w, //www.emcdepot.com/hs-fs/hubfs/What%20are%20CSS%20Selectors%20%26%20How%20Do%20They%20Work.png?width=600&name=What%20are%20CSS%20Selectors%20%26%20How%20Do%20They%20Work.png 600w, //www.emcdepot.com/hs-fs/hubfs/What%20are%20CSS%20Selectors%20%26%20How%20Do%20They%20Work.png?width=900&name=What%20are%20CSS%20Selectors%20%26%20How%20Do%20They%20Work.png 900w, //www.emcdepot.com/hs-fs/hubfs/What%20are%20CSS%20Selectors%20%26%20How%20Do%20They%20Work.png?width=1200&name=What%20are%20CSS%20Selectors%20%26%20How%20Do%20They%20Work.png 1200w, //www.emcdepot.com/hs-fs/hubfs/What%20are%20CSS%20Selectors%20%26%20How%20Do%20They%20Work.png?width=1500&name=What%20are%20CSS%20Selectors%20%26%20How%20Do%20They%20Work.png 1500w, //www.emcdepot.com/hs-fs/hubfs/What%20are%20CSS%20Selectors%20%26%20How%20Do%20They%20Work.png?width=1800&name=What%20are%20CSS%20Selectors%20%26%20How%20Do%20They%20Work.png 1800w" sizes="(max-width: 600px) 100vw, 600px"> </div><p style="font-size: 13px; text-align: center;"><a href="https://www.w3schools.com/code/tryit.asp?filename=GER8E2IFJQYG" rel="noopener" target="_blank" style="font-style: italic;">来源</a></p><p>请注意:如果元素的ID属性都是小写的,而我在CSS选择器中大写“H”,那么元素将不会被选中。</ p><h4>属性选择</h4><p>属性选择器选择具有给定属性或属性设置为特定值的所有元素。例如,[href]将匹配所有链接,而[href*=“hubspot”]将只匹配URL中带有“hubspot”的链接。</ p><p>您还可以使用属性选择器将CSS规则应用于具有给定属性值的元素(而不仅仅是属性的存在)。所以,如果我想样式任何链接与"hubspot"在他们的URL,然后我可以使用[href= "hubspot"]。</ p><p>还可以使用已定义的名称空间将属性选择器限制为仅在该名称空间内的元素。</ p><h5>属性选择器语法</h5><p>属性选择器的语法包括以下内容:</ p><UL><li>[ATTR] {式场所}</li> <li>[attr=value] {style属性}</li> <li>[attr~=value] {style属性}</li> <li>[attr|=value] {style properties}</li> <li>[attr^=value]{样式属性}</li> <li>[ATTR $ =值] {式场所}</li> <li>[attr*=value] {style属性}</li> </ul><p>您使用的语法取决于你是否要选择具有的属性设置为特定值的元素。</ p><h5>属性选择器实施例</h5><p>比方说,我想和他们的URL橙“hubspot”的任何链接。然后我可以使用一个[HREF =” hubspot”]。</ p><p>这是我的HTML:</ p><p></p><pre class="syntax"><code class="html"><p></p><p></p><p><UL></ p><p><li><a href=”http://blog.com“>blog.com</a></li></ p><p><li><a href=”http://hubspot.com“>hubspot.com</a></li></ p><p><LI> <a href="http://google.com"> google.com </A> </ LI></ p><p><李> < a href = " //www.emcdepot.com " > www.emcdepot.com < / > < /李></ p><p></ UL></ p><p><br><br></p></code><p><code class="html"></code></p></pre><p></p><p>下面是我的CSS,属性选择器定义了包括“hubspot”的所有链接。</ p><p></p><pre class="syntax"><code class="css"><p></p><p></p><p>(href * =“hubspot的”){</ p><p>颜色为橙色;</ p><p>}</ p><p></p></code><p><code class="css"></code></p></pre><p></p><p>这里的结果:</ p><div> <img src="//www.emcdepot.com/hs-fs/hubfs/What%20are%20CSS%20Selectors%20%26%20How%20Do%20They%20Work-1.png?width=600&name=What%20are%20CSS%20Selectors%20%26%20How%20Do%20They%20Work-1.png" alt="属性选择在URL应用CSS与“hubspot”链接" width="600" style="width: 600px; display: block; margin: 0px auto;" srcset="//www.emcdepot.com/hs-fs/hubfs/What%20are%20CSS%20Selectors%20%26%20How%20Do%20They%20Work-1.png?width=300&name=What%20are%20CSS%20Selectors%20%26%20How%20Do%20They%20Work-1.png 300w, //www.emcdepot.com/hs-fs/hubfs/What%20are%20CSS%20Selectors%20%26%20How%20Do%20They%20Work-1.png?width=600&name=What%20are%20CSS%20Selectors%20%26%20How%20Do%20They%20Work-1.png 600w, //www.emcdepot.com/hs-fs/hubfs/What%20are%20CSS%20Selectors%20%26%20How%20Do%20They%20Work-1.png?width=900&name=What%20are%20CSS%20Selectors%20%26%20How%20Do%20They%20Work-1.png 900w, //www.emcdepot.com/hs-fs/hubfs/What%20are%20CSS%20Selectors%20%26%20How%20Do%20They%20Work-1.png?width=1200&name=What%20are%20CSS%20Selectors%20%26%20How%20Do%20They%20Work-1.png 1200w, //www.emcdepot.com/hs-fs/hubfs/What%20are%20CSS%20Selectors%20%26%20How%20Do%20They%20Work-1.png?width=1500&name=What%20are%20CSS%20Selectors%20%26%20How%20Do%20They%20Work-1.png 1500w, //www.emcdepot.com/hs-fs/hubfs/What%20are%20CSS%20Selectors%20%26%20How%20Do%20They%20Work-1.png?width=1800&name=What%20are%20CSS%20Selectors%20%26%20How%20Do%20They%20Work-1.png 1800w" sizes="(max-width: 600px) 100vw, 600px"> </div><p style="font-size: 13px; text-align: center;"><a href="https://www.w3schools.com/code/tryit.asp?filename=GER9IP7KIV6Q" rel="noopener" target="_blank" style="font-style: italic;">来源</a></p><h4>伪类选择</h4><p>伪类选择器仅在处于特殊状态时将CSS应用于选定元素。例如,:hover仅在用户将鼠标悬停在某个元素上时才设置该元素的样式。其他常见示例有:活动、:访问和:无效。</ p><h5>伪类选择器语法</h5><p>伪选择器的语法是:</ p><UL><li>选择器:伪类{style属性}</li> </ul><h5>伪类选择器的例子</h5><p>假设我想将用户已经访问过的链接的颜色更改为绿色。我想把用户没有访问过的链接保留到blue。我希望当用户将鼠标悬停在链接上时,链接会变成引人注目的fuschia颜色。</ p><p>这是我的HTML:</ p><p></p><pre class="syntax"><code class="html"><p></p><p></p><p><P>所以,你已经访问<a href="http://hubspot.com"> www.emcdepot.com </A> </ li>。为什么在<a href="//www.emcdepot.com"> hubspot.com </A>?</ P>查不出来我们的家网站</ p><p><br><br></p></code><p><code class="html"></code></p></pre><p></p><p>这是我的CSS,其中包含三个不同的伪类,分别用于未访问、已访问和悬停的链接。</ p><p></p><pre class="syntax"><code class="css"><p></p><p></p><p>a:链接{</ p><p>颜色:# 0000 ff;</ p><p>}</ p><p></p><p>答:访问{</ p><p>颜色:#00FF00;</ p><p>}</ p><p></p><p>答:悬停{</ p><p>颜色:#就;</ p><p>}</ p><p></p></code><p><code class="css"></code></p></pre><p></p><p>这里的结果:</ p><div> <img src="//www.emcdepot.com/hs-fs/hubfs/What%20are%20CSS%20Selectors%20%26%20How%20Do%20They%20Work-2.png?width=541&name=What%20are%20CSS%20Selectors%20%26%20How%20Do%20They%20Work-2.png" alt="基于用户活动伪类选择应用CSS来链接" width="541" style="width: 541px; display: block; margin: 0px auto;" srcset="//www.emcdepot.com/hs-fs/hubfs/What%20are%20CSS%20Selectors%20%26%20How%20Do%20They%20Work-2.png?width=271&name=What%20are%20CSS%20Selectors%20%26%20How%20Do%20They%20Work-2.png 271w, //www.emcdepot.com/hs-fs/hubfs/What%20are%20CSS%20Selectors%20%26%20How%20Do%20They%20Work-2.png?width=541&name=What%20are%20CSS%20Selectors%20%26%20How%20Do%20They%20Work-2.png 541w, //www.emcdepot.com/hs-fs/hubfs/What%20are%20CSS%20Selectors%20%26%20How%20Do%20They%20Work-2.png?width=812&name=What%20are%20CSS%20Selectors%20%26%20How%20Do%20They%20Work-2.png 812w, //www.emcdepot.com/hs-fs/hubfs/What%20are%20CSS%20Selectors%20%26%20How%20Do%20They%20Work-2.png?width=1082&name=What%20are%20CSS%20Selectors%20%26%20How%20Do%20They%20Work-2.png 1082w, //www.emcdepot.com/hs-fs/hubfs/What%20are%20CSS%20Selectors%20%26%20How%20Do%20They%20Work-2.png?width=1353&name=What%20are%20CSS%20Selectors%20%26%20How%20Do%20They%20Work-2.png 1353w, //www.emcdepot.com/hs-fs/hubfs/What%20are%20CSS%20Selectors%20%26%20How%20Do%20They%20Work-2.png?width=1623&name=What%20are%20CSS%20Selectors%20%26%20How%20Do%20They%20Work-2.png 1623w" sizes="(max-width: 541px) 100vw, 541px"> </div><p style="font-size: 13px; text-align: center;"><a href="https://www.w3schools.com/code/tryit.asp?filename=GERATI4M6OXZ" rel="noopener" target="_blank" style="font-style: italic;">来源</a></p><p>现在我们了解了CSS选择器的主要类型,让我们来了解如何在网站上组合它们。</ p><h3>如何在CSS中对多个选择器进行分组?</h3><p>假设您有多个元素要应用相同的CSS,比如h2和一类.spartage,您要使其变为绿色。您可以将代码编写为两个独立的规则,如下所示。</ p><p></p><pre class="syntax"><code class="css"><p></p><p></p><p>h2 {</ p><p>颜色:绿色;</ p><p>}</ p><p></p><p>.spacious {</ p><p>颜色:绿色;</ p><p>}</ p><p></p></code><p><code class="css"></code></p></pre><p></p><p>或者,你可以在选择组合成一个选择列表。要创建一个选择列表,你只需要列表中的多个选择,并包含样式属性支架之前,请用逗号分隔。由于之前和逗号后空格是有效的,我会每个逗号后面添加一个空格,以使代码更易于阅读。</ p><p>因此,语法是:元素,元素,元素{样式属性}。下面是上面的例子:</ p><p></p><pre class="syntax"><code class="css"><p></p><p></p><p>h2,宽敞{</ p><p>颜色:绿色;</ p><p>}</ p><p><br><br></p></code><p><code class="css"></code></p></pre><p></p><p>您也可以将选择器放在它们自己的行上,如果这样可以使代码更易于阅读的话。在这种情况下,语法如下所示:</ p><p></p><pre class="syntax"><code class="css"><p></p><p></p><p>h2,</ p><p>.spacious {</ p><p>颜色:绿色;</ p><p>}</ p><p><br><br></p></code><p><code class="css"></code></p></pre><p></p><p>以这种方式组合CSS选择器可以帮助减少样式表的大小,并使您的网页加载更快。</ p><h2 style="font-weight: normal;">用CSS选择定制</h2><p>CSS选择器可让您从头开始建立一个网站时,在你的定制过程和代码保持精确的控制。虽然有可能是一个学习曲线,你应该花时间在学习和测试不同类型的CSS选择。这样做可以使您可以根据自己的品牌,同时保持代码轻巧加载时间快样式您的网站。</ p><p> <!--HubSpot Call-to-Action Code --><span class="hs-cta-wrapper" id="hs-cta-wrapper-b4b6cb84-2a18-490b-840d-883884a94a83"><span class="hs-cta-node hs-cta-b4b6cb84-2a18-490b-840d-883884a94a83" id="hs-cta-b4b6cb84-2a18-490b-840d-883884a94a83"> <!--[if lte IE 8]><div id="hs-cta-ie-element"></div><![endif]--><a href="https://cta-redirect.hubspot.com/cta/redirect/53/b4b6cb84-2a18-490b-840d-883884a94a83" target="_blank"><img class="hs-cta-img" id="hs-cta-img-b4b6cb84-2a18-490b-840d-883884a94a83" style="border-width:0px;" src="https://no-cache.hubspot.com/cta/default/53/b4b6cb84-2a18-490b-840d-883884a94a83.png" alt="新的行动呼吁"></a></span></span> <!-- end HubSpot Call-to-Action Code --></p><p></p> <div id="slidebox"> <a class="close"></a> <!--HubSpot Call-to-Action Code --> <span class="hs-cta-wrapper" id="hs-cta-wrapper-be00be7b-acfc-4948-9055-bf6bf9746111"><span class="hs-cta-node hs-cta-be00be7b-acfc-4948-9055-bf6bf9746111" id="hs-cta-be00be7b-acfc-4948-9055-bf6bf9746111"> <!--[if lte IE 8]><div id="hs-cta-ie-element"></div><![endif]--><a href="https://cta-redirect.hubspot.com/cta/redirect/53/be00be7b-acfc-4948-9055-bf6bf9746111" target="_blank"><img class="hs-cta-img" id="hs-cta-img-be00be7b-acfc-4948-9055-bf6bf9746111" style="border-width:0px;" src="https://no-cache.hubspot.com/cta/default/53/be00be7b-acfc-4948-9055-bf6bf9746111.png" alt="CSS介绍"></a></span></span> <!-- end HubSpot Call-to-Action Code --> </div><p></p></span> <p class="post-content__publish-date">最初发布于2020年5月18日上午7:00:00,更新于2020年5月19日</ p><div class="post-content__topic-container blog-postPage-topic"> <p>主题:</ p><a href="//www.emcdepot.com/website/bootstrap-css" class="post-content__topic" data-hubs_params="false">Bootstrap&CSS</a> </div> <div class="post-content__social-share-container"> <div id="hs_cos_wrapper_End_of_Post_CTA" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_custom_widget" style="" data-hs-cos-general-type="widget" data-hs-cos-type="custom_widget"> <div class="wt-blog__post__cta post-content__bottom-cta"> <div class="wt-blog__post__cta__content"> <h3>别忘了分享这篇文章!</h3> <div class="addthis_inline_share_toolbox"></div> </div> </div> </div> </div> </div> </div> </div> <section class="blog-section-header blog-section-header--border-top blog-section-header--arrow-down "> <h3 class="blog-section-header__heading">相关文章</h3> </section> <section class="related-posts"> <!-- hasFeaturedImage: https://cdn2.hubspot.net/hubfs/53/Site%20owner%20using%20CSS%20font-size%20property.jpg --> <article class="blog-card blog-card--one-third "> <figure> <a href="//www.emcdepot.com/website/css-font-size"><img src="//www.emcdepot.com/hubfs/Site%20owner%20using%20CSS%20font-size%20property.jpg" alt="如何改变字体大小在CSS"></a> </figure> <div class="blog-card__content"> <h3 class="blog-card__content-title"><a href="//www.emcdepot.com/website/css-font-size">如何改变字体大小在CSS</a></h3> <div class="blog-card__meta"> <a href="//www.emcdepot.com/website" class="blog-card__blog-link">dota2雷竞技 </a> <a href="//www.emcdepot.com/website/css-font-size" class="blog-card__read-time">|6分钟阅读</a> </div> </div> </article> <!-- hasFeaturedImage: https://cdn2.hubspot.net/hubfs/53/Bootstrap%20site%20owner%20creating%20and%20styling%20buttons.jpg --> <article class="blog-card blog-card--one-third "> <figure> <a href="//www.emcdepot.com/website/bootstrap-button"><img src="//www.emcdepot.com/hubfs/Bootstrap%20site%20owner%20creating%20and%20styling%20buttons.jpg" alt="引导按钮:类和样式解释"></a> </figure> <div class="blog-card__content"> <h3 class="blog-card__content-title"><a href="//www.emcdepot.com/website/bootstrap-button">引导按钮:类和样式解释</a></h3> <div class="blog-card__meta"> <a href="//www.emcdepot.com/website" class="blog-card__blog-link">dota2雷竞技 </a> <a href="//www.emcdepot.com/website/bootstrap-button" class="blog-card__read-time">| 11分钟读数</a> </div> </div> </article> <!-- hasFeaturedImage: https://cdn2.hubspot.net/hubfs/53/GettyImages-873597792.jpeg --> <article class="blog-card blog-card--one-third "> <figure> <a href="//www.emcdepot.com/website/css-grid"><img src="//www.emcdepot.com/hubfs/GettyImages-873597792.jpeg" alt="如何在网站上创建完美的CSS网格[示例布局]"></a> </figure> <div class="blog-card__content"> <h3 class="blog-card__content-title"><a href="//www.emcdepot.com/website/css-grid">如何在网站上创建完美的CSS网格[示例布局]</a></h3> <div class="blog-card__meta"> <a href="//www.emcdepot.com/website" class="blog-card__blog-link">dota2雷竞技 </a> <a href="//www.emcdepot.com/website/css-grid" class="blog-card__read-time">|16分钟读</a> </div> </div> </article> </section> </main> </main> <div class="blog-sticky-footer open hide" data-background="gradient4"> <div class="hs-page-width-normal"> <div class="blog-sticky-footer__container" data-timeout="3000"> <div class="blog-sticky-footer__interactor"></div> <div class="blog-sticky-footer__collapsed-content hidden-content"> <p><strong>扩大提供</strong></p> </div> <div class="blog-sticky-footer__open-content visible-content"> <p><strong>注册为HubSpot的CMS软件雷竞技苹果下载官方版</strong></p> <a href="https://www.hubspot.com/products/cms?hubs_post-cta=mobile-blog-sticky" class="cta cta--medium cta--primary blog-sticky-update">现在得到它</a> </div> </div> </div> </div> </section> </div> <div data-modal="downloadForLater" data-exit="0" class="hsg-modal-container"> <div class="hsg-modal-contents"> <div data-background="secondary4" class="hsg-modal-header"> <span class="hsg-icon hsg-icon-close"></span> </div> <div class="hsg-modal-text" style="text-align: left"> <span id="hs_cos_wrapper_download_for_later" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_form" style="" data-hs-cos-general-type="widget" data-hs-cos-type="form"><h3 id="hs_cos_wrapper_download_for_later_title" class="hs_cos_wrapper form-title" data-hs-cos-general-type="widget_field" data-hs-cos-type="text">下载以后</h3> <div id="hs_form_target_download_for_later"></div></span> </div> </div> </div> </main> </div> </div> </div> </div> <div class="footer-container-wrapper"> <div class="footer-container container-fluid"> <div class="row-fluid-wrapper row-depth-1 row-number-1"> <div class="row-fluid "> <div class="span12 widget-span widget-type-global_group " style="" data-widget-type="global_group" data-x="0" data-w="12"> <div class="" data-global-widget-path="generated_global_groups/4255443445.html"> <div class="row-fluid-wrapper row-depth-1 row-number-1 "> <div class="row-fluid "> <div class="span12 widget-span widget-type-raw_jinja " style="" data-widget-type="raw_jinja" data-x="0" data-w="12"> <footer class="hsg-footer"> <div class="hsg-footer__layout"> <div id="back-link" class="hsg-footer__logo-caret"> <a class="hsg-footer__logo-caret-home" href="#">背部</a> <span class="hsg-footer__close" role="img" aria-label="Close"></span> </div> <nav class="hsg-footer__nav"> <div class="hsg-footer__nav-left" role="navigation"> <section class="hsg-footer__nav-column hsg-footer__nav-column-left"> <input type="checkbox" id="hsg-footer-column-0" name="hsg-footer-column-0"> <label for="hsg-footer-column-0">流行特征</label> <ul> <li class="hsg-footer__nav-item" data-order="0"><a href="https://www.hubspot.com/products/sales/schedule-meeting" data-order="0" data-linkorder="0">免费会议调度程序应用程序</a></li> <li class="hsg-footer__nav-item" data-order="1"><a href="https://www.hubspot.com/products/marketing/social-inbox" data-order="1" data-linkorder="1">社会媒体工具</a></li> <li class="hsg-footer__nav-item" data-order="2"><a href="https://www.hubspot.com/products/sales/email-tracking" data-order="2" data-linkorder="2">电子邮件跟踪软件雷竞技苹果下载官方版</a></li> <li class="hsg-footer__nav-item" data-order="3"><a href="https://www.hubspot.com/products/sales/sales-automation" data-order="3" data-linkorder="3">销售电子邮件自动化</a></li> <li class="hsg-footer__nav-item" data-order="4"><a href="https://www.hubspot.com/products/marketing/ads" data-order="4" data-linkorder="4">广告软件雷竞技苹果下载官方版</a></li> <li class="hsg-footer__nav-item" data-order="5"><a href="https://www.hubspot.com/products/marketing/email" data-order="5" data-linkorder="5">电子邮件营销软件雷竞技苹果下载官方版</a></li> <li class="hsg-footer__nav-item" data-order="6"><a href="https://www.hubspot.com/products/crm/lead-management" data-order="6" data-linkorder="6">领导管理软件雷竞技苹果下载官方版</a></li> <li class="hsg-footer__nav-item" data-order="7"><a href="https://www.hubspot.com/products/crm/pipeline-management" data-order="7" data-linkorder="7">管道管理工具</a></li> <li class="hsg-footer__nav-item" data-order="8"><a href="https://www.hubspot.com/products/sales/email-templates-sales" data-order="8" data-linkorder="8">销售电子邮件模板</a></li> <li class="hsg-footer__nav-item" data-order="9"><a href="https://www.hubspot.com/products/service/help-desk" data-order="9" data-linkorder="9">帮助台软件雷竞技苹果下载官方版</a></li> <li class="hsg-footer__nav-item" data-order="10"><a href="https://www.hubspot.com/products/marketing/forms" data-order="10" data-linkorder="10">免费在线表格建设者</a></li> <li class="hsg-footer__nav-item" data-order="11"><a href="https://www.hubspot.com/products/crm/chatbot-builder" data-order="11" data-linkorder="11">免费Chatbot Builder.</a></li> <li class="hsg-footer__nav-item" data-order="12"><a href="https://www.hubspot.com/products/crm/live-chat" data-order="12" data-linkorder="12">免费实时聊天软件雷竞技苹果下载官方版</a></li> <li class="hsg-footer__nav-item" data-order="13"><a href="https://www.hubspot.com/products/marketing/analytics" data-order="13" data-linkorder="13">营销分析</a></li> <li class="hsg-footer__nav-item" data-order="14"><a href="https://www.hubspot.com/products/marketing/landing-pages" data-order="14" data-linkorder="14">免费登陆页面创建器</a></li> </ul> </section> </div> <div class="hsg-footer__nav-right" role="navigation"> <div class="hsg-footer__nav-full" role="navigation"> <section class="hsg-footer__nav-column "> <input type="checkbox" id="hsg-footer-column-1" name="hsg-footer-column-1"> <label for="hsg-footer-column-1">免费工具</label> <ul> <li class="hsg-footer__nav-item" data-order="0"><a href="https://website.grader.com/?__hstc=20629287.e4e046660731447bf82affe18aa75831.1482962870986.1487962165415.1487964870240.141&__hssc=20629287.1.1487964870240&__hsfp=3218882972" data-order="0" data-linkorder="0">网站学生</a></li> <li class="hsg-footer__nav-item" data-order="1"><a href="https://www.hubspot.com/make-my-persona" data-order="1" data-linkorder="1">制作我的角色</a></li> <li class="hsg-footer__nav-item" data-order="2"><a href="https://www.hubspot.com/email-signature-generator" data-order="2" data-linkorder="2">电子邮件签名发电机</a></li> <li class="hsg-footer__nav-item" data-order="3"><a href="https://www.hubspot.com/blog-topic-generator" data-order="3" data-linkorder="3">博客创意生成器</a></li> <li class="hsg-footer__nav-item" data-order="4"><a href="https://www.hubspot.com/invoice-template-generator" data-order="4" data-linkorder="4">发票模板生成器</a></li> <li class="hsg-footer__nav-item" data-order="5"><a href="https://www.hubspot.com/marketing-plan-template-generator" data-order="5" data-linkorder="5">营销计划发电机</a></li> <li class="hsg-footer__nav-item" data-order="6"><a href="https://www.hubspot.com/business-templates" data-order="6" data-linkorder="6">免费商业模板</a></li> <li class="hsg-footer__nav-item" data-order="7"><a href="https://www.hubspot.com/industry-data" data-order="7" data-linkorder="7">行业基准数据</a></li> <li class="hsg-footer__nav-item" data-order="8"><a href="https://www.hubspot.com/comparisons" data-order="8" data-linkorder="8">雷竞技苹果下载官方版软件比较库</a></li> </ul> </section> </div> <div class="hsg-footer__nav-full" role="navigation"> <section class="hsg-footer__nav-column "> <input type="checkbox" id="hsg-footer-column-2" name="hsg-footer-column-2"> <label for="hsg-footer-column-2">raybet电子竞技</label> <ul> <li class="hsg-footer__nav-item" data-order="0"><a href="https://www.hubspot.com/our-story" data-order="0" data-linkorder="0">关于我们</a></li> <li class="hsg-footer__nav-item" data-order="1"><a href="https://www.hubspot.com/careers" data-order="1" data-linkorder="1">职业生涯</a></li> <li class="hsg-footer__nav-item" data-order="2"><a href="https://www.hubspot.com/company/management" data-order="2" data-linkorder="2">管理团队</a></li> <li class="hsg-footer__nav-item" data-order="3"><a href="https://www.hubspot.com/company/board-of-directors" data-order="3" data-linkorder="3">董事会</a></li> <li class="hsg-footer__nav-item" data-order="4"><a href="https://ir.hubspot.com/?_ga=2.262843276.12874469.1592422655-430007000.1592422655" data-order="4" data-linkorder="4">投资者关系</a></li> <li class="hsg-footer__nav-item" data-order="5"><a href="//www.emcdepot.com" data-order="5" data-linkorder="5">博客</a></li> <li class="hsg-footer__nav-item" data-order="6"><a href="https://www.hubspot.com/company/contact" data-order="6" data-linkorder="6">联系我们</a></li> </ul> </section> </div> <div class="hsg-footer__nav-split" role="navigation"> <section class="hsg-footer__nav-column "> <input type="checkbox" id="hsg-footer-column-3" name="hsg-footer-column-3"> <label for="hsg-footer-column-3">客户</label> <ul> <li class="hsg-footer__nav-item" data-order="0"><a href="https://help.hubspot.com/" data-order="0" data-linkorder="0">客户支持</a></li> <li class="hsg-footer__nav-item" data-order="1"><a href="https://academy.hubspot.com/hubspot-user-groups" data-order="1" data-linkorder="1">加入本地用户组</a></li> </ul> </section> <section class="hsg-footer__nav-column "> <input type="checkbox" id="hsg-footer-column-4" name="hsg-footer-column-4"> <label for="hsg-footer-column-4">raybet平台</label> <ul> <li class="hsg-footer__nav-item" data-order="0"><a href="https://www.hubspot.com/partners" data-order="0" data-linkorder="0">所有合作伙伴计划</a></li> <li class="hsg-footer__nav-item" data-order="1"><a href="https://www.hubspot.com/partners/solutions" data-order="1" data-linkorder="1">解决方案合作伙伴计划</a></li> <li class="hsg-footer__nav-item" data-order="2"><a href="https://www.hubspot.com/partners/app" data-order="2" data-linkorder="2">应用程序合作伙伴计划</a></li> <li class="hsg-footer__nav-item" data-order="3"><a href="https://www.hubspot.com/startups/partners" data-order="3" data-linkorder="3">HubSpot的对于创业公司来说</a></li> <li class="hsg-footer__nav-item" data-order="4"><a href="https://www.hubspot.com/partners/affiliates" data-order="4" data-linkorder="4">联盟计划</a></li> </ul> </section> </div> </div> </nav> </div> <section class="hsg-footer__contact-links"> <ul class="hsg-footer__social"> <li><a href="https://www.facebook.com/hubspot" target="_blank" class="hstc_facebook"><i class="hsg-icon hsg-icon-facebook"></i><span class="hidden-social">脸谱网< / span ></a></li> <li><a href="https://www.instagram.com/hubspot" target="_blank" class="hstc_instagram"><i class="hsg-icon hsg-icon-instagram"></i><span class="hidden-social">Instagram< / span ></a></li> <li><a href="https://youtube.com/user/HubSpot" target="_blank" class="hstc_youtube"><i class="hsg-icon hsg-icon-youtube"></i><span class="hidden-social">YouTube< / span ></a></li> <li><a href="https://twitter.com/HubSpot" target="_blank" class="hstc_twitter"><i class="hsg-icon hsg-icon-twitter"></i><span class="hidden-social">推特< / span ></a></li> <li><a href="https://www.linkedin.com/company/hubspot" target="_blank" class="hstc_linkedin"><i class="hsg-icon hsg-icon-linkedin"></i><span class="hidden-social">Linkedin< / span ></a></li> <li><a href="https://medium.com/@HubSpot" target="_blank" class="hstc_medium"><i class="hsg-icon hsg-icon-medium"></i><span class="hidden-social">媒介< / span ></a></li> </ul> </section> <section class="hsg-footer__bottom"> <div class="hsg-footer__apps"> <a class="hsg-footer__app" href="https://apps.apple.com/us/app/hubspot/id1107711722" aria-label="Link to App Store"><img class="hsg-deferred homepage-mobile-footer-apple" data-src="https://cdn2.hubspot.net/hubfs/53/app%20store%20high%20res.png" alt="应用商店"></a> <a class="hsg-footer__app" href="https://play.google.com/store/apps/details?id=com.hubspot.android&hl=en_US" aria-label="Link to Google Play"><img class="hsg-deferred homepage-mobile-footer-google" data-src="https://cdn2.hubspot.net/hubfs/53/google%20play%20high%20res.png" alt="谷歌游戏"></a> </div> <div class="hsg-footer__logo" role="img"> <a href="https://www.hubspot.com" aria-label="HubSpot Home Logo"><img class="hsg-deferred" data-src="https://www.hubspot.com/hubfs/WBZ-1165%20Global%20Nav%20Redesign/Wordmark-White.svg" alt="HubSpot的标志"></a> <p>raybet平台</p> </div> <div class="hsg-footer__copyright"> <ul> <li><a href="https://legal.hubspot.com/legal-stuff">合法的东西</a></li> <li><a href="https://legal.hubspot.com/privacy-policy">隐私政策</a></li> </ul> </div> </section> </footer> </div> </div> <!--end widget-span --> </div> <!--end row--> </div> <!--end row-wrapper --> </div> </div> <!--end widget-span --> </div> <!--end row--> </div> <!--end row-wrapper --> <div class="row-fluid-wrapper row-depth-1 row-number-2"> <div class="row-fluid "> <div class="span12 widget-span widget-type-raw_html " style="" data-widget-type="raw_html" data-x="0" data-w="12"> <div class="cell-wrapper layout-widget-wrapper"> <span id="hs_cos_wrapper_module_1497301113455132" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_raw_html" style="" data-hs-cos-general-type="widget" data-hs-cos-type="raw_html"> <!-- prev 4208 --></span> </div> <!--end layout-widget-wrapper --> </div> <!--end widget-span --> </div> <!--end row--> </div> <!--end row-wrapper --> </div> <!--end footer --> <!--end footer wrapper --> <!--[if lte IE 8]> <script charset="utf-8" src="https://js.hsforms.net/forms/v2-legacy.js"></script> <![endif]--> <!-- Start of HubSpot Analytics Code --> <!-- End of HubSpot Analytics Code --> <!-- Begin Domain Settings Code --> <!--[if lt IE 9]> <div style="position:absolute;top:42px;left:0;width:100%;padding:5px 0 5px 15px;color:#b94a48;background:#f2dede";font-size:14px;>Please note: HubSpot no longer supports Internet Explorer version 8 or older. You are using an outdated browser, we recommend you <a href="http://knowledge.hubspot.com/update-browser">upgrade your browser</a> for a better and safer experience.</a></div> <![endif]--> <!-- HREFLANG MACRO --> <!-- begin Convert --> <!-- end Convert --> <!-- End Domain Settings Code --> <div id="fb-root"></div> </body> </html>