一、基本选择器
- 通用选择器
选择所有的元素,此处*为所有通配符
* {
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>技术的发展日新月异，随着时间推移，无法保证本博客所有内容的正确性。如有误导，请大家见谅，欢迎评论区指正！
开源库地址,欢迎点亮:
GitHub： https://github.com/ITMingliang
Gitee： https://gitee.com/mingliang_it
GitLab： https://gitlab.com/ITMingliang
建群声明： 本着技术在于分享，方便大家交流学习的初心，特此建立【编程内功修炼交流群】，为大家答疑解惑。热烈欢迎各位爱交流学习的程序员进群，也希望进群的大佬能不吝分享自己遇到的技术问题和学习心得！进群方式：扫码关注公众号，后台回复【进群】
