css选择器_CSS选择器

css选择器

Alright! So now that you are well versed with the syntax of CSS, let's move on to Selectors. Selector helps us identify HTML elements on which a particular style has to be applied.

好的！ 现在，您已经对CSS的语法非常了解，让我们继续进行Selectors 。 选择器可帮助我们识别必须在其上应用特定样式HTML元素。

Selectors are of 3 types, namely,

选择器有3种类型，即

1. element Selectors

   元素选择器

2. id Selectors

   id选择器

3. class Selectors

   类选择器

This module will help you understand what selectors mean and how these three types of selectors work, which in turn save a lot of time and efforts when designing extensive(large) webpages.

本模块将帮助您了解选择器的含义以及这三种选择器的工作方式，从而在设计大型(大型)网页时可以节省大量时间和精力。

To build a style sheet, we need to define rules that select HTML elements and apply various style properties to them. We already know about element selectors, (Recall we assigned style to the <h1> tag), don't worry if you do not remember, we will discuss it again in this tutorial. Besides element selector, the two most common forms of selectors are id and class selectors.

要构建样式表，我们需要定义规则来选择HTML元素并将各种样式属性应用于它们。 我们已经知道元素选择器 (请回想一下我们为<h1>标签分配了样式)，如果您不记得，请不要担心，我们将在本教程中再次讨论它。 除了元素选择器外，两种最常见的选择器形式是id和class选择器。

In the video below, we have explained all the three types of CSS selectors in details.

在下面的视频中，我们已经详细解释了所有三种类型CSS选择器。

演示地址

元素(标签)选择器 (Element(Tag) Selectors)

Element selector or Tag selector, works on HTML tag level. When we add styling for an HTML tag directly, in our CSS file, it is known as element selectors.

元素选择器或标签选择器在HTML标签级别起作用。 当我们在CSS文件中直接为HTML标签添加样式时，这称为元素选择器。

For example:

例如：

HTML code

HTML代码

<h1>Welcome to Studytonight</h1>

CSS code

CSS代码

h1 { 
    color: red; 
}

In the above CSS code, we have directly assigned styling to the h1 tag/element, this way of tag selection and styling is known as Element Selectors, as we assign style to the element directly.

在上面CSS代码中，我们直接将样式分配给了h1标签/元素，这种标签选择和样式化方式称为“元素选择器”，因为我们直接将样式分配给了元素。

The above CSS code, will change the font color of the text inside all the h1 tags in the HTML file, to red. This mode of selection should be used when you want to apply base styling to any element/tag, like if you want all the paragraph text in calibri font, you write the following CSS rule:

上面CSS代码会将HTML文件中所有h1标签内的文本的字体颜色更改为red 。 当您要将基本样式应用于任何元素/标签时，应使用此选择模式，例如，如果要使所有段落文本都使用calibri字体，则编写以下CSS规则：

p { 
    font-family: calibri; 
}

Live Example →

现场示例→

id选择器 (id Selectors)

What if, out of all the paragraph tags with font set as calibri, you want one paragraph to stand out on your webpage, and you want to style it differently. How will you do that?

如果在所有将字体设置为calibri的段落标签中，您希望一个段落在网页上突出显示，并且希望以不同的方式设置calibri ，该怎么calibri ？ 你会怎么做？

Elements in HTML can be named for better reference by using an id attribute inside the tag. Consider the following example:

可以使用标记内的id属性来命名HTML中的元素，以供更好地参考。 考虑以下示例：

<p id="unique">CSS is fun!</p>

Now that the tag is named, we can assign a style rule to it just by using #unique (# followed by the id value) of the tag.

现在，标签已命名，我们只需使用#unique ( #后跟id值 )就可以为其分配样式规则。

#unique {
    color: green; 
    text-align: center;
}

Live Example →

现场示例→

#id selector is used, when you want to style a particular tag/element. All you have to do is, assign an id attribute to the HTML tag and provide the styling for it in the CSS file.

当您要为特定标签/元素设置样式时，可以使用#id选择器。 您所要做的就是为HTML标签分配一个id属性，并在CSS文件中为其提供样式。

We can also make an id selector, tag/element specific, by appending the tag before the #id selector in CSS file.

我们还可以通过在CSS文件中的#id选择器之前附加标签，来创建特定于标签/元素的id选择器。

Consider the following style:

考虑以下样式：

p#star {
    font-family: Arial;
}

Live Example →

现场示例→

