You'll often hear people say things like use a single class selector for everything and this can definitely be a very handy rule of thumb

你經常會聽到有人說，什麼都用一個類選擇器，這絕對是一條非常有用的經驗法則

Especially if you're early on in your CSS journey, but here at my channel

尤其是當你剛開始接觸 CSS 時，但在我的頻道里

I like to help people fall in love with CSS and one of the ways to do that is to take off our training wheels

我喜歡幫助人們愛上 CSS，而實現這一目標的方法之一就是摘掉我們的 "訓練輪"。

And so today we're gonna be looking at some

是以，今天我們將探討一些

Tricks that we can do to help when it comes to writing less code because when you just use a single class for everything sometimes you end up with a lot more code than you actually need and also look at some cool little user interaction tricks that we

我們可以使用一些小技巧來幫助減少代碼量，因為當你使用一個單一的類來處理所有事情時，有時你的代碼量會超出實際需要。

Can do with some more advanced CSS selectors and we're going to do that by diving into this example that I have here where we're gonna explore a whole bunch of different things and

我們可以使用一些更高級的 CSS 選擇器，我們將通過深入研究這個示例來實現這一點，在這個示例中，我們將探索一大堆不同的東西，包括

The first thing we're gonna be looking at is you can see I have a navigation set up at the top

我們要看的第一件事是，你可以看到我在頂部設置了一個導航

But I have bullet points because it's set up with a list and then I have a regular list here

但我有彈出式要點，因為它設置了一個列表，然後我在這裡有一個常規列表

And then I have this image gallery set up with a list over here

然後，我在圖片庫中設置了一個列表

And a lot of the times in our CSS

在我們的 CSS 中，很多時候

We'll get something like this to remove the bullet points because so many lists that we create don't need them

因為我們創建的很多列表都不需要項目符號，所以我們可以用這種方法去掉項目符號。

The problem is when we do that

問題是，當我們這樣做時

Well, it helps with things like my navigation and my image gallery down here at the bottom

嗯，它有助於我的導航和底部的圖片庫等工作

It doesn't actually help with this and I don't want to have to bring those styles back in. So, how can I do that?

實際上，這對解決這個問題沒有任何幫助，我也不想再把這些樣式帶回去。那麼，我該怎麼做呢？

Well, we can actually be a little bit more specific with the selector

實際上，我們可以用選擇器來做得更具體一些

But in an interesting way because if we look here this has a class on it

但有趣的是，如果我們看一下這裡，這上面有一個類

This one doesn't and then the one that's further down over here also has a class on it

這個沒有，再往下的那個上面也有一個班級

So I can actually select anything that has a class by putting an attribute selector here with my square brackets and just write class

是以，我可以在這裡用方括號加上一個屬性選擇器，然後寫上 class，就可以選擇任何有類的東西了。

And hit save and now the ones that have classes get the styling on it

然後點擊 "保存"，現在，有類別的程序就能獲得樣式了

But if I have a UL without a class, well now we get no styling on there and we can do this in reverse, too

但是，如果我有一個沒有類的 UL，那麼現在我們就不會在上面設置任何樣式，而且我們也可以反過來這樣做

So you might want to come in and you might want to say UL and say not

所以，你可能想進來，可能想說 UL，也可能想說不

Class and then you can select any UL that doesn't have a class because maybe you want to change your font size for some reason

類，然後您可以選擇任何沒有類的 UL，因為您可能出於某種原因想要更改字體大小。

We can say one RAM or something and make your font size bigger or smaller or whatever you need to do

我們可以說一個 RAM 或其他什麼，並將您的字體變大或變小，或做任何您需要做的事情

But you can use any element that either has a class or doesn't have a class this way which can really come in handy

不過，您可以使用任何有類或無類的元素，這樣就能派上用場了

And actually we look at my navigation right here. You can see the signup link

實際上，我們可以看看我的導航。你可以看到註冊鏈接

That's just right there and there's a problem with it where it's hard to read the text because my normal button should look like this

它就在那裡，但有一個問題，就是很難讀取文字，因為我的正常按鈕應該是這樣的

But my class is overwriting it and that's because I styled it this way where I have a descendant selector on there

但我的類卻覆蓋了它，這是因為我是這樣設計它的，我在上面設置了一個後代選擇器

So this is higher specificity than my normal button styling and it's it's ruining my button that's up there so there are other options here one of them would be to do what we just did here where we could do that exact thing

