css篇二 css選擇器

果要給一個html標簽添加樣式，使其變個更加美觀。那么就要先選中它。否則鬼才知道你要給誰加樣式呢。

就好比你要讓Tom幫你拿杯水，那你先必須叫他的名字，在對他說：幫我拿杯水過來。否則，鬼知道你在讓誰幫你拿杯水過來。

在開始之前，我們先創建一個index2.html文件，用來學習下面的效果使用：

內容如下：

<!DOCTYPE html>
<html>
<head>
  <title>css選擇器</title>
</head>
<body>
  <p>段落</p>
  <b>加粗</b>
  <span>無</span>
</body>
</html>

css選擇器分類：

css選擇器分為三大類，每個大類下面又分若干小類，它們分別是：

一、基本選擇器

1.通用選擇器

*{
     border:1px solid red;
 }

“*” 號選擇器是通用選擇器，功能是匹配所有html元素的選擇器，包括<html>和<body>標簽。

使用通用選擇器來添加樣式：

<!DOCTYPE html>
<html>
<head>
  <title>css選擇器</title>
  <style>
    *{
      border: 1px solid red;
    }
</style>
</head>
<body>
  <p>段落</p>
  <b>加粗</b>
  <span>無</span>
</body>
</html>

頁面效果如下圖：

上圖中一共有五個紅框，最外面的紅框是<html>標簽，第二個紅框是<body>標簽,第三個紅框是<p>標簽，第四個紅框是<b>標簽，第五個紅框是<span>標簽。通用選擇器就是選中頁面中的所有元素，大家可以多加幾個元素測試一下。

2.元素選擇器

p{
    color:red;
}

直接使用標簽名稱作為選擇器就稱為元素選擇器。

<!DOCTYPE html>
<html>
<head>
  <title>css選擇器</title>
  <style>
    p{
      color:red;
    }
</style>
</head>
<body>
  <p>段落</p>
  <b>加粗</b>
  <span>無</span>
</body>
</html>

頁面效果如下圖：

你也可以試一試把加粗兩字變紅或者變綠，發揮想象自己變一下吧。

3.ID選擇器

在html篇，我們講過元素的屬性，id是元素的通用屬性，每個標簽都可以加上id屬性。例如我們可以給p標簽加上id="abc"

<!DOCTYPE html>
<html>
<head>
  <title>css選擇器</title>
  <style>
    #abc{
      color:red;
    }
</style>
</head>
<body>
  <p id="abc">段落</p>
  <b>加粗</b>
  <span>無</span>
</body>
</html>

id選擇器以#開頭，代表就是id，p標簽的id="abc"，那在寫css樣式的時候，就要寫成#abc。

頁面效果如下圖：

當然你也可以給b標簽加一個id屬性，然后用css的id選擇器將b標簽的文字變為藍色。

這里要注意一點：在一個頁面中id的名字不可以重復，我們p標簽的id為abc，那么b標簽的id就不能為abc了。

4.類選擇器

和id一樣，class也是一個元素的通用屬性，我們可以給span加一個classs屬性：

<!DOCTYPE html>
<html>
<head>
  <title>css選擇器</title>
  <style>
    .test{
      color:red;
    }
</style>
</head>
<body>
  <p id="abc">段落</p>
  <b class="test">加粗</b>
  <span class="test">無</span>
</body>
</html>

類選擇器以"."開頭，例如：要把span標簽里面的文字變成紅色，css的選擇器就應該寫成 .test。class和id不同，class可以重名，我們這里span標簽和b標簽的class都是test。所以

.test{
    color:red;
 }

會同時作用span和b標簽。

頁面效果如下圖：

span和b標簽里面的文字都變紅了。

5.屬性選擇器

每個標簽都有四個通用屬性，分別是：id、class、name、title，還有專用屬性，比如href這個屬性就專屬于a標簽。屬性選擇器就是根據元素的屬性來進行選擇，就拿a標簽來舉例：

<!DOCTYPE html>
<html>
<head>
  <title>css選擇器</title>
  <style>
    [href]{
      color:red;
    }
</style>
</head>
<body>
  <a href="http://www.baidu.com">百度</a>    
</body>
</html>

頁面效果如下：

屬性選擇器還以進一步過濾，比如我們有好多的a標簽：

<!DOCTYPE html>
<html>
<head>
  <title>css選擇器</title>
</head>
<body>
  <a href="http://www.baidu.com">百度</a>
  <a href="http://www.sohu.com">搜狐</a>
  <a href="http://www.sina.com">新浪</a>
  <a href="http://xy2.163.com">網易</a>
  <a href="https://www.php.net">php</a>
</html>

我們要選擇以http開頭的，那么就可以寫成：

<!DOCTYPE html>
<html>
<head>
  <title>css選擇器</title>
  <style>
    [href^="http"]{
      color: red;
    }
</style>
</head>
<body>
  <a href="http://www.baidu.com">百度</a>
  <a href="http://www.sohu.com">搜狐</a>
  <a href="http://www.sina.com">新浪</a>
  <a href="http://xy2.163.com">網易</a>
  <a href="https://www.php.net">php</a>
</html>

[href^="http"]意思就選擇href屬性以http開頭的html標簽。有開頭就有結尾，比如我們選擇以net結尾的標簽：

<!DOCTYPE html>
<html>
<head>
  <title>css選擇器</title>
  <style>
    [href$=".net"]{
      color: red;
    }
</style>
</head>
<body>
  <a href="http://www.baidu.com">百度</a>
  <a href="http://www.sohu.com">搜狐</a>
  <a href="http://www.sina.com">新浪</a>
  <a href="http://xy2.163.com">網易</a>
  <a href="https://www.php.net">php</a>
</html>

有開頭有結尾，那有沒有中間呢？有，*可匹配屬性值包含指定字符的標簽，比如我們要選擇百度：

<!DOCTYPE html>
<html>
<head>
  <title>css選擇器</title>
  <style>
    [href*="baidu"]{
      color: red;
    }
</style>
</head>
<body>
  <a href="http://www.baidu.com">百度</a>
  <a href="http://www.sohu.com">搜狐</a>
  <a href="http://www.sina.com">新浪</a>
  <a href="http://xy2.163.com">網易</a>
  <a href="https://www.php.net">php</a>
</html>

上面效果圖我就不展示了，大家可以自測試一下效果。

二、復合選擇器

1.分組選擇器