This would select only the paragraph elements with their id attribute set to star. Comparing this rule to the one we saw earlier,

这将仅选择其id属性设置为star的段落元素。 将此规则与我们之前看到的规则进行比较，

#star {
    font-family: Arial;
}

Which would match any element/tag with an id = "star", be it paragraphs of headings. This may answer your query as to if multiple tags can have the same id? Yes, they can! But as standard practice, id attribute should be used to style a single element.

它将匹配任何id = "star"元素/标签，无论是标题段落。 这可以回答您的询问，即多个标签是否可以具有相同的ID？ 是的他们可以！ 但作为标准做法，应使用id属性来设置单个元素的样式。

Although CSS provides you with a way of selecting element specific id rules, like p#star, it is inappropriate to use same tag names along with id selector all the time and then filter them out based on elements. However, such rules do make sense if you have a style sheet that is being used site-wide and you have different elements by the id star in different documents. To be on the safer side and avoid confusion, it is better to use unique id for the elements.

尽管CSS为您提供了一种选择元素特定的id规则的方法 ，例如p#star ，但始终将同一个标记名与id选择器一起使用，然后根据元素将其过滤掉是不合适的。 但是，如果您有一个在整个网站范围内使用的样式表，并且不同文档中的id star具有不同的元素，则这样的规则确实有意义。 为了安全起见，避免混淆，最好对元素使用唯一的id。

类选择器 (class Selectors)

The rules for a class selectors are defined as .class-name as shown below:

class选择器的规则定义为.class-name ，如下所示：

HTML code

HTML代码

<p class="fancy">I am fancy paragraph</p>
<h1 class="fancy">I am fancy heading</h1>
<h2 class="fancy">Mee too!</h2>

CSS code

CSS代码

.class {
    background-color: black; 
    color: white; 
    font-style: italic;
}

Live Example →

现场示例→

The class attribute is used to define the name of the class a particular tag or a set of tags, belongs to. Unlike id values, class values don't have to be unique because many elements can be members of the same class of style. In fact, elements of different type can also belong to the same style class.

class属性用于定义特定标签或一组标签所属的类的名称。 与id值不同，类值不必是唯一的，因为许多元素可以是同一样式类的成员。 实际上，不同类型的元素也可以属于同一样式类。

Class rules have some variations as well. For example, setting all the h1 elements of the class css_demo to have a background-color of yellow,

类规则也有一些变化。 例如，将css_demo类的所有h1元素设置为黄色的背景色，

h1.css_demo { background-color: yellow; }

can be used.

可以使用。

To explicitly select all elements of the class css_demo, * can be used as well.

要显式选择类css_demo 所有元素 ，也可以使用* 。

*.css_demo{ background-color: yellow; }

is same as,

与...相同

.css_demo{ background-color: yellow; }

Although the class and id attributes provide a great deal of flexibility for creating style rules, many other tags of equal value exist. For example, you may wish to treat all the <strong> tags inside a <p> to be treated differently, as compared to the <strong> tags appearing outside of the <p> tags. For this, you must use Contextual Selection.

尽管class和id属性为创建样式规则提供了很大的灵活性，但是还存在许多其他同等价值的标签。 例如，与出现在<p>标记外的<strong>标记相比，您可能希望将<p>内的所有<strong>标记区别对待。 为此，您必须使用Contextual Selection 。

Such selections are done by specifying the order in which the tags must be nested, separated by >, for the rule to be applied. For example,

通过指定必须嵌套标签的顺序(用>分隔)来完成这些选择，以应用规则。 例如，

p > strong{
    background-color: yellow;
}

Live Example →

现场示例→

The above rule will be applied to all the <strong> tags, inside a <p> tag.

上面的规则将应用于<p>标记内的所有<strong> <p>标记。

All occurrences of the strong element within a p element will have a Helvetica font. Other occurrences of the strong tag which are not included inside a p tag, will not have the same rule applied to them.

p元素中所有出现的strong元素都将使用Helvetica字体。 p标签中未包含的其他strong标签事件将不会应用相同的规则。

Note: Be careful about using contextual selectors. An unwanted comma may turn contextual selection into grouping and vice versa.

注意：注意使用上下文选择器。 不需要的逗号可能会将上下文选择转换为分组，反之亦然。

Now that you are comfortable with selectors, let's move on to background styles in CSS!

既然您对选择器感到满意，那么让我们继续讲CSS中的背景样式！

翻译自: https://www.studytonight.com/cascading-style-sheet/css-selectors

css选择器