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)  编辑  收藏  举报