CSS的元素样式来源
| 自定义样式 | 演示 |
|---|---|
| 行内样式 | <div style="" ></div> |
| 内部嵌入式 | <style>div{}<style> |
| 引用链接样式 | <link href="style.css" > |
基本选择器
css的五大选择器
- 通配选择器
- 标签选择器
- 类选择器
- ID选择器
- 属性选择器
1.通配选择器
匹配任何元素的通配符
<body><div><h2>Christmas tree</h2></div></body>
body *{backgroud-color: gray;}
2.标签选择器
元素选择器
<body><div><h2>Christmas tree</h2></div></body>
body {width: 100px;height: 100px;backgroud-color: gray;}div {position: relative;display: block;}h2 {font-size: 25px;font-weight: bold;}
3.类选择器
用于多个元素
<div class="menu"><h2 class="menu-txt">Christmas tree</h2></div>
.menu {position: relative;display: block;}.menu-txt {font-size: 25px;font-weight: bold;}
4.ID选择器
用于唯一元素
<div id="menu"><h2 id="menu-txt">Christmas tree</h2></div>
#menu {position: relative;display: block;}#menu-txt {font-size: 25px;font-weight: bold;}
5.属性选择器
简单属性选择，具体属性选择，部分属性选择， 特定属性选择
<H2 title="attribute">Christmas tree</H2>
h2[title="attribute"] {font-size: 25px;font-weight: bold;}
上下文选择器
- 后代选择器
- 子选择器
- 相邻兄弟选择器
- 所有兄弟选择器
1.后代选择器
<div><h2>Christmas tree<h2>Christmas tree</h2></h2></div>
语法规则是 div 和 h2 之间有一个空格
div h2{color: gray;}
2.子选择器
<div><h2>Christmas tree</h2></div>
子选择器只会选择某个元素的子元素，而不会扩大到任意的后代元素
div > h2{color: gray;}
3.相邻兄弟选择器
<div><h2>Christmas tree<h2><em>Christmas tree</em><em>Christmas tree</em><div>
会选择某一元素紧随其后的元素，但是前提是他们拥有相同的父级
h2 + em {color:gray;}
3.相邻兄弟选择器
<div><h2>Christmas tree<h2><em>Christmas tree</em><em>Christmas tree</em><div>
会选择某一元素紧随其后的元素，但是前提是他们拥有相同的父级
h2 + em {color:gray;}
4.所有兄弟选择器
<ul class="list"><li class="item">item1</li><li class="item second">item2</li><li class="item">item3 </li><li class="item">item4</li><li class="item">item5</li></ul>
*号为通用标识符
.item.second ~ * {background-color: yellow;}
选择器的权重
| 选择器 | 权值 | 权级 |
|---|---|---|
| 通配符选择器 | 0，0，0，0 | 0级 |
| 元素选择器 | 0，0，0，1 | 1级 |
| CLASS选择器 | 0，0，1，0 | 2级 |
| ID选择器 | 0，1，0，0 | 3级 |
| 行内样式 | 1，0，0，0 | 4级 |
| !important | 无限大 | 5级 |
推荐使用 class 而不用 id
- class 可以复用，id是唯一；
- id选择器比class选择器权值高；
- class的诞生是为了样式服务；
