【CSS】组合选择符

小咪咪 2022-03-21 12:52 240阅读 0赞

### CSS 组合选择符 ###

![在这里插入图片描述][20190201181742218.png]  
CSS组合选择符包括各种简单选择符的组合方式。  
在 CSS3 中包含了四种组合方式:  
![在这里插入图片描述][20190201181813602.png]

### 后代选择器 ###

后代选择器用于选取某元素的后代元素。

以下实例选取所有< p >元素插入到 < div > 元素中:

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg4NTc3OQ_size_16_color_FFFFFF_t_70]

### 子元素选择器 ###

与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。  
以下实例选择了< div >元素中所有直接子元素 < p > ：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg4NTc3OQ_size_16_color_FFFFFF_t_70 1]

### 相邻兄弟选择器 ###

相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。

如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。

以下实例选取了所有位于 < div> 元素后的第一个 < p > 元素:

<body>
    
    	<h1>Welcome to My Homepage</h1>
    
    	<div>
    		<h2>My name is Donald</h2>
    		<p>I live in Duckburg.</p>
    	</div>
    	
    	<p>My best friend is Mickey.</p>
    
    	<p>I will not be styled.</p>
    
    </body>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg4NTc3OQ_size_16_color_FFFFFF_t_70 2]

### 后续兄弟选择器 ###

后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。

以下实例选取了所有 < div > 元素之后的所有相邻兄弟元素 < p > :

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg4NTc3OQ_size_16_color_FFFFFF_t_70 3]

[20190201181742218.png]: /images/20220321/4f990426df974f63bc6596fa177f91b7.png
[20190201181813602.png]: /images/20220321/d4e91217df374c08b85c106e64f86bad.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg4NTc3OQ_size_16_color_FFFFFF_t_70]: /images/20220321/547def626f0d4e14a5277a4d1ce98b13.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg4NTc3OQ_size_16_color_FFFFFF_t_70 1]: /images/20220321/47d162e9be9b4e4db8e2143af9379be6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg4NTc3OQ_size_16_color_FFFFFF_t_70 2]: /images/20220321/1017b868b533431fb21fee5e79e41277.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg4NTc3OQ_size_16_color_FFFFFF_t_70 3]: /images/20220321/e135a50bd7e54fc387402911b2f75c0b.png