解释如何优化css选择器

by Kevin Kononenko

凯文·科诺年科(Kevin Kononenko)

购物车解释了CSS选择器 (CSS Selectors Explained By Going Car Shopping)

如果您曾经看过汽车经销店，那么您可以了解CSS选择器。 (If you have ever seen a car dealership, then you can understand CSS selectors.)

When you step onto the lot of a car dealership, you’re instantly surrounded by different cars, colors, and years.

当您踏上汽车经销店的大门时，您会立即被不同的汽车，颜色和年份所包围。

And of course there’s that aggressive salesperson. But let’s leave them out this simulation.

当然，还有那个进取的销售人员。 但是让我们把它们排除在模拟之外。

Cars — and car features — can be categorized using the same system as CSS selectors. So if you can understand the different ways to segment cars in a dealership lot, he market, then you can understand CSS selectors.

可以使用与CSS选择器相同的系统对汽车和汽车功能进行分类。 因此，如果您了解在经销商市场中将汽车细分的不同方式，那么您可以了解CSS选择器。

Let’s start off by imaging a car dealership, using HTML:

让我们从使用HTML来形象化汽车经销店开始：

Now we’re going to cover four different ways of styling your HTML elements:

现在，我们将介绍样式HTML元素的四种不同方式：

1. By the type of element i.e. <div>
   通过元素的类型，即<div>
2. By class, i.e. ‘blue’
   按类别，即“蓝色”
3. By id, i.e. ‘123xyz’
   通过ID，即“ 123xyz”
4. By relationship to other elements
   通过与其他元素的关系

按元素类型 (By Type of Element)

In our HTML above, every <div> is really a car of some sort. It could be a sedan, truck, or a convertible. But those are just variations of cars.

在上面HTML中，每个<div>实际上都是某种形式的汽车。 它可以是轿车，卡车或敞篷车。 但是，这些只是汽车的变体。

If we wanted to add styling to every car, we would have to think about the things that every car on this lot has in common.

如果我们想为每辆汽车添加样式，我们将不得不考虑这一批次中每辆汽车的共同点。

Here’s some example CSS:

这是一些CSS示例：

All right, I’m making this basic to start, OK? And yes, I made up some CSS properties to make this work.

好吧，我正在以此为基础开始，好吗？ 是的，我制作了一些CSS属性来完成这项工作。

Anyway, it would be fair to say that every car in this lot is made of steel, has 4 wheels, and has a maximum height of 9 feet. So every time we add a <div> to our HTML, it will have these properties by default.

无论如何，可以公平地说，这辆车中的每辆车都是钢制的，有4个轮子，最大高度为9英尺。 因此，每次我们在HTML中添加<div>时，默认情况下它将具有这些属性。

In fact, we can take this car concept even further. We can break up the interior of the car into HTML as well:

实际上，我们可以进一步推广这种汽车概念。 我们也可以将汽车内部分解为HTML：

What are some properties that the seats and windows might have? They must be shared by all windows and seats! We’ll do a deep dive on this later in this article.

座椅和窗户可能具有哪些属性？ 它们必须由所有窗户和座椅共享！ 我们将在本文后面对此进行深入研究。

使用课堂 (Using Class)

Check out our first HTML snippet, which covers all of the cars on the lot. You can see that each car <div> has a series of classes. These classes are used to assign common properties to all class members.

查看我们的第一个HTML代码段，其中涵盖了该批次的所有汽车。 您会看到每辆汽车<div>都有一系列的类。 这些类用于为所有类成员分配通用属性。

Let’s say we’re assigning the class ‘2005’ to different sedans, trucks, and convertibles. Well, what’s one trait that many cars had in common in 2005? CD players! So let’s do that in pseudo-CSS.

假设我们将“ 2005”类分配给不同的轿车，卡车和敞篷车。 那么，2005年许多汽车的共同特征是什么？ CD播放器！ 因此，让我们在伪CSS中进行操作。

What if we have the class “crewCab”? Trucks with crew cabs have 2 rows of seats, with 5 seats total. So, we might want to assign this class specifically to trucks. We can combine classes by stringing them together.

如果我们有“ crewCab”类怎么办？ 带驾驶室的卡车有2排座位，共5排座位。 因此，我们可能希望将此类专门分配给卡车。 我们可以通过将它们串在一起来组合类。

Classes are a more specific way to reference HTML elements. So, let’s say that all vehicles are made of steel, by default. But you want some vehicles to be made of aluminum. You can create an “aluminum” class that will override the material property of all members of the class.

