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.

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

如果您想获得更多文章来帮助您成为更好的前端开发人员，请注册我的时事通讯。