是以，這比我正常的按鈕樣式更具特殊性，而且它破壞了我上面的按鈕，所以這裡還有其他選擇，其中之一就是像我們剛才那樣做，我們可以做到這一點

And say not and in the not say class and hit save so then we're only styling regular links

然後說 "不"，在 "不 "中說 "類"，點擊保存，這樣我們就只能為普通鏈接設計樣式了。

But if you have a link that does have a class in there or something then it just gets its regular

但是，如果你的鏈接中確實有一個類或其他東西，那麼它就會獲得常規的

Styling which can definitely come in handy and I've definitely used this one before so in certain situations

造型設計肯定會派上用場，我以前肯定用過這個，所以在某些情況下

Whether it's just even more generic things or to be a little bit more specific in how you want to style things

無論是更普通的東西，還是更具體一點的風格

Being able to choose something for a class can definitely be pretty useful. Okay. So next up we're gonna jump down to this

能為班級選擇一些東西絕對是非常有用的。好了，接下來我們跳到這裡

Showcase that's right here. Let me move my head down to the bottom

展示櫃就在這裡。讓我把頭移到最下面

So I don't cover any of these images and here I just have a list set up with my showcase list and then list items

是以，我沒有覆蓋任何這些影像，在這裡，我只是設置了一個列表，上面有我的展示列表，然後是列表項目

For each one and then an image inside of each one of those

每張圖片，然後在每張圖片中添加一個影像

Really quickly. I don't have any alt text on here

真的很快。我這裡沒有alt文本

I left it blank because I just set up a quick demo

我把它留空是因為我只是做了一個快速演示

This is definitely a do as I say and not as I do because you should definitely be putting alt text on images if they're

這絕對是 "說到做到"，因為你絕對應該在圖片上添加 alt 文本，如果它們是

Like this, this is not really decorative. You should have some sort of context of what those images actually are

就像這樣，這不是真正的裝飾。你應該對這些圖片的實際內容有所瞭解

But if we come in here

但如果我們來到這裡

This is how I've set up my grid where I'm using my repeat syntax here to set up six columns

這就是我設置網格的方法，我在這裡使用重複文法設置了六列

And what I want to do is highlight the ones in the middle to sort of balance out my grid a little bit here and we

我想做的是突出中間的部分，使我的網格稍微平衡一些，然後我們

Can do that in an interesting way. So if I come in and we do that showcase list and I'm gonna select

能以一種有趣的方式做到這一點。所以，如果我進來，我們做那個展示列表，然後我要選擇

My li and I'm gonna do nth child or it could also be an nth of type

我和我的李要做第 n 個孩子，或者也可以是第 n 個類型的孩子

It depends how you want to do it, but nth child will work fine for what I'm gonna do here

這取決於你想怎麼做，但第 n 個子節點可以很好地滿足我在這裡要做的事情

And let's select this one here. So I have six. That's my seventh one

讓我們選擇這個。所以我有六個。這是我的第七個

So I could just put seven here and hit and then I'm gonna say grid

所以，我可以在這裡寫上 7，然後點擊，然後我會說網格

Column is two and this is not the trick that we're looking at

欄是兩個，這不是我們要看的把戲

Let's do a span to not just the two and it gets bigger because now we're spanning across

讓我們做一個跨度，不只是這兩個，它會變得更大，因為現在我們要跨過

Two of the columns on my grid

網格中的兩列

Ideally, I also want to do that for this image and this image

理想情況下，我還想為這幅影像和這幅影像這樣做

So we get those ones all bigger and then it will fill up everything and it's gonna balance out

所以，我們把這些都變大，然後就會填滿所有的東西，這樣就會平衡了

So I could take this and then also do it for the 8th and also do it for the 9th

是以，我可以把這個也用於第 8 次會議，還可以用於第 9 次會議。

But there's another way and we can use this to select ranges of content as well and so the first thing we want to do is actually say it's gonna be an n plus 7 and what that means is it's

但還有另一種方法，我們也可以用它來選擇內容範圍，所以我們要做的第一件事就是說它將是 n 加 7，這意味著它是

Gonna select the 7th and every one after that. So we're going there. We're selecting all of this

我們要選第 7 個，之後每個都要選。所以我們要去那裡。我們選擇所有這些

But now I just want to exclude these ones at the bottom

但現在我只想把底部的這些排除在外

