|
|
@@ -0,0 +1,95 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>Document</title>
|
|
|
+ <style>
|
|
|
+ /* 1.标签选择器 */
|
|
|
+ div {
|
|
|
+ width: 200px;
|
|
|
+ height: 200px;
|
|
|
+ border:1px solid #f00;
|
|
|
+ }
|
|
|
+ /* 2.id选择器 */
|
|
|
+ #aa {
|
|
|
+ color: yellowgreen;
|
|
|
+ }
|
|
|
+ /* 3.类选择器 */
|
|
|
+ .bb {
|
|
|
+ color: aqua;
|
|
|
+ }
|
|
|
+ /* 4.伪类选择器 */
|
|
|
+ .bb:hover {
|
|
|
+ color: purple;
|
|
|
+ }
|
|
|
+ /* 5.包含选择器 后代选择器 */
|
|
|
+ ul li {
|
|
|
+ color: blue;
|
|
|
+ }
|
|
|
+ /* 6.群组选择器 逗号连接*/
|
|
|
+ #aa,.bb {
|
|
|
+ color: red;
|
|
|
+ }
|
|
|
+ /* 7.相邻选择器 + */
|
|
|
+ h3 + h4 {
|
|
|
+ color: red;
|
|
|
+ }
|
|
|
+ /* 8.~ 兄弟选择器 */
|
|
|
+ h2~h5 {
|
|
|
+ color: yellowgreen;
|
|
|
+ }
|
|
|
+ /* 9.子类选择器 > */
|
|
|
+ ul li>a {
|
|
|
+ color: purple;
|
|
|
+ }
|
|
|
+ /* 10.伪元素
|
|
|
+ ::after 在..后
|
|
|
+ ::before 在..前
|
|
|
+ content
|
|
|
+
|
|
|
+ :after :before 与::after ::before区别
|
|
|
+ 没有实际意义区别 就是一个是css2的写法 一个css3的写法
|
|
|
+ */
|
|
|
+ .new::before {
|
|
|
+ content: "哈哈哈哈";
|
|
|
+ color: #0f0;
|
|
|
+ font-size: 30px;
|
|
|
+ }
|
|
|
+ /* 11.通配符选择器 匹配全局* */
|
|
|
+ * {
|
|
|
+ list-style: none;
|
|
|
+ text-decoration: none;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <div></div>
|
|
|
+ <div class="new">这是一段新内容</div>
|
|
|
+ <ul>
|
|
|
+ <li><a href="">aa</a></li>
|
|
|
+ <li><a href="">aa</a></li>
|
|
|
+ <li><a href="">aa</a></li>
|
|
|
+ </ul>
|
|
|
+ <p id="aa">这是一段话</p>
|
|
|
+ <p class="bb">这是自我介绍</p>
|
|
|
+ <h1>111</h1>
|
|
|
+ <h2>222</h2>
|
|
|
+ <h3>333</h3>
|
|
|
+ <h4>444</h4>
|
|
|
+ <h5>555</h5>
|
|
|
+ <h6>666</h6>
|
|
|
+ <ul>
|
|
|
+ <li><a href="">ppp</a></li>
|
|
|
+ <li><a href="">ppp</a></li>
|
|
|
+ <li><a href="">ppp</a></li>
|
|
|
+ <li><a href="">ppp</a></li>
|
|
|
+ <li><a href="">ppp</a></li>
|
|
|
+ <li><a href="">ppp</a></li>
|
|
|
+ <li><a href="">ppp</a></li>
|
|
|
+ <li><a href="">ppp</a></li>
|
|
|
+ <li><a href="">ppp</a></li>
|
|
|
+ <li><a href="">ppp</a></li>
|
|
|
+ </ul>
|
|
|
+</body>
|
|
|
+</html>
|
e