將多個選擇器通過逗號分隔，同時設置一組樣式。當然，不但可以分組元素選擇器，還可以使用ID選擇器、類選擇器、屬性選擇器混合使用。

比如我們可以同時選中p、b、span標簽將它們的文字變為紅色：

<!DOCTYPE html>
<html>
<head>
    <title>css選擇器</title>
    <style>
       p,b,span{
         color: red;
       }
</style>
</head>
<body>
  <p id="abc">段落</p>
  <b class="test">加粗</b>
  <span class="test">無</span>
</body>
</html>

也可以：

<!DOCTYPE html>
<html>
<head>
    <title>css選擇器</title>
    <style>
       #abc,.test{
         color: red;
       }
</style>
</head>
<body>
  <p id="abc">段落</p>
  <b class="test">加粗</b>
  <span class="test">無</span>
</body>
</html>

2.后代選擇器

選擇p元素內部的所有b元素，不在乎b的層次深度。當然，后代選擇器也可以混合使用ID選擇器、類選擇器、屬性選擇器。

<!DOCTYPE html>
<html>
<head>
    <title>css選擇器</title>
    <style>
       p b{
         color: red;
       }
</style>
</head>
<body>
  <p>
    <b>1</b>
    <b>2</b>
    <b>3</b>
    
    <b>
      202
      <b>4</b>
    </b>
    <b>
      203
      <b>
        204
        <b>5</b>
      </b>
    </b>
  </p>
</body>
</html>

頁面效果如下圖：

3.子選擇器

子選擇器類似于后代選擇器，而最大的區別就是子選擇器只能選擇父元素下一級的元素，不可以再往下選擇。

<!DOCTYPE html>
<html>
<head>
    <title>css選擇器</title>
    <style>
       ul > li{
         border:1px solid red;
       }
</style>
</head>
<body>
  <ul>
    <li>
      我是兒子
      <ol>
        <li>我是孫子</li>
        <li>我是孫子</li>
      </ol>
    </li>
    <li>我是兒子</li>
    <li>我是兒子</li>
  </ul>
</body>
</html>

頁面效果圖如下：

4.相鄰兄弟選擇器
相鄰兄弟選擇器匹配和第一個元素相鄰的第二個元素。

<!DOCTYPE html>
<html>
<head>
    <title>css選擇器</title>
    <style>
       p+b{
         border:1px solid red;
       }
</style>
</head>
<body>
  <p>第一個</p>
  <b>第二個</b>
  <b>第三個</b>
  <b>第四個</b>
</body>
</html>

頁面效果圖如下：

5.普通兄弟選擇器

普通兄弟選擇器匹配和第一個元素后面的所有元素。

<!DOCTYPE html>
<html>
<head>
    <title>css選擇器</title>
    <style>
       p ~ b{
         border:1px solid red;
       }
</style>
</head>
<body>
  <p>第一個</p>
  <b>第二個</b>
  <b>第三個</b>
  <b>第四個</b>
</body>
</html>

頁面效果圖如下：

三、偽元素選擇器

1.::first-line 塊級首行

塊級元素比如<p>、<div>等的首行文本被選定。如果想限定某種元素，可以加上前置P::first-line。什么是塊級元素我們在html篇中講過，塊級元素就是獨占一行的元素。

<!DOCTYPE html>
<html>
<head>
    <title>css選擇器</title>
    <style>
       ::first-line{
         color:red;
       }
</style>
</head>
<body>
  <p>這里是測試<br>這里是第二行</p>
  <div>這里是測試<br>這里是第二行</div>
</body>
</html>

頁面效果如下圖：

如果只想改變p標簽首行的樣式，那么在前面加上限定p::first-line

<!DOCTYPE html>
<html>
<head>
    <title>css選擇器</title>
    <style>
       p::first-line{
         color:red;
       }
</style>
</head>
<body>
  <p>這里是測試<br>這里是第二行</p>
  <div>這里是測試<br>這里是第二行</div>
</body>
</html>

2.::塊級首字母
塊級元素的首行字母，上面的是首行，現在這個是首行的字母。

<!DOCTYPE html>
<html>
<head>
    <title>css選擇器</title>
    <style>
       p::first-letter{
         color:red;
       }
</style>
</head>
<body>
  <p>這里是測試<br>這里是第二行</p>
  <div>這里是測試<br>這里是第二行</div>
</body>
</html>

頁面效果如下圖：

3.::before 文本前插入

在文本前面插入內容。

<!DOCTYPE html>
<html>
<head>
    <title>css選擇器</title>
    <style>
       a::before{
         content:'點擊-';
       }
</style>
</head>
<body>
  <a href="http://www.baidu.com">百度</a>
</body>
</html>

頁面效果如下圖：

4.::文本后插入

文本后和文本前效果差不多，大家自行測試看效果。

今天的內容就這么多，一定記得多加練習。光看不練是永遠都學不會的。

如果喜歡我的內容記得關注我，我的宗旨是用最通俗易懂的語言，讓所有人都學會電腦編程。大家一起加油！

準命中

我寫的樣式老不生效啊，怎么辦呢？要不來個important吧！反正催得急，先上線再說，有五個屬性都要修改，但是都被覆蓋了，emmm，那就加五個important吧。改到最后項目中隨處都可見important的身影，當你或者其他人在為此抓狂的時候，它躲在一旁邪魅的一笑：就喜歡你看不慣我又干不掉我的樣子！

簡直笑哭

還有一種情況就是，不知道怎么選中需要設置樣式的元素，所以就不斷的加類名，費勁腦筋去想各種各樣名稱，又要見名知意，又要各有不同，因此五花八門越來越多的類名，搞得多人維護的項目變得越來越頭大，甚至讓人抓狂。

生無可戀

下面我們就來搞一搞，看看選擇器有哪些好玩的地方。

優先級概念解析

一共大致分為五個等級：

內聯樣式：權重為(1,0,0,0)
id選擇器：權重為(0,1,0,0)。
類、偽類、屬性選擇器：權重為(0,0,1,0)。
標簽、偽元素選擇器：權重為(0,0,0,1)。
通用、子、相鄰選擇器：權重為(0,0,0,0)。

還有三個特殊的規則：!important、繼承和默認代理樣式。其中!important權重為無窮大。

他們之間的默認優先級順序為：!important > 行內樣式 > id選擇器 > 類選擇器 > 標簽選擇器 > 通用選擇器 > 繼承 > 代理(瀏覽器)默認屬性。