I only want it to be these three that are right here. So to do that attach. There's no spaces or anything like that

我只想要這裡的三個。所以要這樣做。沒有空格之類的東西

I'm gonna do an nth child again and say it's negative n plus 9 and the negative end

我再來一次 n 次方，說它是負 n 加 9，負數末尾

It means we're counting backwards. So we're gonna go from the 9th one and count backwards

這意味著我們在倒數。所以我們要從第 9 個開始倒數

So now if I hit save it's selected the 7th the 8th and the 9th and of course I could change that

是以，如果我點擊保存，就會選擇第 7 個、第 8 個和第 9 個。

You know any range you want here

您可以在這裡找到您想要的任何範圍

I could do this starting at 3 and then it will go from the 3rd all the way to the 9th

我可以從 3 點開始，然後從 3 點一直進行到 9 點。

So starting at and ending at right there a simple comment here. It should be pretty easy to tell what's actually happening

所以，從這裡開始，到這裡結束，這裡有一個簡單的註釋。應該很容易看出實際發生了什麼

Let's move this back to being 7 8 & 9

讓我們把它移回 7、8 和 9 號房間吧

And yeah, it works really well

是的，效果非常好

And the reason this is working is because it's only finding things that match both of these so it has to be both an nth child 7 up and an nth child of 9 going backwards and so it selects the range of content. This is a really useful one in my opinion

這樣做的原因是，它只能找到同時符合這兩個條件的內容，是以必須是第 n 個子項 7（向上）和第 n 個子項 9（向後），這樣它就選擇了內容範圍。在我看來，這是一個非常有用的功能

You might not use it regularly, but you're super happy to know it exists when you do actually need it

您可能不會經常使用它，但當您真正需要它時，知道它的存在，您會感到非常高興

And now moving on to the next step

現在進入下一步

We're gonna stick with our showcase grid here and I'm gonna look at two different ways

我們將繼續使用展示網格，我將介紹兩種不同的方法

We'd accomplish the same thing which is selecting every element other than the one that we're interacting with

我們要做的事情是一樣的，即選擇與我們交互的元素以外的所有元素

So to be able to do that when I say interacting I'm gonna do it as a hover

是以，當我說交互時，我將把它作為懸停來做。

But this could work with a focus as well

但這也可以與重點相結合

My images can't be focused and I wouldn't really want them to be but if you did this in a different way where you might have links or other things that are involved you could definitely do with this with focus states to and we're gonna say that we have my

我的影像無法聚焦，而且我也不希望它們聚焦，但如果你以另一種方式來做，你可能會有鏈接或其他涉及的東西，你肯定可以用聚焦狀態來做這個，我們會說我們有我的影像。

Showcase list once again and then on that showcase list

再次展示列表，然後在該展示列表上

We're gonna say a hover and then we're gonna select every image that's inside the showcase list and it's only gonna impact it when we're

我們會說一個懸停，然後我們會選擇展示列表中的每張圖片，只有當我們

Hovering on the showcase list and we're just gonna do something simple

懸停在展示列表上，我們要做的事情很簡單

We're gonna lower the opacity down to like 8.5

我們要把不透明度降到 8.5 左右

So if I hover anywhere you can see the whole list darkens because all the images are getting the opacity of 0.5

是以，如果我將鼠標懸停在任何位置，你可以看到整個列表變暗，因為所有影像的不透明度都是 0.5

This is really important. We don't do it like this because this would look exactly the same right now but we wouldn't be able to overwrite things that are inside of it because if you take a parent and you reduce the opacity you can't go into one of the

這一點非常重要。我們不這樣做，因為現在看起來完全一樣，但我們無法覆蓋它內部的東西，因為如果你把父對象的不透明度降低，你就無法進入其中的一個對象。

Children and raise the opacity of that child

孩子，並提高該孩子的不透明度

Whereas if we lower the opacity of all the images what we can then do we're gonna duplicate the selector right here and we're gonna say that we're gonna move this off of here showcase list image hover and

而如果我們降低所有圖片的不透明度，我們就可以在這裡複製選擇器，然後說我們要將其從這裡的展示列表圖片懸停處移走，然後將其從這裡的展示列表圖片懸停處移走。

The opacity will be 1 and so now whichever one I'm hovering on is actually going to get that opacity

不透明度將為 1，是以現在無論我懸停在哪個位置上，都將獲得該不透明度。

