2、css练习大数据19-2 张东辉 1、（1) （2）选择器分为基础选择器和复合选择器。基础选择器分为

1、（1)

* {
  padding: 0;
  margin: 0;
}

（2）
选择器分为基础选择器和复合选择器。
基础选择器分为类选择器、id选择器、标签选择器和通配符选择器
复合选择器分为后代选择器、子选择器、并集选择器、伪类选择器

（3）
margin padding font-size background-position color
float position clear background-image text-align

(4)
样式表分为行内样式、内部样式表和外部样式表
行内样式直接在html标签内编辑，优先级最高
内部样式写在head的style标签内
外部样式通过link标签引入
<link rel="stylesheet" href="table.css">

（5）
html子标签可以继承父标签的某些css中属性，这种特性称为继承
层叠性又称覆盖性，即在一个标签内的同一属性，优先级高的会覆盖掉优先级低的。当优先级相同时，后面的会覆盖掉前面的

2、
添加了一些js代码，可以删除和复制tr元素：
html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="table.css">
</head>
<body>
    <div class="box">
        <table border=1>
            <thead>
                <tr>
                    <td>姓名</td> 
                    <td>科目</td>
                    <td>成绩</td>
                    <td>操作</td>
                    <td>向下复制</td>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
    </div>
</body>
<script type="text/javascript" rel="stylesheet" src="table.js"></script>
</html>

css代码：

* {
  padding: 0;
  margin: 0;
}

a {
  text-decoration: none;
}
.box {
  width: 531px;
  border-bottom: 1px solid black;
  border-top: 1px solid black;
}

table {
  border-color: rgb(222, 246, 8);
  border-collapse: collapse;
  table-layout: fixed;
}

thead {
  border-bottom: 1px solid black;
}

td {
  padding: 10px 25px;
  text-align: center;
}

td:hover {
    background-color: yellow;
}

tbody>tr:nth-child(odd) {
  background-color: #eee;
}

/*
//也可以：
tbody>tr:nth-of-type(odd) {
  background-color: #eee;
} */

js代码：

var datas = [{
    name: '魏璎珞',
    subject: 'JavaScript',
    score: 100
}, {
    name: '弘历',
    subject: 'JavaScript',
    score: 98
}, {
    name: '傅恒',
    subject: 'JavaScript',
    score: 99
}, {
    name: '明玉',
    subject: 'JavaScript',
    score: 88
}, {
    name: '猪八戒',
    subject: 'JavaScript',
    score: 0
},
{
    name: '孙悟空',
    subject: 'JavaScript',
    score: 88
}];

let tbody = document.querySelector("table").querySelector("tbody");
for (const data of datas) {
    let tr = document.createElement("tr");
    // 注意：{}格式不可通过for of进行迭代, 只能通过for in
    for (const k in data) {
        // 这里的k是索引名，即name subject score
        let td = document.createElement("td");
        td.innerHTML = data[k];
        tr.appendChild(td);

    }
    let remove = document.createElement("td");
    remove.innerHTML = "<a href='javascript:;'>删除</a>";
    tr.appendChild(remove);

    let cpy = document.createElement("td");
    cpy.innerHTML = "<a href='javascript:;'>向下复制一行</a>";
    tr.appendChild(cpy);

    tbody.appendChild(tr);

    // //这样添加删除事件无效，原因不详
    // let removeBtn = remove.querySelector("a");
    // removeBtn.onClick = function() {
    //     tbody.removeChild(this.parentNode.parentNode);
    // }
}

function removeTr() {
    // 点击a 删除 当前a 所在的行(链接的爸爸的爸爸)  node.removeChild(child)  
    tbody.removeChild(this.parentNode.parentNode)
}

function copyTr() {
    let thisTr = this.parentNode.parentNode;
    //注意：新复制的节点要绑定事件，否则新节点删除和复制功能不可用
    let thisTrCpy = thisTr.cloneNode(true);
    thisTrCpy.children[3].children[0].addEventListener("click", removeTr);
    //事件函数可以添加可以添加本身，如下
    thisTrCpy.children[4].children[0].addEventListener("click", copyTr)
    let thisTrNext = thisTr.nextElementSibling;
    tbody.insertBefore(thisTrCpy, thisTrNext);
}

let trs = tbody.querySelectorAll("tr");
for (var i = 0; i < trs.length; i++) {
    let as = trs[i].children[3].children[0];
    as.addEventListener("click", removeTr);

    let cpy = trs[i].children[4].children[0];
    cpy.addEventListener("click", copyTr);
}

运行结果演示：

3、
html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="table.css">
</head>
<body>
    <iframe class="guge" src="https://www.google.cn/" frameborder="0"></iframe>
    <iframe class="weixin" src="https://weixin.qq.com/" frameborder="0"></iframe>
    <iframe class="wangyi" src="https://www.163.com/" frameborder="0"></iframe>
</body>
<script type="text/javascript" rel="stylesheet" src="table.js"></script>
</html>

css:

* {
  padding: 0;
  margin: 0;
}

iframe {
  display: block;
}

.guge {
  width: 100%;
  height: 300px;
}

.weixin {
  display: inline-block;
  height: 780px;
  width: 29%;
}

.wangyi {
  float: right;
  display: inline-block;
  height: 730px;
  width: 70%;
}

效果：

2、css练习 大数据19-2 张东辉

2、css练习大数据19-2 张东辉