标签
<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选择器。可能会让你的代码跑的很快。这样选择器引擎就可以使用浏览器原生解析器,而不是选择器自己的。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。