樣式生效的規則符合以下幾點：

兩個選擇器權重不同時，權重搞得優先生效。
兩個選擇器權重相同時，后定義的優先生效(即層疊樣式表的特性，后面定義的會覆蓋前面定義的)。
被!important修飾的屬性，會無條件的優先生效。

這里面還有幾個需要注意的點：

所有權重中的0和1代表的是標識位，如內聯樣式的(1,0,0,0)代表第一等級標識位為1，并不是代表內聯樣式權重為1000，同樣id選擇器(0,1,0,0)代表第二個標識位為1，并不代表內聯權重為100。也就是說#container {color: red}具有第二級權重。
同一權重等級下的選擇器才可以累加，低等級權重的選擇器永遠不會超過高等級的選擇器，如#a.b.c的優先級比#a.d的優先級要高，因為它們雖然都擁有第二等級權重，但是#a.b.c比#a.b多了一個第三等級的權重，而#a的優先級永遠比.b.c(可以有任意多個低于第二等級權重的選擇器)高，因為在進行權重比較的時候，是從高到低逐級比較的，#a選擇器為第二等級，那么.b.c沒有第二等級權重，即使有再多的第三級權重都沒用。
!important選擇器雖然權重為無窮大，但是與數學中無窮大的比較不同，兩個!important權重是可以進行比較的，兩個同時擁有!important屬性的選擇器，也符合上面的比較規則，如#a中的!important要比.b中的!important優先級高。

權重逐級比較公式：(第一等級權重*該選擇器個數,第二等級權重*該選擇器個數,第三等級權重*該選擇器個數,第四等級權重*該選擇器個數,第五等級權重*該選擇器個數)。

會逐個標識位進行比較，并不是進行簡單的加法運算。

是的沒錯

寫了這么長的文字，可是實在找不到可以插入一張圖片的地方。總感覺思路會被打斷。現在可以休息一下，稍后再往下看。

選擇器類型解析

假設你已經對各種類型的選擇器有所了解，知道了什么是類選擇器、什么是內聯樣式、什么是標簽選擇器等。

接下來我們討論一下幾種組合選擇器：(示例中都是用類名或標簽作為選擇器，因此為了簡便，對于.a1這種的選擇器，在表達的時候直接用a1來表示擁有類名a1的元素)

① *：這里先要介紹一下通用選擇器，* {}選擇器將會覆蓋所有元素的代理默認樣式，也可以用div.container * {}來指定對類名為container的div元素下的所有子孫元素應用樣式。

② .a1 > .b1：表示給a1的子元素b1應用樣式。只能是子元素，不包括孫子元素。

<style>
  .a1 > .b1{
    color: red;
  }
</style>
<ul class="a1">
  <li class="b1">1</li>
  <li>
      <span class="b1">2</span>
  </li>
</ul>

選擇子元素

③ .b1 + .b2：表示給b1后面的緊跟著的b2應用樣式。

<style>
  .b1 + .b2{
    color: red;
  }
</style>
<ul class="a1">
  <li class="b1">1</li>
  <li class="b2">2</li>
  <li class="b2">3</li>
</ul>

選擇緊跟的

④ .b1 ~ .b2：表示給b1后面的b2應用樣式。不用緊跟。

<style>
  .b1 ~ .b2{
    color: red;
  }
</style>
<ul class="a1">
  <li class="b1">1</li>
  <li class="b2">2</li>
  <li class="b2">3</li>
</ul>

選擇后面的

⑤ li:first-child：表示給li應用樣式，但是li必須是屬于其父元素的第一個子元素。li:last-child與其類似，但是li必須是屬于其父元素的最后一個子元素，不再給出示例。

<style>
  li:first-child{
    color: red;
  }
</style>
<ul>
  <li>1</li>
  <li>2</li>
  </ul>
  <ul>
    <li>3</li>
  <li>4</li>
</ul>

選擇屬于第一個子元素的

⑥ span:first-of-type：表示給span應用樣式，其中只要span屬于其父元素的所有子元素中的第一個span即可，即span前面的兄弟元素再沒有其他的span，則應用樣式。span:last-of-type與其類似，只是span后面的兄弟元素再沒有其他的span，則應用樣式，不再給出示例。

<style>
  span:first-of-type{
    color: red;
  }
</style>
<div>
  <span>1</span>
  <p>2</p>
  </div>
  <div>
    <p>3</p>
  <span>4</span>
</div>

選擇第一種該類型

(Tips：first-child與first-of-type不同的地方在于，first-child必須是作為第一個子元素，而first-of-type是作為同一種類型中的第一個，他們都可修飾多個選擇器，如.a.b:first-child。last-child和last-of-type同理。)

⑦ .b:not(li)：表示給b應用樣式，但是li除外。

<style>
  .b:not(li) {
    color: red;
  }
li:not(.a) {
  color: red;
}
</style>
<ul>
  <li class="a">1</li>
  <li class="b">2</li>
  </ul>
  <div>
    <div class="a">3</div>
  <div class="b">4</div>
</div>

"非"修飾符

⑧ li:nth-child(order)：表示給li應用樣式，但是li必須是屬于其父元素的第order個子元素。li:nth-last-child(order)與其類似，但是li必須是屬于其父元素的倒數第order個子元素，不再給出示例。

li:nth-child(2) {
  color: red;
}
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

可以指定為第幾個元素應用樣式

這里還有一個小技巧，比如我想要選擇前五個li，能做到嗎？當然可以。請看代碼。

<style>
  li:nth-child(-n + 5) {
    color: red;
  }
</style>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
</ul>

選擇前五個元素

這是因為除了可以指定order之外，還可以指定一個迭代序列n(從0開始)，ul有8個li子元素，所以n可以取0,1,2,3,4,5,6,7，所以-n + 5可取出5,4,3,2,1,0,-1,-2，舍去負數，那么就是選中了1,2,3,4,5也就是前五個元素，注意這里只能寫成-n + 5的形式，而不能寫成5 - n的形式。

同樣，它還有幾種表達方式：(由于html部分與上面相同，不再重復列出)

<style>
  /* 選擇第五個li元素，以及后面的所有li */
  li:nth-child(n + 5) {
    color: red;
  }
</style>

第五個及之后的元素

