Correcting teacher:WJ
Correction status:qualified
Teacher's comments:整体写的不错,建议重要代码附上效果图!
<style>
.item{
......
}
.item.center{
.....
}
/*id 选择器 [以“#”代表]*/
#nav_id{
....
}
</style>
<div class="item center" id="nav_id{
....
}"></div>
<style>
.container div{
......
}
</style>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<style>
.container > div{
......
}
</style>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<style>
/*同级相邻选择器*/
.item.center + .item{
......
}
/*同级所有选择器*/
.item.center ~ .item{
......
}
</style>
<div class="container">
<div class="item">1</div>
<div class="item center">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
/*
语法::first-child{}
解释:为第个子元素添加属性;
没有指定具体元素的话,默认就是所有的“*” 依此查询所有的第一个子元素添加
生效范围是整个HTML文档,所有的父亲
PS:必须指定一个父元素,尽量用父子关系指定;
.container :first-child{
....
}
*/
<style>
/*给container下的第一元素添加属性*/
.container > :first-child{
....
}
/*给container下的最后一个元素添加属性*/
.container > :last-child{
....
}
/*选择第三个,下标从1开始*/
.container > :nth-chlid(3){
.....
}
/*选择偶数列 even 代替 2n*/
.container > :nth-chlid(2n){
....
}
/*选择奇数列 odd 代替 2n-1 */
.container > :nth-chlid(2n-1){
....
}
/*从指定位置开始,选择剩下的所有元素*/
.container .item:nth-chlid(n + 3){
....
}
/*只取前三个*/
.container .item:nth-chlid(-n + 3){
....
}
/*只取最后三个 */
.container .item:nth-last-chlid(-n + 3){
....
}
/*只取最后三个 取后面的用倒数的方式去取*/
.container .item:nth-last-chlid(2){
....
}
</style>
<div class="container">
<div class="item">1</div>
<div class="item center">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
<style>
/*不限定的话就对container下的分组每个组里面的最后一个如果要指定,则使用元素的例如:
.container span:last-of-type{}
*/
.container :last-of-type{
...
}
/*匹配任何一个*/
.container span:nth-of-type(3){
......
}
/*前三个*/
.container span:nth-of-type(-n + 3){
......
}
/*最后二个*/
.container span:nth-last-of-type(-n + 2){
......
}
</style>
<div class="container">
<div class="item">1</div>
<div class="item center">2</div>
<span class="item">3</span>
<span class="item">4</span>
<span class="item">5</span>
</div>
`````
####伪类/伪元素
- :target 必须和ID配合,实现锚点操作!
- :focus 当获取焦点的时候
- ::selection 只允许设置选中文本的前景色和背景色
- :not 不满足条件的
- ::before 在什么之前生成某些东西
- ::atfer 在什么之后生成某些东西
- 伪类是单冒号,伪元素是双冒号。
````
<style>
#login-from{
display:none;
}
#login-from:target{
display:block;
}
input:focus{
....
}
input::selection{
color:...;
backguround-color:...;
}
</style>
<body>
<button onclick="location='#login-from'"></botton>
<form id="login-from">
<label for="email">邮件</label>
<input type="text" name="email" id="email">
<label for="password">邮件</label>
<input type="text" name="password" id="password">
</form>
<hr/>
------------------------------------------
#### :not()排除不需要的元素
<style>
.list > :not(:nth-of-type(3)){
color:red;
.list::before{
content:‘购物车’;
color:red;
}
.list::after{
content:‘清算中’;
color:red;
}
}
</style>
<ul class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</body>
`
说明 | 语法结构 |
---|---|
表格 | table |
标题 | caption |
分组 | colgroup |
表头 | thead |
主体 | <tbody> |
底部 | tfoot |
表格标题 | th |
行 | tr |
列 | td |
<table>
<cation>
员工信息表
</cation>
<colgroup>
<col></col>
<col></col>
<col></col>
</colgroup>
<thead>
<tr>
<th>ID</th>
<th>name</th>
<th>passs</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>jack</td>
<td>123456</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</tfoot>
</table>
`