Which is kind of cool and this is working because of the cascade because these are equal specificity, right?

這有點酷，這是因為級聯的作用，因為這些都具有相同的特異性，對嗎？

We have a class selector. We have the pseudo selector here

我們有一個類選擇器。這裡有一個偽選擇器

And then we have the element selector and we get those same ones here just in a different order

然後，我們有了元素選擇器，在這裡我們得到了同樣的元素，只是順序不同而已

So same specificity this one wins because it comes second and

是以，同樣的特異性，這一項勝出，因為它排在第二位，而且

That works and you could put a transition or something on here to make it look a little bit nicer, of course

當然，這也行得通，你還可以在這裡加個過渡線什麼的，讓它看起來更漂亮一些。

And there is another way to do this the other way to do this is a little bit different though where what we can do is I'm going to comment this out and

還有另一種方法，不過另一種方法有點不同，我們可以這樣做，我把這個註釋出來，然後

We're gonna come in and this could be really useful, but browser support isn't quite as good, but I'm gonna say showcase

我們要進來了，這可能真的很有用，但瀏覽器支持不是很好，但我要說的是展示

List has image hover and let's start with that

列表具有影像懸停功能，讓我們從列表開始

Actually, we're gonna say yeah has image hover and

實際上，我們會說是的，有影像懸停和

Here we're gonna say image and we can do the same opacity of 0.5

這裡我們要說的是影像，不透明度同樣為 0.5

So now if I'm hovering on top of an image, you'll notice that they get the opacity of 0

現在，如果我將鼠標懸停在影像上方，你會發現它們的不透明度為 0

There is a difference here though, because if I go in between the two of them

但這兩者之間還是有區別的，因為如果我在這兩者之間選擇

We're not getting it because I'm in a gap now

我們沒有得到它，因為我現在處於空檔期

So this is the difference with the opacity with these small gaps that definitely can lead to some flickering do apologize for that bother

這就是這些小間隙與不透明度之間的差別，它們肯定會導致一些閃爍，對此我深表歉意。

Do a little bit

做一點

But um, I'll try not to do that too much

不過，我會盡量少這樣做的

But it's definitely like a potential downside

但這絕對是一個潛在的不利因素

But it could also be potentially what you want because you might want this only to come into effect when you're specifically on whatever element you're building this interaction around and

但這也有可能是你想要的，因為你可能希望只有當你在特定的元素上建立這種交互時，它才會生效。

The cool thing with this is if we come here we can do it now with a single selector by saying not hover

最酷的是，如果我們來到這裡，現在只需使用一個選擇器，說 "不懸停"，就能做到這一點。

And this looks kind of weird for sure. We're doing basically the same thing we were doing here

這看起來肯定有點奇怪。我們正在做的事情與這裡基本相同

But we're doing it with a single selector because we're saying if my showcase list has an image that's being hovered on

但我們使用的是單個選擇器，因為我們可以說，如果我的展示列表中有一張圖片被懸停在

Every image that's not currently being hovered on will get the opacity of 0.5

當前未被懸停的每幅影像都將獲得 0.5 的不透明度

So the has selector here is super cool super powerful and is actually getting to in a sort of acceptable level of browser support

是以，這裡的 has selector 超酷、超強，實際上已經達到了瀏覽器支持的可接受水準。

So I'll put a link to the description so you can make your own mind up about it if it has good enough support or

是以，我將提供一個說明鏈接，您可以自行決定它是否有足夠的支持或

Not but being able to select all the siblings other than the current one you're interacting with can be quite useful

不是，但如果能選擇當前交互對象以外的所有兄弟姐妹，就會非常有用

And and you can do some interesting things with that

你可以用它做一些有趣的事情

So yeah, it looks a little bit strange

所以，是的，看起來有點奇怪

But once you understand what it's doing super cool selector right there and this next one just because I wanted to stick with the example

但是，一旦你明白了它的作用，就會發現它是一個超級酷的選擇器。

Here we're gonna stick with our showcase though

不過在這裡，我們還是要堅持我們的展示方式

I'm gonna comment this out the finished code for all of this will be in the description down below though

我將把這些內容註釋出來，所有這些內容的完整代碼將在下面的說明中列出

So there'll be a link to a code pen where you can play around with any of these if you want them

是以，這裡會有一個代碼筆的鏈接，如果你需要的話，可以在代碼筆中使用這些代碼。

