站在CSS3的肩上定義選擇器

時間 2020-05-11

標籤站在 css3 css 肩上定義選擇器欄目 CSS 简体版

原文原文鏈接

按上下文選擇元素

按祖先元素選擇要格式化的元素
- 輸入ancestor，這裏的ancestor是但願格式化的元素的祖先元素的選擇器。
- 輸入一個空格（必不可少）。
- 若是須要，對後續的每一個祖先元素重複第（1）和（2）步。
- 輸入descendant，這裏的descendant是要格式化的元素的選擇器。
按父元素選擇要格式化的元素
- 輸入parent，這裏的parent是包含直接格式化的元素的選擇器。
- 輸入>（大於號）。
- 若是須要，對後代每一個父元素重複第（1）步和第（2）步。
- 輸入child，這裏的child是要格式化的元素的選擇器。

.architect > p{
    　　color:red;
}
/*這個選擇器僅僅選擇architect類元素的子元素（而非子子元素，子子子元素等）的p元素。包含於任何其餘元素的p元素均不會被選擇*/

按相鄰同胞元素（sibling）選擇要格式化的元素

...
<body>
            <h1></h1>
            <p></p>
            <h2></h2>
</body>    

/*
    相鄰同胞元素是直接相互毗鄰的元素，即他們之劍沒有其餘的同胞元素
*/

- 　輸入sibling，這裏的sibling是包含在同一元素中的、直接出如今目標元素錢的元素的選擇器。
- 　輸入 + （加號）。
- 　若有須要，對每一個後續的同胞元素重複第（1）步和第（2）步。
- 　輸入element，這裏的element是要求格式化的元素的選擇器。

 .architect  p+p{
          color:red;  
    }    
　　/*相鄰同胞結合符只選擇直接跟在同胞p元素以後的元素*/

/*
　　普通同胞元素結合符：能夠選擇那些並不是直接出如今另外一個同胞元素後面的同胞元素。它與相鄰同胞結合符的惟一區別是使用~（波浪號）代替 +（加號）。例如，h1~h2{color：red;}會讓任何屬於同一父元素的同胞h1後面的h2元素顯示爲紅色（它們能夠直接相鄰，也能夠不直接相鄰）
*/