Эхлэл Бүгдийг харах Тусламж
Нэвтрэх
lovecoding
/
Vip0525
10
0
Салаа 0
Файлууд Асуудлууд 0 Хуулах хүсэлтүүд 0 Мэдлэгийн сан
Эх сурвалжийг харах

css

e 10 сар өмнө
parent
f42ac866d0
commit
432bd9319c
2 өөрчлөгдсөн 139 нэмэгдсэн , 0 устгасан
Өөрчлөлтийг ялгаж харах Өөрчлөлтийн статистик харах
  1. 124 0
      css/6.选择器.html
  2. 15 0
      css/7.选择器的优先级.html

+ 124 - 0
css/6.选择器.html
Файл харах 

@@ -0,0 +1,124 @@
 
+<!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.标签选择器 */
 
+        b {
 
+            color: red;
 
+        }
 
+        /* 2.id选择器 */
 
+        #first {
 
+            color: #00f;
 
+        }
 
+        /* 3.类选择器 */
 
+        .second {
 
+            color: #0f0;
 
+        }
 
+        /* 4.包含选择器 后代选择器 */
 
+        ul li {
 
+            /* !important 提高样式优先级 */
 
+            color: purple !important;
 
+        }
 
+        /* 5.伪类选择器
 
+            :hover 划过
 
+            ：first-child 第一个子类
 
+            ：last-child 最后一个子类
 
+            ：nth-child(n) 第n个子类
 
+            偶数：even 2n
 
+            奇数：odd 2n+1
 
+        */
 
+        ul li:hover {
 
+            color: #f00;
 
+        }
 
+        /* 6.群组选择器 逗号连接 */
 
+        b,#first,.second {
 
+            color: pink;
 
+        }
 
+        /* 7.+ 相邻选择器 */
 
+        h1 + h2 {
 
+            color: #f00;
 
+        }
 
+        /* 8.~ 兄弟选择器 */
 
+        h2 + h3 {
 
+            color: #f00;
 
+        }
 
+        h1~h3 {
 
+            color: #00f;
 
+        }
 
+        /* 9.子类选择器 > */
 
+        ul > li {
 
+            color: hotpink;
 
+        }
 
+        p {
 
+            color: #0f0;
 
+        }
 
+        /* 10.伪元素选择器
 
+            搭配着content使用
 
+            ::after 在...之后
 
+            ::before 在...之前
 
+            :after与::after有什么区别
 
+            没有任何样式区别 只是一个是css2的语法 一个是css3的语法
 
+         */
 
+        p::after {
 
+            content: "哈哈哈";
 
+            color: #f00;
 
+        }
 
+        p::before {
 
+            content: "哈哈哈";
 
+            color: #f00;
 
+        }
 
+        /* 11.属性选择器
 
+            标签名[属性=属性值]
 
+        */
 
+        img[alt=www] {
 
+            width: 100px;
 
+            height: 100px;
 
+        }
 
+        /* 12.通配符选择器 匹配全局 */
 
+        * {
 
+            list-style: none;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <img src="../images/img01.gif" alt="www">
 
+    <br>
 
+    <b>哈哈哈</b>
 
+    <div id="first">1111</div>
 
+    <div class="second">1111</div>
 
+    <ul>
 
+        <li>aaa</li>
 
+        <li>aaa</li>
 
+        <li>aaa</li>
 
+        <li>aaa</li>
 
+    </ul>
 
+    <ul>
 
+        <li>aaa</li>
 
+        <li>aaa</li>
 
+        <li>aaa</li>
 
+        <li>aaa</li>
 
+    </ul>
 
+    <ul>
 
+        <li>aaa</li>
 
+        <li>aaa</li>
 
+        <li>aaa</li>
 
+        <li>aaa</li>
 
+    </ul>
 
+    <ul>
 
+        <li style="color:#ff0">aaa</li>
 
+        <li>aaa</li>
 
+        <li>aaa</li>
 
+        <li>aaa</li>
 
+    </ul>
 
+    <p>这是一段文字</p>
 
+    <h1>h1</h1>
 
+    <h2>h2</h2>
 
+    <h3>h3</h3>
 
+    <h4>h4</h4>
 
+    <h5>h5</h5>
 
+    <h6>h6</h6>
 
+</body>
 
+</html>

+ 15 - 0
css/7.选择器的优先级.html
Файл харах 

@@ -0,0 +1,15 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <!-- 
+        选择器优先级
 
+        ！important > 内联样式  > id选择器  > 类选择器 = 伪类选择器 = 属性选择器 > 伪元素选择器 = 标签选择器 > 通配符选择器
 
+        正无穷          1,0,0,0    0,1,0,0      0,0,1,0                             0,0,0，1                0,0,0,0
 
+     -->
 
+</body>
 
+</html>