Acasă Explorează Ajutor
Autentificare
lovecoding
/
web0331
10
0
Bifurcare 0
Fisiere Probleme 0 Trageți solicitările 0 Wiki
Răsfoiți Sursa

fix:float

e 4 săptămâni în urmă
părinte
88ffe6b1f1
comite
50936cc839
2 a modificat fișierele cu 148 adăugiri și 0 ștergeri
Vizualizare divizată Arată Statisticile Diff
  1. 130 0
      2.css/10.选择器.html
  2. 18 0
      2.css/11.选择器优先级.html

+ 130 - 0
2.css/10.选择器.html
Vizualizați fișierul 

@@ -0,0 +1,130 @@
 
+<!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>
 
+        /* 
+            * 匹配全局  通配符选择器
 
+        */
 
+        * {
 
+            list-style: none;
 
+            text-decoration: none;
 
+            box-sizing: border-box;
 
+        }
 
+      /* 标签选择器 */
 
+      div {
 
+        width: 200px;
 
+        height: 200px;
 
+        background: #00f;
 
+      }
 
+      /* id选择器 */
 
+      #part1 {
 
+        background-color: red;
 
+      }
 
+      /* class选择器 */
 
+      .part2 {
 
+        background-color: #ff0;
 
+      }
 
+      /* 包含选择器 后代选择器 */
 
+      #part1 span {
 
+        color: #ff0;
 
+        font-size: 30px;
 
+      }
 
+      /* 伪类选择器
 
+            :hover 滑过
 
+            :first-child 第一个子类
 
+            :last-child 最后一个子类
 
+            :nth-child(n) 自定义子类
 
+            even 偶数 2n
 
+            odd 奇数 2n+1
 
+        */
 
+      ul li:first-child {
 
+        color: red;
 
+      }
 
+      /* 
+            伪元素选择器
 
+            ::after/::before {
 
+            content:''
 
+            }
 
+        */
 
+      p::after {
 
+        content: "还在上课";
 
+        color: #00f;
 
+      }
 
+      p::before {
 
+        content: "中午了";
 
+        color: #f0f;
 
+      }
 
+      /* 子类选择器 用>连接 */
 
+      #part1>span {
 
+        color: #0ff;
 
+      }
 
+      /* 群组选择器 用,连接 */
 
+      p,h1 {
 
+        color: pink;
 
+      }
 
+      /* 属性选择器 */
 
+      img[alt='www'] {
 
+        width: 200px;
 
+        height: 200px;
 
+      }
 
+      /* 
+        + 相邻选择器
 
+      */
 
+      h3+h4 {
 
+        color: red;
 
+      }
 
+      /* 
+        ~ 兄弟选择器
 
+      */
 
+      h2 ~ h3 {
 
+        color: purple;
 
+      }
 
+      h2 ~ h5 {
 
+        color: purple;
 
+      }
 
+      /* 
+      !important 优先级：正无穷
 
+      */
 
+      b {
 
+        color: red !important;
 
+      }
 
+      b {
 
+        color: purple;
 
+      }
 
+    </style>
 
+  </head>
 
+  <body>
 
+    <div id="box">
 
+      <div id="part1" class="part2">
 
+        <span> hello </span>
 
+      </div>
 
+      <b>哇哇哇哇哇哇哇哇</b>
 
+      <p>今天星期六</p>
 
+      <ul id="mode1">
 
+        <li>你好</li>
 
+        <li>你好</li>
 
+        <li>你好</li>
 
+      </ul>
 
+      <ul id="mode2">
 
+        <li>你好</li>
 
+        <li>你好</li>
 
+        <li>你好</li>
 
+      </ul>
 
+      <ul id="mode3">
 
+        <li>你好</li>
 
+        <li>你好</li>
 
+        <li>你好</li>
 
+      </ul>
 
+      <a href="">你好</a><a href="">你好</a><a href="">你好</a>
 
+      <h1>哈哈哈</h1>
 
+      <img src="../1.html/images/1.png" alt="www">
 
+      <h2>哈哈哈2</h2>
 
+      <h3>哈哈哈3</h3>
 
+      <h4>哈哈哈4</h4>
 
+      <h5>哈哈哈5</h5>
 
+    </div>
 
+  </body>
 
+</html>

+ 18 - 0
2.css/11.选择器优先级.html
Vizualizați fișierul 

@@ -0,0 +1,18 @@
 
+<!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
 
+        html标签为什么要语义化？
 
+            1.便携开发，可以帮助快速阅读代码
 
+            2.为了方便搜索引擎 进行爬虫
 
+    -->
 
+</body>
 
+</html>