第四课：选择器与表格 -

第四课：选择器与表格

选择器：简单选择器[标签选择器]

描述：浏览器能直接显示出来的选择器及为简单选择器
元素选择器、类选择器、ID选择器、伪类。
注意：复合类样式[层叠]的style中.class 之间不能有空格,且id,class可以添加到任何元素上使用！
样式累加：相同元素，后面追加的样式会覆盖前面的样式，但是，这个覆盖样式要遵循样式优先级的问题；
元素选择器 < 类选择器 < id选择器 < 内联样式
区别：#first > 单独的id选择器 #first.itme > #firs 级别
ID选择器应用场景只有二种场景：表单元素，锚点。

<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>

伪类选择器 [分组]

分组结构伪类；
1.对元素按类型进行分组；
2.在分组中根据索引进行选择；

<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>
`

第四课：选择器与表格

第四课：选择器与表格

选择器：简单选择器[标签选择器]

ID选择器 应用场景 只有二种场景：表单元素，锚点。

上下文选择器

伪类选择器 [不分组]（不区分元素类型）省略父元素。

伪类选择器 [分组]

表格的组成部分

ID选择器应用场景只有二种场景：表单元素，锚点。