总结30个CSS3选择器

时间:2017-05-08

标签

<ul>
   <li> List Item </li>
   <li> List Item </li>
   <li> List Item </li>
</ul>

这里没啥内容,就是一个了 List。

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;
}

上面的代码将设置背景色,移除浏览器默认的内边距,为每个li设置边框以凸显一定的深度。

28 selector:only-child : 伪类选择器

div p:only-child {
   color: red;
}

说实话,你会发现你几乎都不会用到这个伪类。然而,它是相当有用的,说不准哪天你就会用到它。  

它允许你获取到那些只有一个子标签的父标签下的那个子标签。就像上面那段代码,只有一个段落标签的div才被着色。

<div><p> My paragraph here. </p></div>
<div>
   <p> Two paragraphs total. </p>
   <p> Two paragraphs total. </p>
</div>

上面例子中,第二个div不会被选中。一旦第一个div有了多个子段落,那这个就不再起作用了。

29 selector:only-of-type: 伪类选择器

li:only-of-type {
   font-weight: bold;
}

结构性伪类可以用的很聪明。它会定位某标签下相同子标签的只有一个的目标。设想你想获取到只有一个子标签的ul标签下的li标签呢?  

使用ul li会选中所有li标签。这时候就要使用only-of-type了。

ul > li:only-of-type {
   font-weight: bold;

最后记住:使用像jQuery等工具的时候,尽量使用原生的CSS3选择器。可能会让你的代码跑的很快。这样选择器引擎就可以使用浏览器原生解析器,而不是选择器自己的。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

  • 共4页:
  • 上一页
  • 4/4下一篇
    上一篇:深入理解css中vertical-align属性 下一篇:CSS实现Tab布局的简单实例(必看)

    相关文章

    最新文章