css empty_何時使用：empty和：blank CSS偽選擇器

css empty

I made a terrible mistake when I tweeted about :empty and :blank a while ago. I said that :empty wasn’t useful, and :blank is much more useful than :empty.

不久前我在Twitter上發布:empty和:blank時，我犯了一個嚴重的錯誤。我說過:empty沒用，而:blank比:empty有用得多。

I was wrong!

我錯了！

:empty is actually good enough. We don’t even need :blank!

:empty實際上足夠好。我們甚至不需要:blank ！

快速介紹 (A quick introduction)

Okay, first off, what is :empty and what is :blank?

好吧，首先，什么是:empty ？什么是:blank ？

:empty is a pseudo selector. It lets you select elements that are empty.

:empty是偽選擇器。它使您可以選擇空元素。

/* This is CSS */

:empty { /* do something */}

Empty elements are elements that have nothing in them. It cannot even have a whitespace.

空元素是其中沒有任何元素的元素。它甚至不能有空格。

<!-- This is html -->

<!-- Example of an empty element --><div></div>

Empty elements can have comments though, as long as the comments fill up the entire element.

但是，空元素可以有注釋，只要注釋填滿了整個元素。

<!-- This is html -->

<!-- Empty elements can have comments --><div><!-- this is a comment --></div>

:blank is a powered-up form of :empty. It lets you select elements that have whitespaces in them:

:blank是:empty的加電形式。它使您可以選擇其中包含空格的元素：

<!-- This is html -->

<!-- Matched with :blank but not with :empty --><div> </div>

Both :empty and :blank are useful if need to:

如果需要:empty和:blank都是有用的：

Style an empty element
設置空元素的樣式
Create empty states
創建空狀態

一個例子 (An example)

Let’s say you have a <div>. You will only fill up this <div> with content when an error occurs.

假設您有一個<d iv>。僅在發生錯誤時用內容填充this <div>。

<!-- This is html -->

<!-- Without errors --><div class="error"></div>

<!-- With errors --><div class="error">Whoops! Something went wrong!</div>

Here, you need to style the .error div. If you don’t use :empty, you need to rely on a class or attribute. This feels redundant.

在這里，您需要設置.error div的樣式。如果不使用:empty ，則需要依賴一個類或屬性。感覺很多余。

<!-- This is html -->

<!-- With errors --><div class="error" data-state="error">Whoops! Something went wrong!</div>

/* This is CSS */

.error { display: none; background-color: hsl(0, 20%, 50%); padding: 0.5em 0.75em;}

.error[data-state="error"] { display: block;}

But if you use :empty, you don’t need the extra class or attribute. You can style the .error class directly. You don’t even need display: none;!

但是，如果使用:empty ，則不需要額外的類或屬性。您可以直接設置.error類的樣式。您甚至不需要display: none; ！

/* This is CSS */

.error { background-color: hsl(0, 20%, 50%); padding: 0.5em 0.75em;}

.error:empty { padding: 0;}

Here’s a codepen Empty Demo I made for you to play with (try removing the padding: 0; from .error:empty, you’ll see a red background ?).

這是我為您制作的一個CodepenEmpty Demo (嘗試刪除padding: 0;從.error:empty刪除，您會看到紅色背景嗎？)。

Let’s say you want to create a todo-list. When your users see the todo-list for the first time, they will probably see zero todo items.

假設您要創建一個待辦事項列表。當您的用戶第一次看到待辦事項列表時，他們可能會看到零個待辦事項。

What do you show when there are zero todos?

當待辦事項為零時，您會看到什么？

This zero todo state is what we call an empty state.

零待辦狀態就是所謂的空狀態。

If you want to create an empty state for your todo-list, you can add an extra <div> after your <ul>. When you do so, you can use a combination of :empty and the + (adjacent sibling) or ~ (subsequent sibling) selector to style the empty state.

