CSS example
<!DOCTYPE html>
<html lang="en">
<script type="text/javascript">
function fun1() {
var myDiv = document.getElementById("one");
myDiv.style.width="500px";
myDiv.style.height="500px";
myDiv.style.backgroundColor="green";
myDiv.innerText="别碰我";
}
</script>
<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>
<!-- id选择器 -->
<style>
#two {
color: darkred;
}
/* 标签选择器 */
p {
color: deeppink;
}
/* 层级选择器 */
tr > td {
color: deepskyblue;
}
.divv {
color: dimgray;
}
</style>
</head>
<body>
<!-- 监听属性展示 -->
<center>
<div id="one"
style="width: 100px;height: 100px;background-color: crimson;font-size: 30;color: darkmagenta;"
onmouseover="fun1()"
>
我是div</div>
<div id="two">id选择器</div>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fuga sunt ipsum dolore quaerat repudiandae nesciunt at, quod inventore nostrum molestiae consequuntur a natus minima quibusdam! Exercitationem animi magnam quos tempora!</p>
<table>
<tr id="three">
<td>哈哈哈</td>
<td>嘿嘿嘿</td>
</tr>
</table>
<div class="divv">我是自定义选择器操作的div</div>
</center>
</body>
</html>