类是引用HTML元素的更具体的方法。 因此，假设所有车辆默认都是钢制的。 但是您希望某些车辆由铝制成。 您可以创建一个“铝”类，该类将覆盖该类所有成员的material属性。

使用ID (Using ID)

HTML elements can have an ID. This is the most specific way to reference a single element, and it overrides all other styles. This unique identifier is kind of like the element’s license plate.

HTML元素可以具有ID。 这是引用单个元素的最具体方法，它会覆盖所有其他样式。 这个唯一的标识符有点像元素的车牌。

So let’s say you have one car and it has the license plate “123 XYZ”. This car has a unique purple color, because for some reason the owner demanded it. Here is that one element in CSS.

假设您有一辆车，车牌为“ 123 XYZ”。 这辆车具有独特的紫色，因为车主出于某种原因要求它。 这是CSS中的一个元素。

Elements have a 1-to-1 relationship with IDs. Just like with cars and license plates, no two cars can have the same license plate. This is also the most powerful way to identify an element, so you can create unique exceptions to all other rules that an element should be obeying.

元素与ID具有一对一的关系。 就像汽车和车牌一样，任何两辆汽车都不能拥有相同的车牌。 这也是识别元素的最有效方法，因此您可以为元素应遵循的所有其他规则创建唯一的例外。

元素之间的关系 (Relationships Between Elements)

Let’s say you want to make sure that cars with the “leatherSeats” class have seats made out of leather. Check out the second HTML snippet from the “Type of Element” section.

假设您要确保具有“ leatherSeats”类的汽车的皮革座椅。 从“元素类型”部分签出第二个HTML代码段。

You could have also given each <div> with class “seat” the class “leather” as well. But here’s the thing: that wouldn’t allow you to select just the cars with leather seats as a whole. You would only be able to select the seats themselves.

您也可以为每个具有“ seat”类的<div>赋予“皮革”类。 但这就是问题：这不允许您只选择整体带有皮革座椅的汽车。 您只能自己选择座位。

So, we want to give the entire car a “leatherSeats” class to make sure we can select the whole <div> and its children.

因此，我们希望为整个汽车提供“ leatherSeats”类，以确保我们可以选择整个<div>及其子代。

The CSS above will select all elements with class “seat” within a “leatherSeats” container.

上面CSS将在“ leatherSeats”容器中选择所有具有“ seat”类的元素。

Now let’s say you want to make sure that the front passenger seat has seat warmers. You can use the “~” selector, which is known as the sibling selector. It allows you to assign styles to elements relative to their neighbors.

现在，假设您要确保前排乘客座椅上有座椅加热器。 您可以使用“〜”选择器，也称为兄弟选择器。 它允许您为元素相对于其相邻元素分配样式。

So you can say:

所以你可以说：

Here’s one last example. Let’s say one particular make and model had a bizarre, random feature. For example, a 2008 Chevy truck might have had DVD players in the back seats.

这是最后一个例子。 假设某个特殊的品牌和型号具有一种怪异的随机特征。 例如，一辆2008雪佛兰卡车可能在后排座位上装有DVD播放器。

Here’s how you would turn that into CSS:

这是将其转换为CSS的方法：

1. You need to start with multiple classes, since this is a highly specific type of car. This might be “div.truck.chevy.year2008”.
   您需要从多个类开始，因为这是一种高度特定的汽车。 这可能是“ div.truck.chevy.year2008”。

2. Then, think about how you will be able to select the back seats, specifically. You could give the row an extra class, like “.backRow”. Or, you could use the :last-child selector.

   然后，仔细考虑如何选择后座。 您可以为该行添加一个额外的类，例如“ .backRow”。 或者，您可以使用：last-child选择器 。

3. Finally, you need to select the seats themselves.
   最后，您需要自己选择座位。

Answer:

回答：

If you enjoyed this post, you may also enjoy my other explanations of challenging CSS and JavaScript topics, such as positioning, Model-View-Controller, and callbacks.

如果您喜欢这篇文章，那么您可能还会喜欢我对具有挑战性CSS和JavaScript主题的其他解释 ，例如定位，Model-View-Controller和回调。

And if you think this might help other people in the same position as you, give it a “heart”!

而且，如果您认为这可以帮助与您处于同一位置的其他人，请给它一个“心脏”！

翻译自: https://www.freecodecamp.org/news/css-selectors-explained-by-going-car-shopping-51a383f6eb4b/

解释如何优化css选择器