标签：... 第三次 元素 兄弟 HTML 选择器 css 属性
css的基本使用
一、css的定义
选择器名{
属性名:属性值；
属性名:属性值；
...
}
注意：
1.声明需要使用"{}"括起来，每个声明以分号";"结尾
2.一行建议一个声明
3.如果样式的属性值由多个单词组成，则用引号引起来
二、css的三种使用样式
1.行内样式
直接写在标签上的样式，在标签上通过style属性定义的样式
（以<h2>标题为例）
<h2 style="color: blue;font-family: 楷体">hello world</h2>
2.内部样式
定义在style标签中的样式，style标签一般设置在head中
<style>
/*设置所有的h2的标签文本为红色*/
h2{
color: red;
}
</style>
3外部样式
定义在外部的css文件中，通过link标签引入
<link rel="stylesheet" type="text/css" href="css文件路径"/>
三、css的注释
/*注释内容*/
注：当多种样式越精准越优先（就近原则）
css选择器
一、基本选择器
1.通用选择器
*{
属性名:属性值;
...
}
2.元素选择器
元素名/标签名{
属性名:属性值;
...
}
3.ID选择器 “#”
#id属性值{
属性名:属性值;
...
}
4.类选择器“.”
.class属性值{
属性名:属性值；
...
}
5.分组选择器
选择器1,选择器2,选择器3,...{
属性值:属性名;
}
...
<style type="text/css">
/*通用选择器*/
*{
color: blue;
}
/*元素选择器*/
div{
font-size: 30px;
}
/*ID选择器*/
#p1{
background-color: brown;
}
/*类选择器*/
.cls1{
font-family: 楷体;
}
/*分组选择器*/
#p1,.cls1,font{
text-decoration: line-through;
}
</style>
===================================================
<div class="cls1">这是一个div1</div>
<div>这是一个div2</div>
<p id="p1">这是一个p</p>
<span class="cls1">这是一个span</span>
<br />
<font>这是一个font</font>
二、组合选择器
后代选择器
选择指定元素的所有指定后代元素，以空格隔开
.选择器 指定元素{
属性名:属性值;
...
}
子代选择器
选择指定元素的第一代子元素，以>隔开
#选择器>指定元素{
属性名:属性值;
...
}
相邻兄弟选择器
选择指定元素的下一个指定元素(只会找一个)，以+隔开
#选择器+指定元素{
属性名:属性值;
...
}
普通兄弟选择器
选择指定元素后面的所有指定元素，两者有相同的父元素，以~隔开
#选择器+指定元素{
属性名:属性值;
...
}
<style type="text/css">
/*后代选择器*/
.food li{
border: chartreuse solid 1px;
}
/*子代选择器*/
#food2 > li {
border: black solid 1px;
}
/*相邻兄弟选择器*/
#mydiv + div {
background-color: #808080;
}
/*普通兄弟选择器*/
#mydiv2~div{
background-color: aqua;
}
</style>
=======================================================
<ul class="food">
<li>水果
<ul>
<li>香蕉</li>
<li>苹果</li>
<li>梨</li>
</ul>
</li>
<li>蔬菜
<ul>
<li>白菜</li>
<li>油菜</li>
<li>卷心菜</li>
</ul>
</li>
</ul>
<hr />
<ul id="food2">
<li>水果
<ul>
<li>香蕉</li>
<li>苹果</li>
<li>梨</li>
</ul>
</li>
<li>蔬菜
<ul>
<li>白菜</li>
<li>油菜</li>
<li>卷心菜</li>
</ul>
</li>
</ul>
<hr />
<div>相邻兄弟选择器1</div>
<div id="mydiv">相邻兄弟选择器2</div>
<div>相邻兄弟选择器3</div>
<div>相邻兄弟选择器4</div>
<div>相邻兄弟选择器5</div>
<hr />
<div>普通兄弟选择器1</div>
<div id="mydiv2">相邻兄弟选择器2</div>
<div>普通兄弟选择器3</div>
<div>普通兄弟选择器4</div>
<div>普通兄弟选择器5</div>
标签：...,第三次,元素,兄弟,HTML,选择器,css,属性 来源： https://blog.csdn.net/qq_63496723/article/details/122801191
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。