åç»å å¼éæ©å¨
åºçº¿
广æ³å¯ç¨
èª 2015å¹´7æ èµ·ï¼æ¤ç¹æ§å·²å¨ä¸»æµæµè§å¨ä¸å¾å°æ¯æï¼å¯å¨å¤§å¤æ°è®¾å¤åæµè§å¨çæ¬ä¸æ£å¸¸ä½¿ç¨ã
åç»å
å¼éæ©å¨ï¼~ï¼å°ä¸¤ä¸ªéæ©å¨åå¼ï¼å¹¶å¹é
第äºä¸ªéæ©å¨çææè¿ä»£å
ç´ ï¼ä½ç½®æ 须紧é»äºç¬¬ä¸ä¸ªå
ç´ ï¼åªé¡»æç¸åçç¶çº§å
ç´ ã
css
/* å¨ä»»æå¾ååçå
弿®µè½ */
img ~ p {
color: red;
}
è¯æ³
css
former_element ~ target_element { style properties }
示ä¾
>CSS
css
p ~ span {
color: red;
}
HTML
html
<span>This is not red.</span>
<p>Here is a paragraph.</p>
<code>Here is some code.</code>
<span>And here is a red span!</span>
<span>And this is a red span!</span>
<code>More codeâ¦</code>
<div>How are you?</div>
<p>Whatever it may be, keep smiling.</p>
<h1>Dream big</h1>
<span>And yet again this is a red span!</span>
ç»æ
è§è
| è§è |
|---|
| Selectors Level 4 > # general-sibling-combinators > |