第四天选择器表格

选择器
table 表格

第四天选择器表格 - 图1

选择器

选择器	符号	权重	意义(特点)
通配符	*	0	选中所有的元素
标签	关键字	1	选中这一类关键字的标签
类	.	10	类名可以重复使用，可以有多个类名，中间用逗号隔开
属性	自己起的	10	1.选中具有某个属性的所有元素 2.选中属性名等于特定属性值的一类元素
id	#	100	id名字独一无二不能能重复，但id名可以和class名相同
子	>	组合的选择器之和	选中子元素第一层级的儿子元素
后代	空格		把特定的后代（不管是儿子还是孙子，曾孙子…都是后代）元素选中
分组	，		把共同的代码提取出来
交集	没有		由多个选择器组成
相邻兄弟	+		选中与某个元素相邻的元素（只能向下寻找）
通用兄弟	~		选中某个元素的兄弟元素（不用相邻，只要是兄弟就可以）
伪类	a标签的四种状态，link，visited,hover,active被称为“爱恨原则”

通配符选择器

通配符选择器：代表选中所有的元素
符号：*
权重：0
```
*{margin: 0; padding: 0;}
```
标签选择器
代表的意思：选中这一类的标签
符号：标签
权重：1
```
p {color: red;}
```
eg：所有的p标签颜色都是红色

类选择器
符号：.
权重：10
特点：类名可以重复使用，名字可以起多个，中间用空格隔开
```
.abc{ color: yellow;}
```
属性选择器
符号：自己起的类名
权重：10
1.选中具有某个属性的所有元素
```
[index] {color: tomato;}
```
2.选中属性名等于特定属性值的一类元素
```
[index="a"] {color: teal;}
```
id选择器
符号：#
权重：100

注意：在一个文档中，id名字不能重复（相当于身份证，不能重复）但id和class名可以重复

 <style>
 #box1{background:tomato;}
 </style>
 <div id="box1" >div</div>

子选择器

符号:>（权重0）
权重：组合的选择器权重之和

作用：选中子元素第一层级的儿子元素

  .main>span {
         color: thistle;
      }
      /* 以上例子权重为11 */        
  <div class="main">
      <div>
          <div>
              <span>111</span>
          </div>
      </div>
      <span>span1</span>
  </div>

后代选择器

符号：空格
权重：组合的选择器权重之和

作用：把特定的后代（不管是儿子还是孙子，曾孙子…都是后代）元素选中

.main div {
          color: red;
<div class="main">
      <div>
          <div>
              <span>111</span>
          </div>
      </div>
      <div>span1</div>
  </div>

分组选择器

符号：，
权重：组合的选择器权重之和

作用：可以把共同的代码提取出来

.box1,
  .box2 {
    background-color: violet;

  }
<div class="box1">div1</div>
<p class="box2">p</p>

例如：.box1 span,
  .box2 {
    background-color: violet;

  }此时.box1 span的权重就是11
权重：组合的选择器之和

交集选择器

符号：没有
权重：组合的选择器之和

特点：由多个选择器组成

<style>
  .box1.current{
      background:green;
  }
</style>
<div class="box1 current" >box1</div>
<div class="box1">box1</div>
<p class="current">p1</p>

相邻兄弟选择器

符号:+
权重：组合的选择器权重之和
作用：选中与某个元素相邻的元素

注意：向下寻找，下面代码中第一个p标签并不能被选中

 <style>
      h1+p{
          background:green;
      }
</style>
<p>p1</p>
<h1>h1</h1>
<p>p1</p>
<p>p2</p>
<h1>h1</h1>
<div>div1</div>
<h1>h1</h1>
<p>p1</p>
<p>p2</p

通用兄弟选择器

连接符号:~
权重：组合的选择器权重之和
作用：选中某个元素的兄弟元素（不用相邻，只要是兄弟就可以）

注意：向下寻找，下面代码中第一个p标签并不能被选中

<style>
      h1~p{
          background:green;
      }
</style>
<p>p1</p>
<h1>h1</h1>
<p>p1</p>
<div>box1</div>
<p>p2</p>
<h1>h1</h1>
<div>div1</div>
<h1>h1</h1>
<p>p1</p>
<p>p2</p>

伪类选择器

a标签的四种状态，有一定的顺序，l v h a在网络上被称为“爱恨原则”

<style>
      a{
          font-weight: bold;
          font-size:100px;
      }
      /* 默认链接的文字颜色 */
     a:link{
         color:green;
     }
     /* 访问过后的文字颜色 */
     a:visited{
         color:gold;
     }
     /* 鼠标滑上 */
     a:hover{
         color:hotpink;
     }
     /* 点击链接时候的 */
     a:active{
         color:darkcyan;
     }
</style>

table 表格

表格的标题：caption
行：tr
th：表示的是表头（跟td一样，只是更加有语义化，文字加粗）
单元格：td

table 的属性
边框线： border
- 0：无边框线
- 1：1像素的边框线（如果更该的数值更大，只更改四周的）
边框到边框之间的距离：cellspacing
内容到边框的距离：cellpadding

@A$H0~JAP)DDO0DDKY2`3}O.png $59BOP}_VQX2{7YG3FV3Y(N4.png$

td 的属性

• 合并行：rowspan
• 合并列：colspan

table 样式

• 合并边框线：border-collapse:collapse
• 宽度平均分布：table-layout：fixed （前提：table 要写宽度）

完整形式的table

caption 代表的表格的标题 tr表示每一行，td表示每一个单元格，th表示的是表头（跟td一样，只是更加有语义化，文字加粗）

<table border="1">
<caption>成绩表</caption>
<thead>
<tr>
<th>语文</th>
<th>数学</th>
<th>外语</th>
</tr>
</thead>
<tbody>
<tr>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总分：</td>
<td>总分：</td>
<td>总分：</td>
</tr>
</tfoot>
</table>

简单表格

<table border="1">
<tr>
<th>语文</th>
<th>数学</th>
<th>外语</th>
</tr>
<tr>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
</table>

完整和简单表格的区别？

完整版的表格更加有语义化，除此之外，我们在结构中可以随意的更改thead tbody tfoot 的顺序，但是在浏览器中，显示的顺序还是正常的（thead—tbody–tfoot）

第四天 选择器 表格

选择器