离子选择取消文本 - Html

在HTML中，离子选择器可以用来匹配元素的属性值中包含指定值的元素。例如，可以使用 [attribute~=value] 来匹配包含了value值的元素，attribute为元素的属性名称。但是，如果你想要匹配不包含value值的元素，该怎么做呢?

这就需要使用离子选择器的“否定选择器”了。否定选择器的语法为: :not([attribute~=value])，其中，attribute和value分别为你想要排除的属性名和值。举个例子，如果你想要选中不包含class属性值为“myClass”的所有元素，代码就应该这样写: *:not([class~=myClass])。

不仅如此，:not()还支持多个选择器的组合，比如:not(:first-child)就表示排除第一个子元素的所有元素。

下面是一些使用:not()进行文本选择器取消的例子:

- 取消所有带有class为"cancel"的元素的文本:

.cancel:empty:not(:button):not(:checkbox):not(:radio):not(select) { /* 用CSS中的伪类选择器保证元素为空 / width: 100%; height: 100%; opacity: 0; color: transparent; / 让文本透明 / pointer-events: none; / 取消交互事件 */ }

- 取消所有元素的内容，除了`<h1>`和`<h2>`:

*:not(h1):not(h2):empty { color: transparent; }

- 取消列表中所有元素的文本，除了最后一个元素:
```html
<ul class="list">
  <li>文本1</li>
  <li>文本2</li>
  <li>文本3</li>
</ul>

<style>
  .list li:not(:last-child):empty {
    height: 20px; /* 设置高度，让其占位 */
    color: transparent;
  }
</style>

• 取消所有文本节点的文本，仅保留图片:

  <div id="content">
    <img src="example.jpg">
    <p>这是文本</p>
    <img src="example2.jpg">
    <h1>标题</h1>
    <img src="example3.jpg">
    <p>这是更多的文本</p>
  </div>
  
  <style>
    #content *:not(img):empty {
      color: transparent;
    }
  </style>
  

在实际使用:not()时，要注意语法的正确性与适用性，并且应该充分利用CSS的其他属性来保证页面布局的完整性与美观性。