你应该知道的30个css选择器

2024-07-11 08:31:22

字体：大中小

来源：转载

供稿：网友

1.*

复制代码

代码如下:
* {
margin: 0;
padding: 0;
}

对于初学者，在学习更多高级选择器之前，最先了解的选择器。

星号选择器将匹配页面里的每一个元素。很多开发者使用这个技巧将外边距和内边距重置为零。虽然在快速测试时这确实很好用，但我建议你永远不要再生产代码中使用它。它给浏览器带来大量不必要的负担。

* 也能作为子选择符使用。

复制代码

代码如下:
#container * {
border: 1px solid black;
}

这将匹配#container div的每一个后代元素。再次强调，尽量不要使用这种技术。

查看例子

兼容性

•IE6+
•Firefox
•Chrome
•Safari
•Opera

2.#X

复制代码

代码如下:
#container {
width: 960px;
margin: auto;
}

井号前缀允许我们选择id。这是最常见的用法，不过应该慎重使用ID选择器。

反复问自己：我一定需要id来匹配要选择的元素吗？

id选择符是唯一的，不允许重复使用。如果可能的话，先尝试使用一个标签名称，一个新的HTML5元素，甚至是一个伪类。

查看例子

兼容性

•IE6+
•Firefox
•Chrome
•Safari
•Opera

3. .X

复制代码

代码如下:
.error {
color: red;
}

现在介绍的是类选择符。id和类的不同之处在于后者可以多次使用。当你想给一组元素应用样式的时候可以使用类选择符。另外，当你紧想给特殊元素应用样式的时候才使用id。

查看例子

兼容性

•IE6+
•Firefox
•Chrome
•Safari
•Opera

4. X Y

复制代码

代码如下:
li a {
text-decoration: none;
}

下一个最常用的选择符是后代选择符。当你需要给你的选择符增加特殊性的时候你可以使用。例如，如果你只想匹配无序列表下的锚元素？此时后代选择符派上用场。

小贴士——如果你的选择符看起来像这样 X Y Z A B.error，那你就错了。时刻问自己使用这高的权重是否有必要。

查看例子

兼容性

•IE6+
•Firefox
•Chrome
•Safari
•Opera

5. X

复制代码

代码如下:
a { color: red; }
ul { margin-left: 0; }

如果你想匹配页面上的所有的元素，根据他们的类型，而不是id或类名？显而易见，使用类型选择符。如果你需要选择所有的无序列表，请使用ul {}。

上一篇：你对CSS布局中的Position了解程度有多少

下一篇：DIV+CSS通过border样式制作带箭头提示框效果