n+一個數字，表示這個數字以及之后的元素應用樣式，-n+一個數字，表示這個數字以及之前的元素應用樣式。

/* 以2的倍數選擇li元素 */
li:nth-child(2n) {
  color: red;
}

只選擇2的倍數

注意這里只能寫成2n的形式，不能是2 * n或n * 2。

<style>
  /* 以2的倍數加1選擇li元素 */
  /* n從0開始 */
  li:nth-child(2n + 1) {
    color: red;
  }
</style>

2的倍數加1

⑨ li:nth-of-type(order)：只在li類型中查找符合條件的來應用樣式，與nth-child一樣，只不過加了個類型區分。li:nth-last-of-type(order)與其類似，但是li必須是屬于其父元素的倒數第order個子元素，不再給出示例。

<style>
  /* 按照同類型查找，不會受div影響 */
  li:nth-of-type(2n) {
    color: red;
  }
</style>
<ul>
  <li>1</li>
  <li>2</li>
  <div>9</div>
  <div>10</div>
  <li>3</li>
  <div>11</div>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
</ul>

按照類型來查找

它們同樣可以指定一個迭代序列n，與上面相同，故在此不做示例。

⑩ .a:only-of-type：表示給a應用樣式，但是a的標簽類型必須在其父元素中唯一。

<style>
  /* 注意：type指的是標簽名要唯一才會生效 */
  .a:only-of-type {
    color: red;
  }
</style>
<div>
  <div class="a">1</div>
  <span>2</span>
  <p>3</p>
</div>
<div>
  <div class="a">1</div>
  <span>2</span>
  <p class="a">3</p>
  <!-- 如果去掉下面這一行，那么第一行的1也會變顏色 -->
  <div class="a">4</div>
</div>

對唯一的類型應用樣式

哇！終于大概都講完了。由于選擇器太多了，篇幅有限，不能一一列舉，其他的偽類、偽元素、屬性選擇器等，大家直接可以去官網查閱就可以了，都是基礎的內容。

good job!

局部作用域

在vue中，由于組件化的概念，我們希望當前的樣式只能當前文件中生效，不要影響全局的樣式，因此可以給style標簽設置scoped屬性。這里有一套機制來保證每個組件間的樣式是處于隔離狀態的，不會互相影響，不但兄弟組件如此，父子組件也可以這樣。

很好

這樣是很好的，為我們帶來了便利，并且不用為同名的問題所困擾，但是有一種情況是：當我們引用子組件的時候，想要修改它里面的樣式，這個時候正常的選擇器是無法生效的，我們無法選擇到子組件里面的元素。

這是因為每一個組件都是獨立樣式作用域，它用一個唯一標識來區分，在父組件中寫的樣式，會自動在選擇器的最后面加上這個唯一標識，而子組件中有自己的另一個唯一標識，所以會選擇不到該元素。

這可怎么辦？

這個時候我們可以使用一個叫做深度選擇器的功能來幫助我們解決這個問題。

用>>>來表示，你也可以使用/deep/或者::v-deep，都代表相同的含義，只不過是寫法不同，一個別名而已。

<style scoped lang="scss">
  .a >>> .b {
    color: red;
  }
</style>

經典案例

我們以下面這段html片段為例。

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
</ul>

區間選擇：我們可以指定一個區間來選擇指定的元素。

<style>  
	/* 選擇2到5之間的 */
  li:nth-child(n + 2):nth-child(-n + 5) {
    color: red;
  }
</style>

區間選擇1

<style>
  /* 選擇4以及之后的，但必須是2的倍數 */
  li:nth-child(n + 4):nth-child(2n) {
    color: red;
  }
</style>

區間選擇2

<style>
  /* 選擇3的倍數之外的 */
  li:not(:nth-child(3n)) {
    color: red;
  }
</style>

偽類選擇：我們可以通過偽類來做一些事情。

<style>
  span {
    cursor: pointer;
  }
  span + span {
    display: none;
  }
  span:hover + span {
    display: inline;
  }
</style>
<div>
  <span>查看識別碼</span>
	<span>5201314</span>
</div>

默認狀態

鼠標懸浮

題外話

說幾句題外話，雖然不是選擇器的內容，但是也跟它有關系，主要有以下幾個方面：

我們在修改元素樣式的時候，盡量先預設好選擇器的樣式，然后通過動態增加或移除相應的類名來達到效果，而不是直接設置style。
應該盡量避免使用id選擇器，最好都通過標簽、類名、屬性選擇器來操作樣式。因為id選擇器權重大，有時候覆蓋起來不方便。而且id只能存在一個。再有一個就是id選擇器會比類選擇器給瀏覽器帶來更大的負擔。
盡量少使用!important，多通過上面講述的權重規則來設定相應的樣式。
盡量少用通用選擇器，即通配符*，也會給瀏覽器增加負擔。

CSS很厲害

總的來說

CSS選擇器在我們實際開發工作當中不但是不可缺少的一部分，而且幾乎時時刻刻都要與之打交道，熟練掌握他們的用法和原理，能夠使我們在操作元素樣式的時候得心應手，今天內容你學會了嗎？[比心]

感謝閱讀!

tml和css的使用方法以及樣式，很好的基礎知識系列，內容都是干貨知識點，適合收藏下來！

布局步驟

第一步：清除默認樣式

第二步：劃分模塊

第三步：設置模塊的大小以及位置

第四步：劃分下一級模塊

html和css

引入網頁頭像

css樣式表的引入方式

1、外鏈式

2、嵌入式

3、行內樣式

@import url('')

文件命名以及變量命名

命名規范

1、嚴格區分大小寫

2、可以采用字母數字下劃線$,數字不開頭

3、命名語義化

4、可以采用駝峰命名法

清除默認樣式

清楚邊距

margin: 0;

padding: 0;

list-style: none;

}

a標簽清楚下劃線和顏色

color: black;

text-decoration: none;

}

css中顏色的表示方式

css中顏色的表示方式：

1.預定義的顏色【關鍵字顏色】 red pink blue yellow

2.#6位數的色值 #00-00-00 紅綠藍

3.rgb（紅，綠，藍）：rgb([0-255],[0-255],[0-255])

4.rgba（red，green，blue，透明度）：rgba([0-255],[0-255],[0-255]，[0-1])

0-1: 0全透明，1不透明

html中的標簽和屬性

html：

標簽：

按照語法分類：

1.單標簽：只有開始標簽

