1.list-style属性
1.1list-style-type
.nav{
list-style-type: none; /*无标记1. 去掉小圆点 */
list-style-type: disc; /*默认。标记是实心圆。*/
list-style-type: circle; /*默认。标记是实心圆。
list-style-type: square; /* 3.实心方块 */
}
1.2list-style-position
.nav{
list-style-position: inside; /*列表项目标记放置在文本以内，且环绕文本根据标记对齐。/
list-style-position: outside; /*默认值。保持标记位于文本的左侧，列表项目标记放置在文本以外，且环绕文本不根据标记对齐。*/
}
1.3 list-style-image
.nav{
list-style-image: url(./tubiao.png); /*图像的路径。默认。无图形被显示。 */
}
2.CSS 三大特性
2.1 CSS层叠性
所谓层叠性是指多种CSS样式的叠加,就是css处理冲突的能力。 一般情况下，如果出现样式冲突，则会按照CSS书写的顺序，以最后的样式为准。 当同一个元素被两个选择器选中时，CSS会根据选择器的权重决定使用哪一个选择器。权重低的选择器效果会被权重高的选择器效果覆盖（层叠）。
<!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>Document</title>
<style>
/*当同一个元素被两个选择器选中时,CSS会根据选择器的权重决定使用哪一个选择器。所谓层
叠性是指多种CSS样式的叠加,就是css处理冲突的能力。 */
#hot{
color: orange;
}
.con{
color: red;
}
.main{
color: blue;
}
</style>
</head>
<body>
<div class="con main" id="hot">王者荣耀策划道歉 承认机制缺陷 承认改进</div>
</body>
</html>2.2 CSS继承性
所谓继承性是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。
<!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>Document</title>
<style>
/*继承:字体大小 颜色可以继承除a以外 a标签的颜色不继承 line-height*/
/* 下面的属性就不具有继承性:边框、外边距、内边距、背景、定位、元素高属性 */
.father{
font-size: 50px;
color: red;
line-height: 100px;
}
</style>
</head>
<body>
<div class="father">
<div class="son1">div元素</div>
<a href="" class="son2">链接元素</a>
</div>
<p>
div元素链接元素a
</p>
</body>
</html>2.3 CSS优先级
定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题,即考虑权重的问题。
<!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>Document</title>
<style>
/* 浏览器默认样式<继承的样式<通配符选择器<标签选择的样式<id选择器<行内样式<important*/
#main{
color: purple;
}
*{
color: yellow;
}
.father{
color: blue;
}
div{
color: red;
}
</style>
</head>
<body>
<div class="father">
<div class="con" id="main" style="color: aqua;">
你是否在深夜辗转难眠-你在思考？你的人生？你的灵魂伴侣？还是接下来的路？
</div>
</div>
</body>
</html>| 继承或者* 的贡献值 | 0,0,0,0 |
|---|---|
| 每个元素（标签）贡献值为 | 0,0,0,1 |
| 每个类，伪类贡献值为 | 0,0,1,0 |
| 每个ID贡献值为 | 0,1,0,0 |
| 每个行内样式贡献值 | 1,0,0,0 |
| 每个!important贡献值 | ∞ 无穷大 |
权重是可以叠加的
比如的例子：
| 选择器 | 权重 |
|---|---|
| div ul li | 0,0,0,3 |
| .nav ul li | 0,0,1,2 |
| a:hover | 0,0,1,1 |
| .nav a | 0,0,1,1 |
| #nav p | 0,1,0,1 |
<!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>Document</title>
<style>
/* 标签 0,0,0,1 */
/* div ul li 0,0,0,3 */
/* 类 0,0,1,0 */
/* .main 0,0,1,0 */
/* id */
/* .mian ul li span 0,0,1,3 */
/* #con 0,1,0,0 */
/* 行内 1,0,0,0 */
/* ul li a span{
color: red;
}
ul li a {
color: blue;
} */
.nav li a span {
color: red;
}
/* 当鼠标悬停时字体颜色为蓝色 */
ul li span:hover{
color: blue;
}
</style>
</head>
<body>
<!-- <div class="main">
<ul>
<li><span>你好</span></li>
</ul>
</div> -->
<ul>
<li>
<a href="">
<span>业务展示</span>
</a>
</li>
</ul>
</body>
</html>