30个你必须记住的CSS选择符

所以你学会了基础的id，类和后代选择符，然后你就一直用它们了吗？如果是这样，你丢失了（css的）巨大的灵活性。在本文中提到的很多选择器属于CSS3规范的一部分，因此，只有在现代浏览器中才可使用。

1.*

* {  margin: 0;  padding: 0; }

<div id="container">   <ul>    <li> List Item     <ul>       <li> Child </li>     </ul>    </li>    <li> List Item </li>    <li> List Item </li>    <li> List Item </li>   </ul> </div> 

选择符#container > ul将只选择id为container的div的直接子代ul。它不匹配更深层的li的子代的ul。

因此，使用子代选择符有性能上的优势。事实上，这同样适用于基于css选择器的javascript引擎。

查看例子

兼容性

• IE7+
• Firefox
• Chrome
• Safari
• Opera

9. X ~ Y

ul ~ p {   color: red; } 

 a[data-info~="external"] {   color: red; }  a[data-info~="image"] {   border: 1px solid black; } 

这儿有个鲜为人知的特殊技巧，绝对让你印象时刻。~(tilda)符，它可以帮助我们指向那些以空格隔开多个值的属性的元素（真拗口，这翻译我自己都看不懂，水平问题） 

/* Target data-info attr that contains the value "external" */ a[data-info~="external"] {   color: red; }  /* And which contain the value "image" */ a[data-info~="image"] {  border: 1px solid black; }

 很棒，不是吗？

查看例子

兼容性

• IE7+
• Firefox
• Chrome
• Safari
• Opera

17. X:checked

input[type=radio]:checked {   border: 1px solid black; } 

.clearfix:after {   content: "";   display: block;   clear: both;   visibility: hidden;   font-size: 0;   height: 0;   }  .clearfix {   *display: inline-block;   _height: 1%; }

这个改进使用了:after伪类元素来在元素后增加一个空间，然后清除它。这个牛X的技巧你应该收藏到工具包里，特别是当overflow:hidden方法无能为力的时候。 

p::first-letter {   float: left;   font-size: 2em;   font-weight: bold;   font-family: cursive;   padding-right: 2px; }

这段代码会找到所有段落，然后再从中定义这些段落的第一个字符。 

ul {  width: 200px;  background: #292929;  color: white;  list-style: none;  padding-left: 0; }  li {  padding: 10px;  border-bottom: 1px solid black;  border-top: 1px solid #3c3c3c; } 

这个样式会设置一个背景，删除浏览器默认的ul的padding值，并定义边框给每一个li来提供一点深度。

如上图所示，唯一的问题是最上面的边框和最下面的边框看起来有点儿怪。让我们来使用:first-child和:last-child来解决这个问题。

<div>   <p> My paragraph here. </p>   <ul>    <li> List Item 1 </li>    <li> List Item 2 </li>   </ul>    <ul>    <li> List Item 3 </li>    <li> List Item 4 </li>   </ul>   </div> 

现在，别急着往下读，试试看如何能只选择'LIST ITEM 2'?如果你搞定了（或者放弃了），继续读。 

解决办法1

有很多办法能搞定这个测试。我们回顾其中一小部分。以使用first-of-type开始。

ul:first-of-type > li:nth-child(2) {   font-weight: bold; } 

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com

原标题：30个你必须记住的CSS选择符

关键词：CSS