十五天学会css之第四天 选择器 表格

东方淼淼
212 阅读3分钟

第四天 选择器 表格

第四天css思维导图.png

选择器

选择器.png

通配符选择器

  • 通配符选择器：代表选中所有的元素
  • 符号：*
  • 权重：0
*{
margin: 0; 
padding: 0;
}

标签选择器

  • 代表的意思：选中这一类的标签
  • 符号：标签
  • 权重：1
//所有的p标签颜色都是红色
p {color: red;}

类选择器

  • 符号：.
  • 权重：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

cellspacing.png

  • 内容到边框的距离：cellpadding

cellpadding.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）

avatar
文章
阅读
粉丝