Building a website from scratch is one way to create a fast, lightweight site that you have complete control over. However, creating, customizing, and maintaining an HTML site will require technical knowledge ofHTML, CSS, and JavaScript以及大量的时间投资。

Download Now: Free Intro Guide to HTML & CSS

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

Below we’ll take a closer look at what CSS selectors are. Then we’ll explore the different types, how you can use them, and how you can combine them to create a website that looks exactly the way you want.

The element or elements targeted by a CSS selector are referred to as the “subject of the selector.” A subject can be selected based on its element type, class, ID name, given attribute, or pseudo-state.

有了这么多不同的类型,您不仅能够更快地自定义网站 - 还可以维持对代码的粒状控制。

Below we’ll explain how you can use CSS selectors on your site and then explore the different types of selectors. Let’s get started.

How to Use Selectors in CSS

您可以通过两种主要方法在CSS中使用选择器。如果您将HTML和CSS放在一个文档中,则只需在网页的部分中添加CSS选择器即可。您将在下面的示例中看到此方法。

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

That HTML file would look something like this:

CSS Selectors

What are CSS selectors & How Do They Work?

Notice the line ? That’s the reference to your CSS file. That file would only include the selector blocks you’ll see below and other custom CSS.

现在,我们已经简要概述了CSS选择器的工作方式,让我们看一下下面的主要选择器类型。

CSS选择器的类型

下面我们将介绍四种主要类型的CSS选择器。每个都可以帮助您在网页上选择不同的元素组。我们将从可以帮助您定位最大元素组的类型开始,然后进入更精确的类型。

For the demos below, I’ll be using theW3Schools Online Code Editor. That means you can click any of the Source links to see the full code snippet behind the example and try your own.

通用选择器

The asterisk (*) is the universal selector in CSS. By default, it selects all elements in a document.

但是,它可以与名称空间结合使用。@namespace是具有多个名称空间的文档中的有用规则,例如HTML5,Inline SVG,MathML和/或XML。您可以使用定义的名称空间将通用选择器限制为仅在该名称空间内的元素。

通用选择器语法

通用选择器可以具有以下语法:

  • * or *|* { style properties } - matches all elements
  • ns|* { style properties } - matches all elements in the namespace ns
  • |* { style properties } - matches all elements without any defined namespace
通用选择器Example

Let’s say I want every single element on the page to be orange, then I can use the universal selector.

这是我的html:

页面上的所有元素,来自标题1

to the heading 2 with class=pastoral

to the paragraph will be orange.



Here’s my CSS with the universal selector defining all elements.

* {

颜色为橙色;

}

Here’s the result:

Universal selector applying CSS to all elements

Source

类型选择器

类型选择器选择具有给定节点名称的所有HTML元素。例如,“ A”将选择所有元素,并将CSS属性值应用于它们。“输入”将选择所有元素,“跨度”所有元素,依此类推。

您还可以使用定义的名称空间将类型选择器限制为仅在该名称空间内的元素。

类型选择器Syntax

The syntax of a type selector is:

  • 元素{样式属性}
输入选择器示例

Let’s say my document contains paragraph and span elements and I want the span elements to be highlighted in orange.

这是我的html:

一个跨度。

No span.

Two span.

No span.



Here’s my CSS with the type selector defining the span elements:

span {

background-color: orange;

}

Here’s the result:

键入选择CSS的选择器以跨度元素

Source

类选择器

A class selector selects all elements that have a givenclass name. For example, .intro would select any element that has a class of “intro” just as .index would select any element that has a class of “index.”

If you're using the open-source frameworkBootstrap CSS, then you'll notice that virtually all its styles use classes as selectors.You can find a complete list of Bootstrap classes on W3Schools.

类选择器Syntax

The syntax of a class selector is:

  • .classname { style properties }
类Selector示例

Let’s say I want to change all elements with class ="pastoral" to the color orange.

这是我的html:

Not orange

Very orange




Here’s my CSS with the class selector defining all elements with the class “pastoral.”

.pastoral {

颜色为橙色

}

