懒癌患者的学习记录之选择器（伪类在别处）

程序员文章站 2022-04-25 11:17:19

...

一，元素选择器

含义：选中父级标签下的所有相同标签

代码如下：

<style>
	div{
		width:100px;
 		 height:100px;
  		background:#F00;
	}
	p{
		font-size:36px; 
	}
</style>

<body>
	<div>元素选择器</div>
    	<div>选择器</div>
    	<p>元素选择器</p>
    	<p>选择器</p>
</body

效果：
懒癌患者的学习记录之选择器（伪类在别处）

二，id选择器

含义：选中id名为同一名称的元素,只能给一个元素使用

<style>	
	#d1{
  		width:100px;
  		height:100px;
  		background:#F00;
 	}
	 #d2{
	 	 font-size:36px; 
	 }
</style>
<body>
	<div id="d1">id选择器</div>
    	<p id="d2">id选择器</p>
</body>

效果：
懒癌患者的学习记录之选择器（伪类在别处）

三，类选择器

含义：选中类名相同的元素，可设置多个

<style>
	.d1{
		width:100px;
    		height:100px;
   		background:#F00;
	}
</style>
<body>
	<div class="d1">类选择器</div>
	<div class="d1">类选择器</div>
</body>

效果：
懒癌患者的学习记录之选择器（伪类在别处）

四，后代选择器

含义：选择父级标签下的所有相同子代元素