懒癌患者的学习记录之选择器

最新推荐文章于 2023-04-26 16:55:12 发布

timid_lazy

最新推荐文章于 2023-04-26 16:55:12 发布

阅读量152

点赞数

分类专栏： HTML基础文章标签： html css

本文链接：https://blog.csdn.net/timid_lazy/article/details/107182787

版权

HTML基础专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一，元素选择器

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

代码如下：

<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>

效果：
在这里插入图片描述

四，后代选择器

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

.d{
  width:500px;
  height:500px;
 }
 .d p{
  font-size:72px;
 }

<div class="d">
 <div><p>后代</p></div>
 <div>后代</div>
    <div>后代</div>
    <p>后代</p>
    <p>后代</p>
</div>

效果：
在这里插入图片描述