首先有abc三數,如選擇符中有ID選擇符,則a加1, 如果有屬性選擇符、類型選擇符或僞類則b加1,如果有類選擇符,則c加1。
如:#div DIV 則abc = 101。
層疊選擇調用數字最高的樣式。
.firstChild :first-child
{
color: Green;
}
div > :first-letter
{
font-size: 40px;
}
div + em
{
color:blue;
}
div > em + p
{
color: Red;
}
.MoneyRMB P:before
{
content: "$";
color: Red;
}
.MoneyRMB P:after
{
content: "RMB";
color: Blue;
}
<h5>green?</h5>
<div>havn't css.</div>
<em>text color is blue</em>
<b>bbbbbbbbbbbbbbbb</b>
<hr />
<div class="firstChild">
<em>em1</em>
<em>em2</em>
<p>p is red.</p>
</div>
<dl class="MoneyRMB">
<dt>Before/After : content, IE 不支持。</dt>
<dd>
<p>100</p>
<p>200</p>
<p>300</p>
</dd>
</dl>
background-color: #EAEAFF;
}
li.sub {
background-color: #FCFCFC;
}
@media screen {
div.bottom {
background-color: #cccccc;
position: fixed;
bottom: 0px;
left: 0px;
right: 0px;
height: 20px;
}
div.top {
background-color: white;
}
div.Hide {
}
}
@media print {
div.bottom {
position: absolute;
top: 0px;
}
div.top {
position: relative;
top: 20pt;
}
div.Hide {
visibility:hidden;
}
}
<div class="Hide">hide me when in print media.</div>
<div id="PrintTop" class="top">
<ul>
<li class="parent">Item Description.</li>
<li>
<ul>
<li class="sub">item1</li>
<li class="sub">item2</li>
<li class="sub">item3</li>
<li class="sub">item4</li>
<li class="sub">item5</li>
<li class="sub">item6</li>
<li class="sub">item7</li>
<li class="sub">item8</li>
<li class="sub">item9</li>
<li class="sub">item0</li>
<li class="sub">item1</li>
<li class="sub">item2</li>
<li class="sub">item3</li>
<li class="sub">item4</li>
<li class="sub">item5</li>
<li class="sub">item6</li>
<li class="sub">item7</li>
<li class="sub">item8</li>
<li class="sub">item9</li>
<li class="sub">item0</li>
<li class="sub">item1</li>
</ul>
</li>
</ul>
</div>
<div id="PrintBottom" class="bottom">
@SUMMARY bottom
</div>
</div>
vertical-align:
span {display:inline; border-top:solid 1px red; border-bottom:solid 1px red; height:30px;}
img.img {border:solid 1px blue; margin:0px; width:3px; height:30px;}
</style>
<div style="width:700px; line-height: 50px; font-size:16px; border:solid 1px green; padding:5px;">
<span style="vertical-align:baseline;">baseline-kp<img class="img" src="" alt="" /></span>
<span style="vertical-align:middle;">middle-kp<img class="img" src="" alt="" /></span>
<span style="vertical-align:sub;">sub-kp<img class="img" src="" alt="" /></span>
<span style="vertical-align:super;">super-kp<img class="img" src="" alt="" /></span>
<span style="vertical-align:text-top;">text-top-kp<img class="img" src="" alt="" /></span>
<span style="vertical-align:text-bottom;">text-bottom-kp<img class="img" src="" alt="" /></span>
<span style="vertical-align:top;">top-kp<img class="img" src="" alt="" /></span>
<span style="vertical-align:bottom;">bottom-kp<img class="img" src="" alt="" /></span>
<hr />
<span>baseline-kp<img class="img" src="" alt="" style="vertical-align:baseline;"/></span>
<span>middle-kp<img class="img" src="" alt="" style="vertical-align:middle;" /></span>
<span>sub-kp<img class="img" src="" alt="" style="vertical-align:sub;" /></span>
<span>super-kp<img class="img" src="" alt="" style="vertical-align:super;" /></span>
<span>text-top-kp<img class="img" src="" alt="" style="vertical-align:text-top;" /></span>
<span>text-bottom-kp<img class="img" src="" alt="" style="vertical-align:text-bottom;" /></span>
<span>top-kp<img class="img" src="" alt="" style="vertical-align:top;" /></span>
<span>bottom-kp<img class="img" src="" alt="" style="vertical-align:bottom;" /></span>
</div>
<html xmlns="http://www.w3.org/1999/xhtml">