从头开始建立一个网站是建立一个快速,轻量级的网站,你有完全控制的一种方式。然而,创建,定制和维护一个HTML网站将需要的技术知识HTML,CSS和JavaScript以及大量的时间投入。 p>
好消息是,有很多方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>
< html lang =“en”> p>
p>CSS选择 TITLE> p> p>p>
HEAD> p>
什么是CSS选择器&它们是如何工作的
p> p>< / html > p>
注意行<链路的rel = “样式表的” href = “style.css文件”>?这是参考你的CSS文件。该文件将只包括选择块,你会看到下面和其他自定义CSS。 p>
现在,我们已经简要了解了CSS选择器的工作原理,下面让我们看看主要的选择器类型。 p>
CSS选择器的类型
下面我们将介绍CSS选择器的四种主要类型。每一个都可以帮助你在网页上选择不同的元素组。我们将从帮助您定位最大的元素组的类型开始,然后转移到更精确的类型。 p>
对于下面的演示,我将使用W3Schools的在线代码编辑器. 这意味着您可以单击任何源代码链接以查看示例背后的完整代码段,然后尝试自己的代码段。 p>
通用选择器
星号(*)是CSS中的通用选择器。默认情况下,它选择文档中的所有元素。 p>
但是,它可以与名称空间结合使用。@namespace在具有多个名称空间的文档(如HTML5、内联SVG、MathML和/或XML)中是一个有用的规则。可以使用已定义的名称空间将通用选择器限制为该名称空间内的元素。 p>
通用选择器语法
通用选择器可以有以下语法: p>
- *或* | * {样式属性} - 所有元素相匹配
- NS | * {样式属性} - 命名空间中的NS的所有元素相匹配
- |*{style properties}-匹配没有定义名称空间的所有元素
通用选择示例
比方说,我想在页面上的每一个元素是橙色,然后我可以使用通用选择。 p>
这是我的HTML: p>
页面上的所有元素,从标题1 p>
至标题2,类别=田园 p>
段落将是橙色。 P> p>
这是我的CSS,带有定义所有元素的通用选择器。 p>
* { p>
颜色:橙色; p>
} p>
这里的结果: p>
类型选择器
类型选择器选择具有给定节点名的所有HTML元素。例如,“a”将选择所有元素,并对它们应用CSS属性值。“Input”将选择所有< Input >元素,“span”将选择所有元素,以此类推。 p> 还可以使用已定义的名称空间将类型选择器限制为该名称空间内的元素。 p> 类型选择的语法是: p> 比方说,我的文档包含段落和span元素,我想跨度元素以橙色高亮显示。 p> 这是我的HTML: p> < span >一个跨度。< / span > p> 没有跨度。 p> p> <跨度>两个跨度。跨度> p> 没有跨度。 p> p> 下面是我的CSS,其中类型选择器定义了span元素: p> 跨度{ p> 背景颜色:橙色; p> } p> 这里的结果: p> 一类选择器选择具有给定的所有元素班级名称. 例如,.intro将选择具有“intro”类的任何元素,就像.index将选择具有“index”类的任何元素一样 p> 如果您使用的开源框架引导CSS,然后您会注意到,几乎所有的样式都使用类作为选择器。你可以找到自举类的上W3Schools的完整列表。 类选择器的语法为: p> 比方说,我想改变这一切的元素带有class =“田园”到橙色。 p> 这是我的HTML: p> 这是我与类选择定义与类的所有元素的CSS“田园”。 p> .pastoral { p> 颜色:橘色 p> } p> 鉴于这些规则,第一H1不会有橙色文字和第二会。这里的结果: p> ID选择器根据元素的ID属性选择元素。例如,#toc将选择ID为"toc "的元素。请注意,这个选择器只有在选择器中给出的值与元素的ID属性完全匹配时才能工作。 p> ID选择器的语法为: p> 假设我想更改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规则应用于具有给定属性值的元素(而不仅仅是属性的存在)。所以,如果我想样式任何链接与"hubspot"在他们的URL,然后我可以使用[href= "hubspot"]。 p> 还可以使用已定义的名称空间将属性选择器限制为仅在该名称空间内的元素。 p> 属性选择器的语法包括以下内容: p> 您使用的语法取决于你是否要选择具有的属性设置为特定值的元素。 p> 比方说,我想和他们的URL橙“hubspot”的任何链接。然后我可以使用一个[HREF =” hubspot”]。 p> 这是我的HTML: p> <李> < a href = " //www.emcdepot.com " > www.emcdepot.com < / > < /李> p> UL> p> 下面是我的CSS,属性选择器定义了包括“hubspot”的所有链接。 p> (href * =“hubspot的”){ p> 颜色为橙色; p> } p> 这里的结果: p> 伪类选择器仅在处于特殊状态时将CSS应用于选定元素。例如,:hover仅在用户将鼠标悬停在某个元素上时才设置该元素的样式。其他常见示例有:活动、:访问和:无效。 p> 伪选择器的语法是: p> 假设我想将用户已经访问过的链接的颜色更改为绿色。我想把用户没有访问过的链接保留到blue。我希望当用户将鼠标悬停在链接上时,链接会变成引人注目的fuschia颜色。 p> 这是我的HTML: p> 所以,你已经访问 www.emcdepot.com li>。为什么在 hubspot.com ? P>查不出来我们的家网站 p> 这是我的CSS,其中包含三个不同的伪类,分别用于未访问、已访问和悬停的链接。 p> a:链接{ p> 颜色:# 0000 ff; p> } p> 答:访问{ p> 颜色:#00FF00; p> } p> 答:悬停{ p> 颜色:#就; p> } p> 这里的结果: p> 现在我们了解了CSS选择器的主要类型,让我们来了解如何在网站上组合它们。 p> 假设您有多个元素要应用相同的CSS,比如h2和一类.spartage,您要使其变为绿色。您可以将代码编写为两个独立的规则,如下所示。 p> h2 { p> 颜色:绿色; p> } p> .spacious { p> 颜色:绿色; p> } p> 或者,你可以在选择组合成一个选择列表。要创建一个选择列表,你只需要列表中的多个选择,并包含样式属性支架之前,请用逗号分隔。由于之前和逗号后空格是有效的,我会每个逗号后面添加一个空格,以使代码更易于阅读。 p> 因此,语法是:元素,元素,元素{样式属性}。下面是上面的例子: 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
类型选择器语法
类型选择器的例子
类选择器
类选择器语法
类选择器的例子
不橙 H1> p>
非常橙色
p>ID选择
ID选择器语法
ID选择符的例子
#ID选择 H1> p>
属性选择
属性选择器语法
属性选择器实施例
p>
伪类选择
伪类选择器语法
伪类选择器的例子
如何在CSS中对多个选择器进行分组?
用CSS选择定制
别忘了分享这篇文章!
相关文章
扩大提供
注册为HubSpot的CMS软件雷竞技苹果下载官方版
现在得到它