常用CSS选择符

2017-12-04 本文已影响0人一只dororo

1.*

*{margin:0;padding:0; }

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

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

#container *{border:1px solid black; }

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

#container{width:960px;margin:auto; }

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

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

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

.error{color:red; }

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

li a{text-decoration:none; }

后代选择符。当你需要给你的选择符增加特殊性的时候你可以使用。li下面的a标签会展示此css样式

a{color:red; }

ul{margin-left:0; }

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

a:link{color:red; }

a:visted{color:purple; }

我们使用:link 伪类选择符选择所有已经被点击过的锚标签。

此外，我们也有:visited伪类选择符，正如你期望的，允许我们仅给页面上被点击过的或被访问过的锚标签应用样式。

上例中可点击的标签为红色，点击过标签为紫色

ul + p{color:red; }

这被称作相邻选择符。它将只选择紧贴在X元素之后Y元素。上面的例子，仅每一个ul之后的第一个段落元素的文本为红色。