如果你想為你的待辦事項列表為空狀態，你可以添加一個額外的<d靜脈>之后you [R <ul>。當你這樣做，你可以使用一個COM binati EM：關于p TY和+(相鄰s ibling)或?(后續的兄弟姐妹)選擇款式空狀態。

<!-- This is html -->

<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li></ul><div class="empty-state"></div>

/* This is CSS */

.empty-state { display: none;}

ul:empty + .empty-state { display: block;}

I learned how to use :empty this way from Heydon Pickering. Check out Heydon’s article on Inclusive Components if you want to see the todo-list example at work.

我從Heydon Pickering學習了如何使用:empty 。如果您想查看工作中的待辦事項列表示例，請查看Heydon關于“ 包含組件” 的文章。

Note: empty states are important. If you need some convincing, check out this article on Invision.
注意：空狀態很重要。如果您需要說服力，請查看有關Invision的文章。

分解我的推理 (Taking apart my reasoning)

:empty is often enough in practice. I felt :empty isn’t good enough because of two reasons:

實際上， :empty通常就足夠了。我覺得:empty不夠好有兩個原因：

Poor developer experience
糟糕的開發人員經驗
I’ll need to trim whitespaces manually with JavaScript
我需要使用JavaScript手動修剪空格

The first reason is valid, but it isn’t a big deal.

第一個原因是有效的，但這并不重要。

The second reason is not valid. I assumed I had to trim whitespaces, but I don’t need to.

第二個原因無效 。我以為我必須修剪空白，但是我不需要。

I’ll walk you through both of them.

我將帶您瀏覽他們兩個。

Let’s go back to the todo-list example. Say we created a todo-list and we have this markup.

讓我們回到待辦事項列表示例。假設我們創建了一個待辦事項清單，并且有了這個標記。

<!-- This is html -->

<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li></ul><div class="empty-state"></div>

How would you check if :empty was working?

您將如何檢查:empty是否正常工作？

Well, I would remove each <li> with cmd + x. This command cuts the entire line. When I removed all three <li>, I’ll end up with this markup:

好，我將消除每< LI> wi個c MD + X。此命令剪切整行。當我刪除所有thre <li>時，我將得到以下標記：

<!-- This is html -->

<ul></ul>

By now, you’ll know that the HTML above won’t trigger :empty. :empty only works when there are no whitespaces in the element.

現在，您將知道上面HTML不會觸發:empty 。 :empty僅在元素中沒有空格時才有效。

I had to remove the whitespaces for :empty to work, which means a few more keystrokes. This was a chore I hoped I didn’t have to go through.

我必須刪除:empty的空白，這意味著需要更多擊鍵。我希望我不必經歷那件事。

But then again, it’s a small problem for a big benefit.

但是話又說回來，這是一個小問題，卻帶來了很大的好處。

I say it again. You don’t need to trim whitespaces manually in JavaScript if you use :empty. I made a wrong assumption.

我再說一遍。如果使用:empty則無需在JavaScript中手動修剪空格 。我做錯了一個假設。

Let’s go through an example and you’ll see what I mean. We’ll use the todo-list example one more time.

讓我們看一個例子，您會明白我的意思。我們將再使用一次todo-list示例。

Say we have this HTML right now:

假設我們現在有以下HTML：

<!-- This is html -->

<ul> <li>Item 1</li></ul><div class="empty-state"></div>

For the empty state to work, we need to remove the final <li> item from <ul>. If you use plain JavaScript, you can do this with removeChild.

為了使空狀態正常工作，我們需要fro <ul>刪除最后一個< li>項目。如果您使用純JavaScript，則可以o this with removeChild進行此操作。

// This is JavaScript

const ul = document.querySelector('ul')const li = ul.children[0]

ul.removeChild(li)

I believed (erroneously) that removeChild will produce this HTML:

我相信(錯誤地) removeChild將產生以下HTML：

<!-- This is html -->

<ul></ul>

If it produces this HTML, I’ll have to trim any whitespace remaining in the list (which is extra JavaScript).

如果產生此HTML，則必須修剪列表中剩余的所有空白(這是額外JavaScript)。

// This is JavaScript

const ul = document.querySelector('ul')const li = ul.children[0]

ul.removeChild(li)

if (ul.children.length === 0) { ul.innerHTML = ''}

Like I said, I was wrong. It didn’t produce the above HTML. Instead, this is what it produced:

就像我說的，我錯了。它沒有產生上述HTML。相反，這是它產生的：

<!-- This is html -->

<ul></ul>

Which means we didn’t need the extra JavaScript to trim whitespace!

這意味著我們不需要額外JavaScript來修剪空格！

Disclaimer: I checked the output on Safari, Chrome, and Firefox. I haven’t checked Edge yet though. I’ll be super grateful if you can help me test it out!

免責聲明：我檢查了Safari，Chrome和Firefox的輸出。我還沒有檢查Edge。如果您能幫助我進行測試，我將不勝感激！

Here’s the code for this example:

這是此示例的代碼：

See the Pen Empty demo with todolist I made (@zellwk) on CodePen.

請參閱我在CodePen上創建的 todolist ( @zellwk )的PenEmp演示。

:empty is supported on all browsers, and :blank has poor browser support. This gives you plenty of reason to use :empty over :blank today!

:empty在所有瀏覽器上都受支持，而:blank對瀏覽器的支持不佳。這給了您充足的理由使用:empty over :blank ！

I hope that browser support for :blank improves one day though.

我希望有一天，瀏覽器對:blank支持會有所改善。

結語 (Wrapping up)

:empty and :blank let you style empty elements and produce empty states easily.

:empty和:blank允許您設置空元素的樣式并輕松產生空狀態。

:blank is better than :empty because it provides us with a better developer experience. But we can’t use :blank because :blank doesn’t have enough browser support.

:blank比:empty更好，因為它為我們提供了更好的開發人員體驗。但我們不能使用:blank因為:blank沒有足夠的瀏覽器支持。

:empty is often good enough. You can use it already. Use it all you want! ?

:empty通常足夠好。您已經可以使用它了。隨便使用它吧！？

Give :empty a go and let me know what you think!

放開:empty走，讓我知道您的想法！

Thanks for reading. Did this article help you in any way? If you did, I hope you consider sharing it. You might help someone out. Thank you!

謝謝閱讀。本文對您有任何幫助嗎？如果這樣做，希望您考慮共享它。您可能會幫助某人。謝謝！

This article was originally posted at my blog.

本文最初發布在我的博客上 。

如果您想獲得更多文章來幫助您成為更好的前端開發人員，請注冊我的時事通訊。