CSS 选择属性非空的元素

在本文中，我们将介绍如何使用 CSS 选择器选取属性非空的元素，并提供一些示例说明。

阅读更多：CSS 教程

基本概念

CSS 选择器提供了丰富的方式来选取页面上的元素。其中一种常用的选择器方法是根据元素的属性进行选择。有时候我们需要选取那些具有非空属性的元素，这在处理表单输入、数据验证和显示不同状态的元素时非常有用。

CSS 属性选择器

CSS 属性选择器可以根据元素的属性及其属性值进行选择。要选取属性非空的元素，我们可以使用 “exists”（存在）操作符（^=）结合空字符串进行匹配。

下面是一个简单的示例：

<!doctype html>
<html>
<head>
<style>
/* 选取属性 non-empty 的元素 */
[data-non-empty^=""] {
  background-color: yellow;
}
</style>
</head>
<body>

<p data-non-empty="">这是一个非空的元素。</p>
<p>这是一个普通的元素。</p>

</body>
</html>

在上面的示例中，我们使用属性选择器 [data-non-empty^=""] 来选取具有非空 data-non-empty 属性的元素。被选中的元素将会有黄色的背景色。

注意： [data-non-empty^=""] 中的 ^= 表示属性值以空字符串开头。这意味着只要非空即可匹配。

使用示例

1. 响应式表单

在制作响应式表单时，我们常常需要根据表单元素的值来进行样式的调整。比如，如果用户未填写必填字段，我们可以设置相应的输入框背景色为红色，以提醒用户。

<!doctype html>
<html>
<head>
<style>
/* 标记未填写的必填字段 */
input[required][value=""] {
  background-color: red;
}

/* 标记已填写的必填字段 */
input[required][value]:not([value=""]) {
  background-color: green;
}
</style>
</head>
<body>

<form>
  <label for="name">姓名：</label>
  <input type="text" id="name" required value="">
  <br>
  <label for="email">邮箱：</label>
  <input type="email" id="email" required value="">
  <br>
  <label for="phone">电话：</label>
  <input type="tel" id="phone" required value="">
  <br>
  <input type="submit" value="提交">
</form>

</body>
</html>

在上面的示例中，我们使用了属性选择器 input[required][value=""] 来选取所有必填字段（required 属性）且值为空的输入框，然后将其背景色设置为红色。同样地，我们使用 input[required][value]:not([value=""]) 来选取所有必填字段且值非空的输入框，并将其背景色设置为绿色。

2. 动态状态

在一些动态交互的网页中，我们可能需要根据元素的状态来控制样式的改变。比如，当用户点击一个按钮时，我们可以改变按钮的背景色，以表示按钮已被选中。

<!doctype html>
<html>
<head>
<style>
/* 标记按钮已被选中 */
button[data-selected^=""] {
  background-color: #ff9900;
}

/* 标记按钮未被选中 */
button:not([data-selected^=""]) {
  background-color: #ccc;
}
</style>
</head>
<body>

<button onclick="toggleSelection()">按钮</button>

<script>
function toggleSelection() {
  var button = document.querySelector('button');
  if (button.dataset.selected === '') {
    button.removeAttribute('data-selected');
  } else {
    button.setAttribute('data-selected', '');
  }
}
</script>

</body>
</html>

在上面的示例中，我们使用了属性选择器 button[data-selected^=""] 来选取具有非空 data-selected 属性的按钮，并将其背景色设置为橙色。同时，我们使用了 button:not([data-selected^=""]) 来选取没有 data-selected 属性的按钮，并将其背景色设置为灰色。通过点击按钮，我们可以动态地改变其选中状态。