:before 选择器在被选元素的内容前面插入内容。
p:before
{
content:"台词:-";
background-color:yellow;
color:red;
font-weight:bold;
}
& 表示嵌套的上一级。这是sass的语法,代表上一级选择器
ul{
margin-bottom: 20px;
& >li {
margin-bottom: 0;
}
}
// 解释成CSS为:
ul{margin-bottom: 20px;}
ul > li {margin-bottom: 0;}
E > F 表示选择E元素的所有子F元素(一代),
与E F的区别在于,E F选择所有后代元素,>只选择一代
E+F 相邻选择符(Adjacent sibling combinator) 选择紧贴在E元素之后F元素。
ul li+li{
background: red;
}
<ul>
<li>1</li>
<li class='itemtwo'>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
CSS3 :nth-child() 选择器
规定属于其父元素的第二个子元素的每个 p 的背景色:
p:nth-child(2)
{
background:#ff0000;
}