:only-child
åºçº¿
广æ³å¯ç¨
èª 2015å¹´7æ èµ·ï¼æ¤ç¹æ§å·²å¨ä¸»æµæµè§å¨ä¸å¾å°æ¯æï¼å¯å¨å¤§å¤æ°è®¾å¤åæµè§å¨çæ¬ä¸æ£å¸¸ä½¿ç¨ã
:only-child CSS 伪类表示没æä»»ä½å
å¼å
ç´ çå
ç´ ãè¿ä¸ :first-child:last-child æ :nth-child(1):nth-last-child(1) ç¸åï¼ä½åè
å
·ææ´å°çæéæ§ã
å°è¯ä¸ä¸
li:only-child {
color: fuchsia;
}
b:only-child {
text-decoration: underline;
}
<p>Stars expected to attend:</p>
<ol>
<li>Robert Downey, Jr.</li>
</ol>
<p>Stars yet to confirm:</p>
<ol>
<li>Scarlett Johansson</li>
<li>Samuel L. Jackson</li>
<li>Chris Pratt</li>
</ol>
<p>The ceremony is going to be held in <b>The Dolby Theatre</b>.</p>
夿³¨ï¼æç §æåçå®ä¹ï¼è¢«éæ©çå ç´ å¿ é¡»æ¥æä¸ä¸ªç¶çº§å ç´ ãä»éæ©å¨ Level 4 å¼å§ï¼è¿ä¸åæ¯å¿ é¡»çäºã
è¯æ³
css
:only-child {
/* ... */
}
示ä¾
>åºç¡ç¤ºä¾
HTML
html
<div>
<div>ææ¯å¯ä¸åå
ç´ ã</div>
</div>
<div>
<div>ææ¯ç¬¬ä¸ä¸ªå
å¼å
ç´ ã</div>
<div>ææ¯ç¬¬äºä¸ªå
å¼å
ç´ ã</div>
<div>
ææ¯ç¬¬ä¸ä¸ªå
å¼å
ç´ ã
<div>ä½è¿åæ¯å¯ä¸çåå
ç´ ã</div>
</div>
</div>
CSS
css
div:only-child {
color: red;
}
div {
display: inline-block;
margin: 6px;
outline: 1px solid;
}
ç»æ
ä¸ä¸ªå表示ä¾
HTML
html
<ol>
<li>
第ä¸
<ul>
<li>该å表ä»
æä¸ä¸ªå
ç´ ã</li>
</ul>
</li>
<li>
第äº
<ul>
<li>该å表æä¸ä¸ªå
ç´ ã</li>
<li>该å表æä¸ä¸ªå
ç´ ã</li>
<li>该å表æä¸ä¸ªå
ç´ ã</li>
</ul>
</li>
</ol>
CSS
css
li li {
list-style-type: disc;
}
li:only-child {
color: red;
list-style-type: square;
}
ç»æ
è§è
| è§è |
|---|
| Selectors Level 4 > # only-child-pseudo > |