meta img a

2.雙標簽：有開始標簽和結束標簽

3.屬性的語法

語法：

屬性名 = "屬性值"

屬性名 = "屬性值1 屬性值2"

注意:

1、標簽名和屬性名之間要有空格

2、多個屬性之間要有空格

3、多個屬性值之間要有空格

4.開始標簽標簽名后有空格

按照標簽在頁面中的呈現效果分類：

1、行內元素

行內元素定義:在一行內顯示，只能設置左右間距，不可以設置上下間距。

舉例：span del i em b strong a(title="鼠標移入時顯示的文字";target=" "(新窗口打開的位置 _self:在本窗口打開;_blank:在新窗口打開) ...

2、塊元素

塊元素定義：可以設置寬高，獨占一行。

舉例：div 標題標簽列表標簽段落標簽 ...

3、行內塊元素

行內塊元素定義：可以設置寬高，在一行顯示。

舉例：img 【title="鼠標移入時顯示的文字" 】表單控件

元素的轉換

塊元素： display:block;

行內塊元素：display:inline-block;

行內元素： display:inline;

元素的級別

塊元素 > 行內塊元素 > 行內元素

元素嵌套規范

1、同一級別可以相互嵌套

2、級別高的元素可以嵌套級別低的元素

3、段落標簽只能嵌套行內元素

4、a標簽不可以嵌套a標簽；p不能嵌套p

盒子模型及其問題

四部構成：

1、margin 外間距盒子與盒子之間的距離

2、border 邊框

3、padding 內填充（內間距）邊框與內容之間的距離。

4、content 內容

margin-top margin-right margin-bottom margin-left

margin: 50px; 上右下左

margin: 50px 100px; 上下左右

margin:0 auto; auto自動

margin: 50px 100px 150px; 上左右下

margin: 50px 100px 150px 200px; 上右下左

border: 1px solid red;

border-top \ border-right \border-bottom \ border-left

border-top-width：上邊框的寬度

padding:設置方法同margin

content: ;

width : 數值百分比 auto

height: 數值百分比 auto

盒子模型的問題：

1.大部分元素的margin和padding默認為0，但有一部分的margin和padding不為0，例如body 標題標簽（h1-h6）（ul ol il等列表標簽）段落標簽

2.想領的兩個塊元素的margin會重合，值會取最大值

3.margin可以為[負數] ，padding不可以設置[負數]。

4.行內元素margin只有左右，沒有上下

5.如果（1）發生嵌套關系的元素，（2）父元素沒有上邊框，（3）上padding ，（4）父元素與子元素之間沒有別的內容，此時子元素margin-top就會作用到父元素身上

margin-top的解決方式：

1.用父元素的padding-top代替子元素的margin-top；

2.給父元素添加overflow：hidden；

寬高的設置和計算

height：auto / 百分比 / px；

width：auto / 百分比 / px；

height：auto；參照與父元素

width：auto；參照與內容

box-sizing：border-box；將邊框算入盒子內；

一個元素實際的寬高

實際寬度 = border-left + padding-left + width +paddint-right + border-right;

實際高度 = border-top + padding-top + height + padding-bottom + border-bottom;

浮動

作用：讓塊元素橫排排列

樣式： float：left；從左往右排列

float：right；從右往左排列

原理：讓元素脫離文檔流，讓元素從文檔層浮動到浮動層。

引發的問題：父元素不設置高度，子元素都浮動，浮動的子元素撐不開父元素。（浮動的元素脫離文檔流）

*解決方式一：給父元素添加 overflow：hidden；（超出部分隱藏）

*解決方式二：在父元素內容最后添加擁有清除浮動屬性的元素。

clear：right/left/both ；別的浮動對它的影響清除掉

例：

.box：after{

content: "";

display:block;

width: 0;

height: 0;

clear:both;

}

*解決方式三：父元素能設置高度的盡量設置高度

浮動之后的塊元素參照內容：屬性值 auto

定位

定位的元素脫離文檔層，到達定位層

定位的元素會多出5個樣式：

top right bottom left z-index：999

上右下左層級（層級越高，離用戶越近）【只能在有定位屬性的元素上才能用】

層級：

z-index：整數；

定位的幾種方式：

1.相對定位：

相對于自身來定位，在文檔層中保留原來的位置

用法：

position：relative；

2.絕對定位：

相對于最近的定位的祖先元素來定位，完全脫離文檔流（其他頂替其位置）

用法：

position：absolute；

+方向值

3.固定定位：

相對于瀏覽器的四條邊，完全脫離文檔流

用法：

position：fixed；

top與bottom同時定義，那個樣式會作用到元素身上的判斷關系：

top的權重比bottom的權重大

left的權重比right的權重大

元素作用時：

1.如果是

position：relative；

left：；

margin：；

先作用margin，在作用relative；

2.如果是

position：absolute；

left：；

margin：；

先作用absolute，在作用margin；

定位元素的居中方式：

方法一：

1.水平居中：

position：absolute；

left：50%；

margin-left：-自身長度的一半；

2.垂直居中：

position：absolute；

top：50%；

margin-top：-自身長度的一半；

3.絕對居中：

position：absolute；

left：50%；

top：50%；

margin-left：-自身長度的一半；

margin-top：-自身長度的一半；

方法二：

1.水平居中：

position：absolute；

left：0；

right：0

2D和3D

2D和3D屬性：

1.平移樣式

transform:translate(x,y); 向上為負，向下為正

transform:translateX(100px);

transform：rotate（180deg）；（1turn）轉一圈

平移 transform:translate（）例子：translate（x，y） translateX（）

旋轉 transform:rotate（）例子rotate（180deg）順時針 -180deg 逆時針

transform：rotate（）空格translate（）；

transform-origin:px px;變換的中心點；

left center；

縮放 transform:scale（）例子：scale（2）放大為原來的2倍 scale（0.n）縮小為原來的0.n scale（m，n） x軸m，y軸n

斜切 transform:skew（）例子：skew（45peg）左拉伸45° skew（45peg，m）

過渡transition
transition：all 0.5s；

全部時間

3.過渡的屬性樣式： transition-property: ， ;

可以為：屬性的全部樣式

4.過度的總時間： transition-duration：；

5.過渡的時間函數： transition-timing-function：；

linear（勻速） ease（開頭結尾慢，中間快）

cubic-bezier（1，0.07，0.54，0.21）貝塞爾曲線

6.延遲 transition-delay：；

3d效果：和2d的一樣transition，transform；

prespective：給父元素加prespective（滅點的值）

prespective-origin：x y；滅點的位置調整觀察的角度（大多數情況不設置）

transform：ratate3d（0-1的值,0-1的值,0-1的值,45deg）

transform：ratateY（45deg）

transform：translate3d（0-1，0-1，px）

父元素：transform-style：preserve-3d；

動畫

動畫規則：

@keyframes 動畫名（隨便給）{

（動畫規則）

from{}

to{}

}

@keyframes 動畫名（隨便給）{

（動畫規則）

0%{}

50%{}

100%{}

}

@keyframes animation1{

from{

background-color:red;

}

to{

background-color:blue;

}

掛載動畫:將動畫加到元素身上

.元素{

animation：animation1 時間步數時間函數延遲時間次數；

}

掛載多個動畫：

.元素{

animation：animation1 時間,animation2 時間,animation1 時間；

其他動畫的相同的可以附件通過animation屬性；

}

animation的樣式

動畫名：animation-name

時間： animation-duration

步數：animation-steps：8；

時間函數：animation-timing-function

延遲： animation-delay

動畫次數： animation-iteration-count：infinite（無限次）/2；

指定下一次動畫是否逆向：animation-direction：alternate（逆向）/ normal（常規）；

最后的狀態：animation-fill-mode：backwards（默認（保持一開始的狀態））/forwards（保持當前的狀態）；

狀態即指定動畫是否運動： animation-play-state: running（運行）/paused（靜止）;

元素分類

按照在頁面中的呈現效果：

1.行內元素：在一行內顯示，不可以設置寬高：（存放文字）

span a b i strong del

2.行內塊元素：在一行內顯示，可以設置寬高：（有縫隙不常用）

img 表單控件

3.塊元素：可以設置寬高，獨占一行

div 標題標簽（h1-h6）列表標簽（ul-li ol-li dl>dt+dd 段落標簽（p pre））

元素嵌套規范：

1.同一級別可以相互嵌套

2.級別高的可以嵌套級別低的元素

3.p標簽只能嵌套行內元素

4.a鏈接不能相互嵌套

元素的轉換：

1.塊元素：display：block；

2.行內塊元素：display：inline-block；

3.行內元素：display：inline；

背景圖片以及瀏覽器內核

背景圖

先設大小，在引background；

background: url('路徑') no-repeat left bottom/contain；

//圖片位置禁止重復位置（top bottom left right）

路徑：background-image：url（“”），url（“”）；加載多張背景圖
背景圖大小： background-size：100px auto，100px auto；會重復
背景的圖重復：

4. background-repeat：no-repeat，repeat；（無重復）

5. background-repeat：repeat-x（x方向重復）

background-repeat：repeat-y（y方向重復）

背景圖的位置：

background-position：x y；（數值方位值（top/bottom left/rightcenter（可以省略）））

背景開始渲染的位置： background-origin: ;

8. padding-box；（默認）從padding位置開始渲染

9. border-box；從邊框的位置開始渲染

content-box；從內容的位置開始渲染

圖片結束渲染的位置：background-clip: ;

11. padding-box；（默認）從padding位置結束渲染

12. border-box；從邊框的位置結束渲染

content-box；從內容的位置結束渲染

使得背景圖加載到瀏覽器中
background-attachment: fixed;

8.可以簡寫：

background：空格隔開；

背景圖漸變
background: linear-gradiend(top，顏色1，顏色2，顏色n)

//漸變開始的方向（默認top）類似25deg（25度）

10.瀏覽器內核//背景色漸變

1. /* 標準語法 */

例子：background: linear-gradient(top,#3bbcff,#47eaff);

2. /* 谷歌內核 -webkit- */

例子：background: -webkit-linear-gradient(top,#3bbcff,#47eaff);

3. /* 火狐內核 -moz- */

例子：background: -moz-linear-gradient(top,#3bbcff,#47eaff);

4. /* 歐鵬內核 -o- */

例子：background: -o-linear-gradient(top,#3bbcff,#47eaff);

5. /* IE內核 -ms- */

例子：background: -ms-linear-gradient(top,#3bbcff,#47eaff);

文件的讀取方法路徑

絕對路徑：從盤符開始的一條完整路徑

相對路徑：兩個文件的位置關系

邊框的相關屬性【圓角，邊框形狀】

border-radius：邊框的半徑設置圓角 n%或者num像素

border-style:dotted solid double dashed;

上邊框是點狀

右邊框是實線

下邊框是雙線

左邊框是虛線

透明度

透明性的選擇：（整個容器都變）

opacity：；0-1之間的值；

字體

font-family =“ 字體” //字體樣式可以被繼承

鼠標移入樣式

span標簽

cursor：pointer；鼠標樣式：手型

陰影

box-shadow：x軸偏移量 y軸偏移量陰影的模糊程度陰影的大小（0和本身一樣大小）陰影的顏色；

引入字符圖標

引入字符圖標：

行內元素隨意

span class=“iconfont 圖標類名”

可調節樣式：同文字

文檔流

文檔流：

標準情況下，頁面元素從左往右從上往下依次排列

flex布局(規范的設計稿)-彈性布局

容器（父元素）的屬性：【display:flex;】

*flex-direction: 決定主軸方向。

row 主軸在水平方向，從左向右（默認）。

row-reverse 主軸在水平方向，從右向左

column 主軸在垂直方向，從上到下

column-reverse 主軸在垂直方向，從下到上

*flex-wrap: 決定項目換行

wrap: 項目換行

nowrap: 項目不換行（默認值）

wrap-reverse：項目換行且反轉

*justify-content: 決定項目在主軸的對齊方式

flex-start;主軸的起點

flex-end;主軸的終點

center;主軸的中心

space-between;兩端對齊

space-around;項目兩側距離相等

*align-items：項目在交叉軸上的對齊方式（適用于一根軸線與多跟軸線）

flex-start:交叉軸的起點

flex-end：交叉軸的終點

Center：交叉軸的中心

baseline：基線對齊（文本底部）

*align-content:定義項目在交叉軸上的對齊方式（僅適用于多根軸線）

flex-start;交叉軸的起點

flex-end;交叉軸的終點

center;交叉軸的中心

space-between;兩端對齊

space-around;兩側距離相等

子元素（項目）的屬性：

*order：定義項目的排列順序，數值越小，越靠前，默認值為0（可以取負值）。

*flex-grow:定義項目的放大比例。默認值為0，即使存在剩余空間，也不放大。

*flex-shrik：定義項目的縮小比例，默認值為1，空間不足，項目縮小;值為0時,空間不足,項目也不縮小.

*flex-basis: 定義項目占據的主軸空間.默認auto或者自己添加像素;

*align-self:定義單個項目在交叉軸的對齊方式.

flex-start:交叉軸的起點

flex-end：交叉軸的終點

Center：交叉軸的中心

滾動條

overflow-x：auto；超出部分在x軸的表現形式。

auto：自動；（如果超出，就自動以滾動條的形式顯示）

去滾動條：加在具有overflow屬性的元素身上

::-webkit-scrollbar{

height：0；

}

值描述測試

visible 不裁剪內容，可能會顯示在內容框之外。測試

hidden 裁剪內容 - 不提供滾動機制。測試

scroll 裁剪內容 - 提供滾動機制。測試

auto 如果溢出框，則應該提供滾動機制。測試

no-display 如果內容不適合內容框，則刪除整個框。測試

no-content 如果內容不適合內容框，則隱藏整個內容。測試

輪播圖

swiper(.js).com

表格

[行] [列]

table身上的屬性

table身上的屬性：

border：表格邊框 cellspacing：單元格間的間距

cellpadding：單元格的內容與其邊框的內邊距

bgcolor：表格的背景顏色 background：表格的背景圖片

width：表格寬度 height：表格高度

border-collaspe：collaspe：邊框合并，不疊加 cellspacing：0：邊框合并，但合并之后的邊框寬度等于前兩個邊框寬度之和

caption：表格標題

background:表格背景圖

cellspacing:單元格之間的間隙寬度

align:表格的水平對齊方式，通常是left，center，right

表格的標題

單元格【tr】【td】

width：單元格寬度height：單元格高度

align：單元格內文本的對齊方式,通常是左，中，右 left，center，right

valign：單元格內文本的對齊方式,通常是上，中，下 top，middle，bottom

nowrap：在為設置單元格寬度時，當文本長度寬于單元格寬度，將要換行時，該標簽會使其不換行

<td align="center" nowrap>手機空中免費充值</td>

</tr>

表格的跨行與跨列【td】

rowspan：跨行標簽，表示跨了多少行

colspan：跨列標簽，表示跨了多少列

表格標簽拓展及其屬性

thead：定義表格的表頭。

tbody：定義表格主體（正文）。

tfoot：定義表格的頁腳（腳注或表注）。

colgroup：標簽用于對表格中的列進行組合，以便對其進行格式化。

注意：不管thead、tbody、tfoot的代碼先后順序如何，html顯示時，始終是先顯示thead，再顯示tbody，最后顯示tfoot。

1、<thead> 內部必須擁有 <tr> 標簽！

2、<tfoot> 元素內部必須包含一個或者多個 <tr> 標簽。

3、<tbody> 元素內部必須包含一個或者多個 <tr> 標簽。

4、必須在 table 元素內部使用這些標簽。

5、當不同行間的單元格合并時各單元格所在的行不要加tbody標簽。

標題欄

《tr》<th></th>《/tr》用法和td相似知識自動將單元格內容以粗體顯示

表單控件表單標簽

action:表單信息提交的位置；

method：提交的方式

get：地址欄，信息量少，安全性低

post：信息量多，比較安全

1.輸入文本【輸入框】：

用戶名：<input type="text" placeholder="請輸入用戶名" maxlength="10" value=" " name="username" class="">

placeholder：默認提示文本;

maxlength:規定輸入的最大字符數

name:本文本框的名字，與后臺進行數據交互用

class:定義本文本框的樣式，相當于盒子

placeholder下的縮進

text-indent：2em；縮進

2.輸入密碼【密碼框】：

密碼：<input type="password" placeholder="請輸入密碼" maxlength="10" value=" " name="psw" class="">

3.單選按鈕[name的值必須相同]：

請選擇你的性別：

<label for="man"> [label實現點什么就選中，for中的值和id中的值相同]

男：<input type="radio" name="sex" id="man" checked> //checked默認選項

</label>

女：<input type="radio" name="sex" id="woman">

</label>

4.多選按鈕[name的值必須相同]：

請選擇你喜歡的音樂：

搖滾：<input type="checkbox" checked>

5.下拉列表【下拉框】：

選擇你的學歷：

</select>

6.上傳文件：

選擇你的照片：

7.留言文本空間：

</textarea>

8.用戶是否允許重新設置textarea大小css屬性：

resize: none/both/vertical/horizontal;不允許/上下允許拖動/只能在垂直方向拖動/只能在水平方向拖動

9.重置按鈕：

10.提交按鈕：

11.自定義按鈕：

12.顏色：

13.時間日期：

年月：<input type="month">

年周：<input type="week">

時分：<input type="time">

年月日：<input type="date">

年月時分：<input type="datetime-local">

14.驗證

<input type="email"> 郵箱驗證

<input type="tel" autofocus> 電話

15. autofocus 自動獲取焦點

</form>

文本模型

文本換行

使非中日韓文本換行

word-break: break-all ;

文本禁止換行

white-space:nowrap;

單行文本溢出部分以省略號顯示

overflow: hidden;(放文本的容器)

text-overflow: ellipsis;

多行文本溢出

指定為彈性盒子
display: -webkit-box;
在彈性盒模型中指定元素的排列順序
-webkit-box-orient: vertical;
指定文本顯示（溢出）的行數;
-webkit-line-clamp: 3;
height要是line-height的倍數
line-height: 70px;
overflow：hidden；

音頻視頻標簽

音頻標簽

controls 空間向用戶顯示：

loop 循環播放

autoplay當前頁面加載完自動播放

視頻標簽

H5語義化標簽

<section>頁面中的某一部分</section>

meta標記【簽】

name="關鍵字" cantent="內容"

<mate http-equiv="Refresh" content="10";url="跳轉路徑"> //每10s刷新一次并且跳轉到跳轉路徑知識的文件

bgsound標簽

body屬性

bgcolor:背景顏色
background：背景圖片
text：文檔中文字的顏色
link：超鏈接的顏色
alink：正在訪問的超鏈接的顏色
vlink：已訪問過的超鏈接的顏色
leftmargin/rightmargin/topmargin/bottommargin：左/右/上/下邊距的像素值

對文字操作的標簽

<p></p>開始一個新段落，可單可雙
換行標簽，單獨標記
<pre></pre>預格式化【敲什么樣式，顯示什么樣式】
<font></font> 用來設置文字的字體大小顏色粗細等
文字樣式標記[均成對出現]
b 粗體 i 斜體 u 下劃線 tt 等寬
sup 上標體 sub 下表體 strike 刪除線 big 大號字樣
small 小號字樣 blink 閃爍字樣 em強調字樣 strong著重字樣 cite引用字樣

列表標簽

符號列表
<ul type="circlr(空心圓點)/disc（實心圓點）【默認】/square（實心方塊）">

2. <li>

<li>

</ul>

排序列表
<ol type="1(數字) /a（a，b，c..）/ A(A,B,C...)/ i(i,ii,iii,...)/ I(I,II,III,...)">

4. <li>

<li>

</ol>

a標簽

<a href="路徑 " title="鼠標移入時顯示的文字" target=" "(新窗口打開的位置 _self:在本窗口打開;_blank:在新窗口打開；_parent:在當前窗口的父窗口打開鏈接；_top:在整個瀏覽器窗口打開) ...

[字符實體]常用的轉義字符

顯示結果描述實體名稱

空格

< 小于號

大于號

& 和號

" 引號

' 撇號 (IE不支持)

￠分（cent）

￡鎊（pound）

￥元（yen）

€ 歐元（euro）

§ 小節

? 版權（copyright）

? 注冊商標

? 商標

× 乘號

÷ 除號

選擇器

分類

css選擇器

1.通用選擇器：

*｛｝//選擇所有的標簽

2.群組選擇器：

E1,E2,E3..｛｝//選擇E1 E2 E3

3.標簽選擇器

標簽名｛｝

4.類名選擇器：

.類名｛｝

5.后代選擇器

.E1 .E2｛｝ //選擇E1 的后代E2

6.交叉選擇器

標簽名.類名｛｝

7.id選擇器

例如創建id

#id名｛｝ //選擇頁面中id為**的標簽

8.偽類選擇器：

鼠標移入狀態

E：hover{ } E元素選擇鼠標移入狀態

E：hover .子類{ } 選擇e元素下鼠標移入時子類的變化

獲取焦點，用于表單的輸入

E: focus{

outline: none;

}

9.偽結構選擇器：

E：first-child｛｝作為子元素的第一個孩子的E標簽

E：last-child｛｝作為子元素的最后第一個孩子的E標簽

E: nth-child(n){} //作為子元素的第n個孩子的E標簽

E: nth-last-child(n) 作為子元素的倒數第n個孩子的E標簽

E：first-of-type｛｝作為子元素的同類型的第一元素

E：last-of-type｛｝作為子元素的同類型中的最后一個元素

E: nth-of-type（n）作為子元素的同類型中的第n個元素

E: nth-last-of-type(n) 作為子元素的同類型中的倒數第n個元素

（n）n可以以為num/even（偶數）/odd(奇數)/3n（3的倍數）

例子：5.15/偽結構選擇器

10.偽元素選擇器：

::after{} 在元素之后加入一個

::before{

content：“內容之前”；

color：；

} 在元素之前

屬于行內元素

::after{} ::before{}偽元素 content：""；樣式必須寫

11.子類選擇器

相鄰兄弟選擇器

E1+E2｛｝選擇E1的下一個兄弟元素E2（不能選中上一個兄弟元素）

div.box>a+img a和img統計

子類選擇器

E1>E2{} 選擇E1的子類元素E2

例子：div.box>div.item{$}*20

div.box>a>img

12.屬性選擇器

[屬性名]{} 選擇所有擁有屬性為屬性名的元素

[屬性名=“value”]｛｝選擇擁有屬性名的屬性且屬性值為value

E[屬性名=“value”]{} 選擇擁有屬性名的屬性且屬性值為value的E元素

E[屬性名~=“value”]{} 選擇擁有屬性名的屬性并且屬性值一個或者多個，其中一個屬性值為value的E元素

E[value^=“1”]{} 選擇擁有 value的屬性并且屬性值一個或者多個，其中一個屬性值以 1 開頭的E元素

E[value$=“1”]{} 選擇擁有 value的屬性并且屬性值一個或者多個，其中一個屬性值以 1 結尾的E元素

E[value*=“1”]{} 選擇擁有 value的屬性并且屬性值一個或者多個，其中一個屬性值包含 1 的E元素

例子：屬性選擇器

選擇器的優先級

宗旨：越具體的優先級越高

id (100 ) > class( 10 )> 標簽名( 1)

.box .son{ } 10+10=20

abcde優先級（e為個位）：

a:行內樣式

b:id選擇器

c:類名選擇器偽類選擇器（：hover）屬性選擇器

d:標簽選擇器偽元素選擇器（：：after）

e:通用選擇器有一個

選擇有中有一個abcde在其位置+1

移動端布局步驟

修改視口
<meta name="viewport" content="width=device-width">

視口：視覺視口，布局視口，理想視口

em:當前字體的倍率 100px=10em

rem：html字體的倍率

移動端窗口 375*667

html{

font-size：0.5rem；

}

.box{

width： 750rem； //375px=750rem*0.5px ； 100px=1rem

height： 1334rem；

}

引入rem.js
<script src="路徑"></script>
修改rem.js中設計稿的寬度
100px=1rem

我是一名前端開發程序員，自己整理了一份2019最全面前端學習資料，從最基礎的HTML+CSS+JS到移動端HTML5到各種框架都有整理，送給每一位前端小伙伴，這里是小白聚集地，歡迎初學和進階中的小伙伴
前端資料獲取方式：
1.在你手機的右上角有【關注】選項，點擊關注！
2.關注后，手機客戶端點擊我的主頁面，右上角有私信，請私信回復：【學習】
電腦已經設置好了關鍵詞自動回復，所以回復的時候請注意關鍵詞喲~

在線咨詢

上一篇：最好用的內外網測速工具, speedtest 服務器搭建指南
下一篇：把 Word文檔轉為移動端友好的 HTML5格式文檔從未如此輕松

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

css篇二 css選擇器

優先級概念解析

選擇器類型解析

局部作用域

經典案例

題外話

總的來說

您的項目需求