CSS的选择器

一、基本选择器

通用选择器

选择所有的元素,此处*为所有通配符
```
* {
				color: #0000FF;
  }
```

元素选择器

p {
				font-size: 18px;
				font-weight: bold;
  }

ID选择器
```
#whit{
				 color: red; 
	 }
```

类选择器

.wh{
		        font-family: 华文新魏;
   }

分组选择器

当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔

.wh,#whit,p{
				color: blueviolet;
				/* 边框：边框粗细 边框风格 边框颜色 */
				border: 1px solid #00FFFF;
			}

HTML代码

	<body>
		 <div >UZI</div>
		 <div id="whit">55开</div>
		 <div class="wh">刘某</div>
		 <div class="wh">大司马</div>
		 <p>段落标签</p>
		 <span>行内</span>
	</body>

二、层次选择器

后代选取器(以空格分隔)

选择food类下面的所有li标签，包含子孙...

	.food li{
				border: 1px solid red;  框的宽度   边框线条类型  边框颜色
	 }

子元素选择器(以大于号分隔）

选择food类下面的子标签为li
```
	.food2 > li{
				border: 1px solid red;
	}
```
相邻兄弟选择器（以加号分隔）

代码是从上向下运行的，所以相邻兄弟是指下面的一个元素
```
	#d + span{
				border: 1px solid red;
	} 
```
普通兄弟选择器（以波浪线分隔）

代码是从上向下运行的，所以普通兄弟是指下面的所有兄弟元素
```
 #newD ~ div{
				border: 1px solid red;
			}
```

HTML代码

	<body>
		 <h1>食物</h1>
		 <ul class="food">
		     <li>水果
		         <ul>列表标签1
		             <li>香蕉</li>
		             <li>苹果</li>
		             <li>梨</li>
		         </ul>
		     </li>
		     <li>蔬菜
		         <ul>列表标签1
		             <li>白菜</li>
		             <li>油菜</li>
		             <li>卷心菜</li>
		         </ul>
		     </li>
		 </ul>
		 
		 <ul class="food2">
		     <li>水果
		         <ul>列表标签1
		             <li>香蕉</li>
		             <li>苹果</li>
		             <li>梨</li>
		         </ul>
		     </li>
		     <li>蔬菜
		         <ul>列表标签1
		             <li>白菜</li>
		             <li>油菜</li>
		             <li>卷心菜</li>
		         </ul>
		     </li>
		 </ul>
	
	   <span>span标签</span>
		<div id="d">
		    相邻兄弟选择器1
		    <ul>
		        <li>开心麻花</li>
		        <li>贾玲</li>
		        <li>宋小宝</li>
		    </ul>
		</div>
		<span>span标签</span>
		<div>
		    相邻兄弟选择器2
		</div>
		<div>
		    相邻兄弟选择器3
		</div>
		<div>
		    相邻兄弟选择器4
		</div>
	<hr >
		<div>
			普通兄弟选择器0
		</div>
		<div id="newD">
		    普通兄弟选择器1
		    <ul>
		        <li>开心麻花</li>
		        <li>贾玲</li>
		        <li>宋小宝</li>
		        <li>沈腾</li>
		        <li>王宁</li>
		    </ul>
		</div>
		<div>
		    普通兄弟选择器2
		</div>
		<div>
		    普通兄弟选择器3
		</div>
		<div>
		    普通兄弟选择器4
		</div>
	</body>

posted @ 2022-01-27 09:18 码农阿亮阅读(35) 评论(0) 编辑收藏举报

刷新页面返回顶部

码农阿亮

您知道的越多，您的思维越开阔！

CSS的选择器

一、基本选择器

二、层次选择器

公告