一、基本选择器
-
通用选择器
选择所有的元素,此处*为所有通配符
* { 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>