<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css</title>
<style>
* {
color: black;/*通用选择器*/
}
#h2_3{
color: aqua;
/* 与顺序无关，先比较优先级 */
}
.h2_2,div{
background-color: wheat;
}
h2{
color: red;
}
.h2_2{
background-color: navajowhite;
}
.shuiguo li{
color:olive;
}
/* 后代 子类全部 */
.food > li{
border: orange dotted 1px;
}
/* 子代选择器 选择第一个子 */
#xianglin + div{
color: orangered;
}
/* 相邻弟弟选择器，判断下一个是否为所选类型 是则变 反之无效果 */
#putong ~ div{
color: violet;
}
</style>
</head>
<body>
<h2>一个标题</h2>
<h2 class="h2_2">第二个标题</h2>
<h2 id="h2_3">第3个标题</h2>
<div>hahaha</div>
<table>
<ul class="food">
<li>水果
<ul class="shuiguo">
<li>香蕉</li>
<li>梨</li>
<li>苹果</li>
</ul>
</li>
<li>蔬菜
<ul>
<li>番茄</li>
<li>土豆</li>
<li>青菜</li>
</ul></li>
</ul>
</table>
<div>相邻弟弟1</div>
<div id="xianglin">相邻弟弟2</div>
<div>相邻弟弟3</div>
<div>相邻弟弟4</div>
<hr>
<div>普通弟弟1</div>
<div id="putong">普通弟弟2</div>
<div>普通弟弟3</div>
<div>普通弟弟4</div>
<pre>
css p8-10 笔记：
p8 css的基本使用：
选择器名{
属性:属性值;
······
}
css的三种使用方式：
行内样式 直接标签内
内部样式 放head <style></style>
外部样式(css文件) <link rel="stylesheet" href="">
有优先级 就近原则 行内最大
p9 css基础选择器：
通用选择器 *
元素选择器 h2 div
ID选择器 #ID属性值 （越精准越优先）
类选择器 .class属性值
分组选择器 多个元素中间用,隔开
p9 css组合选择器：
感觉就像是集合里的知识
后代选择器
</pre>
</body>
</html>版权声明：本文为m0_60633517原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。