HTML基础—7选择器

亦凉 2022-10-03 00:49 193阅读 0赞

### 1.id选择器、类选择器、标签选择器、群组选择器 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70][]

![2019062216594538.png][]

class

![20190622170017978.png][]

标签

![20190622170041683.png][]

群组

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 1][]

包含选择器

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 2][]

通配符

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 3][]

###  2.选择器优先级 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 4][]

最终显示粉色

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style>
    			/* 1 + 1 = 2*/
    			div div{
    				height: 100px;
    				background-color: yellow;
    			}
    			/* 100 + 1 = 101*/
    			#box div{
    				background-color: pink;
    			}
    			/* 10 + 1 = 11*/
    			.div1 div{
    				background-color: green;
    			}
    		</style>
    		
    	</head>
    	<body>
    		
    		<div id="box" class="div1">
    			<div>div>div</div>
    		</div>
    	</body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70]: /images/20220109/1c7f84a0130243f2974edeb9f58edd60.png
[2019062216594538.png]: /images/20220109/fa5fbd5fa0114f718b90c7619f446c83.png
[20190622170017978.png]: /images/20220109/d61a775d70a444a4a6897596b7bbf06f.png
[20190622170041683.png]: /images/20220109/84bda2f12c3d42fc8c8e568a07975167.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 1]: /images/20220109/65fd887db84f4d2cb9a49c14005853f0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 2]: /images/20220109/637fb9b621494562bee1be9ed5135192.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 3]: /images/20220109/d955faf3cb47406e8754aeefe0b0cb58.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 4]: /images/20220109/de1f1b31f25f4ceaa3525a7962eb8c71.png