Given these rules, the first h1 would not have orange text and the second would. Here’s the result:

类选择器将CSS应用于带有牧师类的元素

Source

ID Selector

ID选择器根据其ID属性选择一个元素。例如,#TOC将选择具有ID“ TOC”的元素。Please note that this selector only works if the value given in the selector matches the element’s ID attribute exactly.

ID Selector Syntax

The syntax of an ID selector is:

  • #idname { style properties }
ID选择器示例

Let’s say I want to change the color and alignment of the element with the id "hubspot.".

这是我的html:

#id selector



Here’s my CSS with the ID selector defining the element with the ID “hubspot.”

#hubspot {

color:orange;

text-align:right;

}

Here’s the result:

使用HubSpot ID应用CSS的ID选择器将CSS应用于元素

Source

请注意:如果元素的ID属性用所有小写字母编写,并且我将CSS选择器中的“ H”大写,则不会选择该元素。

Attribute Selector

An attribute selector selects all elements that have a given attribute or an attribute set to a specific value. For example, a[href] will match all links, while a[href*=”hubspot”] will only match links with "hubspot" in their URL.

您还可以使用属性选择器将CSS规则应用于具有属性给定值的元素(而不仅仅是属性的存在)。因此,如果我想在其URL中使用“ HubSpot”样式的任何链接,那么我可以使用[HREF =“ HubSpot”]。

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

属性选择器语法

属性选择器的语法包括以下内容:

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

The syntax you use depends on whether you want to select elements that have an attribute set to a specific value.

Attribute Selector Example

Let’s say I want to make any links with "hubspot" in their URL orange. then I can use a[href=”hubspot”].

这是我的html:



这是我的CSS属性选择器定义all links that include “hubspot.”

a [href*=“ hubspot”] {

color:orange;

}

Here’s the result:

Attribute selector applying CSS to links with

Source

Pseudo-class Selector

A pseudo-class selector applies CSS to a selected element or elements only when in a special state. For example, :hover will only style an element when a user hovers over it. Other common examples are :active, :visited, and :invalid.

Pseudo-class Selector Syntax

伪选择器的语法是:

  • 选择器:伪级{样式属性}
伪级选择器示例

Let’s say I want to change the color of links that the user has already visited to green. I want to keep the links that the user hasn’t visited to blue. And I want the links to change to an eye-catching fuschia color when a user hovers over them.

这是我的html:

So you've already visited www.eigoj.com. Why not check out our home site at hubspot.com?



Here’s my CSS with three different pseudo classes for links that have not been visited, have already been visited, and that are being hovered over.

a:link {

颜色:#0000FF;

}

答:访问{

color: #00FF00;

}

a:hover {

颜色:#ff00ff;

}

Here’s the result:

Pseudo-class selector applying CSS to links based on user activity

Source

Now that we understand the major types of CSS selectors, let’s walk through how you can combine them on your website.

How do you group multiple selectors in CSS?

Let’s say you have multiple elements that you want to apply the same CSS to, like an h2 and a class of .spacious that you want to make green. You could write the code as two separate rules, as shown below.

H2 {

color: green;

}

.spacious {

color: green;

}

Or, you could combine the selectors into a selector list. To create a selector list, you just have to list multiple selectors and separate them by commas before the bracket containing the style properties. Since white space is valid before and after the comma, I’ll add in a space after each comma to make the code easier to read.

The syntax would therefore be: element, element, element { style properties }. Here's the example above:

H2,.spacious {

color: green;

}



You can also place selectors on their own line if that makes the code easier to read. In that case, the syntax would look like this:

H2,

.spacious {

color: green;

}



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

Customizing with CSS Selectors

CSS选择器允许您维护准确的来讲ol over your customization process and code when building a site from scratch. While there might be a learning curve, you should invest the time in learning and testing different types of CSS selectors. Doing so can enable you to style your site according to your brand while keeping the code lightweight and your load time fast.

New Call-to-action

css introduction

Originally published May 18, 2020 7:00:00 AM, updated May 19 2020

话题:

Bootstrap & CSS