![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
PHPzCorrection status：qualified
Teacher's comments：
Collection
Collection
| 自定义样式 | 演示 |
|---|---|
| 行内样式 | <div style="" ></div> |
| 内部嵌入式 | <style>div{}<style> |
| 引用链接样式 | <link href="style.css" > |
匹配任何元素的通配符
<body><div><h2>Christmas tree</h2></div></body>
body *{backgroud-color: gray;}
元素选择器
<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;}
用于多个元素
<div class="menu"><h2 class="menu-txt">Christmas tree</h2></div>
.menu {position: relative;display: block;}.menu-txt {font-size: 25px;font-weight: bold;}
用于唯一元素
<div id="menu"><h2 id="menu-txt">Christmas tree</h2></div>
#menu {position: relative;display: block;}#menu-txt {font-size: 25px;font-weight: bold;}
简单属性选择，具体属性选择，部分属性选择， 特定属性选择
<H2 title="attribute">Christmas tree</H2>
h2[title="attribute"] {font-size: 25px;font-weight: bold;}
<div><h2>Christmas tree<h2>Christmas tree</h2></h2></div>
语法规则是 div 和 h2 之间有一个空格
div h2{color: gray;}
<div><h2>Christmas tree</h2></div>
子选择器只会选择某个元素的子元素，而不会扩大到任意的后代元素
div > h2{color: gray;}
<div><h2>Christmas tree<h2><em>Christmas tree</em><em>Christmas tree</em><div>
会选择某一元素紧随其后的元素，但是前提是他们拥有相同的父级
h2 + em {color:gray;}
<div><h2>Christmas tree<h2><em>Christmas tree</em><em>Christmas tree</em><div>
会选择某一元素紧随其后的元素，但是前提是他们拥有相同的父级
h2 + em {color:gray;}
<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级 |
