CSS3选择器实战：根、否定、空与目标选择器解析

本文主要介绍了CSS3中四种常用的选择器：根选择器`:root`、否定选择器`:not`、空选择器`:empty`和目标选择器`:target`，并给出了相应的使用示例。 1. **根选择器**:root - `:root`选择器用于选取文档的根元素，对于HTML文档来说，它等同于`html`元素。通过`:root`，我们可以设置全局样式，如背景颜色、字体大小等。在示例中，将背景颜色设置为绿色。 ```css :root { background: green; } ``` 2. **否定选择器**:not - `:not()`选择器用于选择不匹配指定选择器的所有元素。例如，在表单中，如果希望除提交按钮外的所有输入框都有红色边框，可以这样写： ```css input:not([type="submit"]) { border: 1px solid red; } ``` 这样，除了type属性为"submit"的输入框，其他输入框都将应用这个样式。 3. **空选择器**:empty - `:empty`选择器用来选择没有子元素（包括文本节点、注释等）的元素。注意，即使是空格也会使元素不满足`:empty`条件。例如： ```css div:empty { border: 1px solid green; } ``` 在示例中，只有没有任何内容的`<div>`元素会显示绿色边框。 4. **目标选择器**:target - `:target`选择器用于选取当前活动的目标元素，即URL的井号(#)后面所跟的ID。这常用于实现页面元素的动态显示或隐藏。例如，点击链接后显示或改变特定元素的样式： ```css .not_show { display: none; } #test:target { display: block; } ``` 在这个例子中，当链接被点击，对应的`id="test"`的元素将显示出来。 以上四种选择器是CSS3中增强的高级选择器，它们提供了更精细的控制，帮助开发者更精准地定位和样式化网页元素。学习和掌握这些选择器，可以提高CSS的编写效率和代码的可维护性。