一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第10天， 点击查看活动详情 。
CSS——层次选择器
选择器，就是用一种方式把我们想要的那一个标签选中。把它选中了，你才能操作这个标签的css样式。
后代选择器
选择某个元素后面所有的标签
后代选择器 是用祖先加上空格再加上后代标签类型进行声明的： body p{}
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Title</title>
<style>
/*后代选择器*/
body p{
background:pink;
</style>
</head>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p>
<p>p6</p>
</body>
</html>
效果图如下
body>p 选择body元素内部子代p元素（所有第1级p元素）
子选择器可后代选择器相比，就是把空格变成 >
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Title</title>
<style>
/*子选择器*/
body>p{
background:pink;
</style>
</head>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p>
<p>p6</p>
</body>
</html>
效果图如下
相邻兄弟选择器
先给一个标签定义类，兄弟选择器只能选择被定义标签下面的一个标签，可以复用（作用域：同一代）
相比后代选择器，将空格变为+，将前标签改为类：
.active + p{}，选择.active元素相邻的下一个元素（.active、p是同级元素）。
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Title</title>
<style>
/*相邻兄弟选择器*/
.active + p{
background:red;
</style>
</head>
<p class="active">p9</p>
<p>p1</p>
<p class="active">p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p>
<p>p6</p>
<p class="active">p7</p>
<p class=>p8</p>
</body>
</html>
效果图如下
通用选择器
先给一个标签定义类，兄弟选择器能选择被定义标签下面的所有同级标签，可以复用（作用域：同一代）
相比于相邻兄弟选择器，将+改为~:
.active ~ p{}， 选择.active元素后所有的同级p元素
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Title</title>
<style>
/*通用选择器*/
.active ~ p{
background:red;
</style>
</head>
<p>p1</p>
<p class="active">p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p>
<p>p6</p>
<p class="active">p7</p>
<p class=>p8</p>
</body>
</html>
效果图如下
CSS——背景图像应用及渐变
先设置背景图片：
div{
width:1000px;
height:700px;
border:2px solid red; /*边框：粗细 实线 颜色*/
background-image:url("images/11-20.jpg"); /*图片在边框内默认平铺*/
/*平铺方式*/
.div1{
background-repeat:repeat-x;/*水平平铺*/
.div2{
background-repeat:repeat-y;/*垂直平铺*/
.div3{
background-repeat:no-repeat;/*不平铺*/
背景图片应用
列表优化：使用背景图片
列表学习：blog.csdn.net/wpc2018/art…
html代码：
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>列表样式</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<div id="nav">
<h2 class="title">全部商品分类</h2>
<a href="#">图书</a>
<a href="#">音像</a>
<a href="#">数字商品</a>
<a href="#">家用电器</a>
<a href="#">手机</a>
<a href="#">数码</a>
<a href="#">电脑</a>
<a href="#">办公</a>
<a href="#">家居</a>
<a href="#">家装</a>
<a href="#">厨具</a>
<a href="#">服饰鞋帽</a>
<a href="#">个性化妆</a>
<a href="#">礼品箱包</a>
<a href="#">钟表</a>
<a href="#">珠宝</a>
<a href="#">食品饮料</a>
<a href="#">保健食品</a>
<a href="#">彩票</a>
<a href="#">旅行</a>
<a href="#">充值</a>
<a href="#">票务</a>
</div>
</body>
</html>
CSS文件:
#nav{
width:300px;
background:#C0C0C0;
.title{
font-size:18px; /*字体大小*/
font-weight:bold; /*粗体*/
text-indent:2.8em; /*首行缩进*/
line-height:35px; /*行高*/
/*背景颜色 背景图片 背景图片定位 平铺方式*/
background:red url("../images/11-20-2.gif") 280px 8px no-repeat;
list-style用法:
none:去掉圆点
circle:变成空心圆
decimal:变成数字
square:变成正方形
ul li{
height:30px;
list-style:none;
text-indent:1em;
background:#C0C0C0 url("../images/11-20-1.jpg") 236px 1px repeat-y;
text-decoration:none;/*删除下划线*/
font-size:14px;
color:black;
font-weight:bold;
a:hover{
color:#FFFF00;
text-decoration:underline;/*加下划线*/
效果图如下
渐变色的使用
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
background-color: #08AEEA;
background-image: linear-gradient(189deg, #08AEEA 0%, #2AF598 100%);
</style>
</head>
</body>
</html>
效果图如下
分享一个渐变颜色的网站，里面有多种渐变色选择，还可以自己搭配渐变色
Grabient：www.grabient.com/