But what we're gonna do now is one where it's about selecting proceeding and following siblings

但我們現在要做的，是選擇進行和跟隨兄弟姐妹

So let's say once again, we have my showcase list and in this case

是以，讓我們再說一次，我們有我的展示清單，在這種情況下

I'm gonna do it on an LI and not the image just because if we come and look here

我將在 LI 上做，而不是在影像上，因為如果我們來這裡看看

We have the allies and then the images inside of them

我們有盟友，然後是盟友內部的影像

So for this to work, we have to work with direct siblings and we don't want to bounce back and forth

是以，要想成功，我們必須與直系兄妹合作，我們不想來回折騰

There's probably ways we could use has but it just would complicate something for nothing

我們可能有辦法使用它，但這隻會讓事情白白複雜化

We're already gonna be using has anyway, so I'm gonna say LI

反正我們已經要使用 "Has "了，所以我要說 "LI"。

Hover and we need to say plus LI and what we're gonna do here is say that the we'll give it an outline so it doesn't shift the layout at all five pixels solid lime and

懸停後，我們需要加上 "LI"，在這裡我們要做的就是說，我們會給它一個輪廓，這樣它就不會移動佈局了。

Now if I hover on one of these you can see it's not the one I'm currently hovering on but the one after it is

現在，如果我將鼠標懸停在其中一個上，你可以看到它不是我現在懸停的那個，而是它後面的那個

Getting that green outline on there and I wouldn't actually do this

把綠色輪廓畫上去，我就不會這麼做了

This would just you know be very frustrating as a user

要知道，作為用戶，這將會非常令人沮喪

But it's going to show that we can select an item that's coming after something

但它會顯示，我們可以選擇在某項內容之後的項目

And I'll show you a way that we could probably use this in a good way

我將向你們展示一種方法，我們或許可以很好地利用這一點

And but it are not a good way, but maybe a useful way

但這不是一個好辦法，也許是一個有用的辦法

But let's come here on the LI hover where what we're gonna do is LI and then we can say

但是，讓我們來到 LI 懸停區，在這裡我們要做的是 LI，然後我們可以說

Has and I'm gonna wrap all of this together and we can just say plus hover

我將把所有這些合併在一起，我們可以說加上懸停

So if we hover on an LI if the element after it is currently hovering

是以，如果我們懸停在一個 LI 上，而它後面的元素當前正在懸停

Let's just change this over to pink or something just so we see that it's a different color

讓我們把它換成粉紅色或其他什麼顏色，這樣我們就能看到它是不同的顏色了

So now the preceding sibling or the sibling before it is getting the pink and let's change that pink to a hot pink

所以，現在它的前一個兄弟姐妹或前一個兄弟姐妹得到了粉紅色，讓我們把粉紅色換成熱粉紅色吧

So it actually stands out on this dark background and there we go

是以，它在深色背景中顯得格外醒目。

You can see we're selecting the element just before and the element just after

你可以看到，我們選擇了前面的元素和後面的元素

And we can do this to another degree too because I'm using the direct sibling

我們還可以在另一種程度上做到這一點，因為我使用了直系同胞

Selector here, but I could change this to be a tilde like that

這裡是選擇器，但我可以把它改成這樣的轉折號

And that means it's gonna select all the previous and all the ones before it

這意味著它將選擇所有前一個和所有前一個

So you can see as I move that around it's doing you get the idea of what it's doing, right?

所以，你可以看到，當我移動它時，你就會明白它在做什麼，對嗎？

So all the ones before are pink and all the ones after are green

所以之前的都是粉色，之後的都是綠色

So we could do some interesting things with that as well

是以，我們也可以利用這一點做一些有趣的事情

And if you have any ideas on how you might use something like this

如果你有任何想法，可以使用這樣的東西

Please leave a comment down below and let me know

請在下面留言告訴我

But what I'm gonna do is I'm actually gonna go back to this version of it and we could also add in one more selector

但我要做的是，我實際上要回到這個版本，我們還可以再添加一個選擇器

Here where we could do something showcase showcase list

在這裡，我們可以做一些展示列表

List Li hover and maybe this gets the outline as well. So we say outline of

李列表懸停，也許這也能得到輪廓。所以我們說

Lime then this one gets like green on it and then this selector. I'm gonna cut that we're gonna do a comma here just so both of them get the same styling on it and