css篇二 css選擇器

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

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

在開始之前，我們先創(chuàng)建一個(gè)index2.html文件，用來學(xué)習(xí)下面的效果使用：

內(nèi)容如下：

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

css選擇器分類：

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

一、基本選擇器

1.通用選擇器

*{
     border:1px solid red;
 }

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

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

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

頁面效果如下圖：

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

2.元素選擇器

p{
    color:red;
}

直接使用標(biāo)簽名稱作為選擇器就稱為元素選擇器。

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

頁面效果如下圖：

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

3.ID選擇器

在html篇，我們講過元素的屬性，id是元素的通用屬性，每個(gè)標(biāo)簽都可以加上id屬性。例如我們可以給p標(biāo)簽加上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標(biāo)簽的id="abc"，那在寫css樣式的時(shí)候，就要寫成#abc。

頁面效果如下圖：

當(dāng)然你也可以給b標(biāo)簽加一個(gè)id屬性，然后用css的id選擇器將b標(biāo)簽的文字變?yōu)樗{(lán)色。

這里要注意一點(diǎn)：在一個(gè)頁面中id的名字不可以重復(fù)，我們p標(biāo)簽的id為abc，那么b標(biāo)簽的id就不能為abc了。

4.類選擇器

和id一樣，class也是一個(gè)元素的通用屬性，我們可以給span加一個(gè)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標(biāo)簽里面的文字變成紅色，css的選擇器就應(yīng)該寫成 .test。class和id不同，class可以重名，我們這里span標(biāo)簽和b標(biāo)簽的class都是test。所以

.test{
    color:red;
 }

會(huì)同時(shí)作用span和b標(biāo)簽。

頁面效果如下圖：

span和b標(biāo)簽里面的文字都變紅了。

5.屬性選擇器

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

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

頁面效果如下：

屬性選擇器還以進(jìn)一步過濾，比如我們有好多的a標(biāo)簽：

<!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">網(wǎng)易</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">網(wǎng)易</a>
  <a href="https://www.php.net">php</a>
</html>

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

<!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">網(wǎng)易</a>
  <a href="https://www.php.net">php</a>
</html>

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

<!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">網(wǎng)易</a>
  <a href="https://www.php.net">php</a>
</html>

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

二、復(fù)合選擇器

1.分組選擇器

將多個(gè)選擇器通過逗號(hào)分隔，同時(shí)設(shè)置一組樣式。當(dāng)然，不但可以分組元素選擇器，還可以使用ID選擇器、類選擇器、屬性選擇器混合使用。

比如我們可以同時(shí)選中p、b、span標(biāo)簽將它們的文字變?yōu)榧t色：

<!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元素內(nèi)部的所有b元素，不在乎b的層次深度。當(dāng)然，后代選擇器也可以混合使用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.子選擇器

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

<!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.相鄰兄弟選擇器
相鄰兄弟選擇器匹配和第一個(gè)元素相鄰的第二個(gè)元素。

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

頁面效果圖如下：

5.普通兄弟選擇器

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

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

頁面效果圖如下：

三、偽元素選擇器

1.::first-line 塊級(jí)首行

塊級(jí)元素比如<p>、<div>等的首行文本被選定。如果想限定某種元素，可以加上前置P::first-line。什么是塊級(jí)元素我們?cè)趆tml篇中講過，塊級(jí)元素就是獨(dú)占一行的元素。

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

頁面效果如下圖：

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

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

2.::塊級(jí)首字母
塊級(jí)元素的首行字母，上面的是首行，現(xiàn)在這個(gè)是首行的字母。

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

頁面效果如下圖：

3.::before 文本前插入

在文本前面插入內(nèi)容。

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

頁面效果如下圖：

4.::文本后插入

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

今天的內(nèi)容就這么多，一定記得多加練習(xí)。光看不練是永遠(yuǎn)都學(xué)不會(huì)的。

如果喜歡我的內(nèi)容記得關(guān)注我，我的宗旨是用最通俗易懂的語言，讓所有人都學(xué)會(huì)電腦編程。大家一起加油！

準(zhǔn)命中

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

簡直笑哭

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

生無可戀

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

優(yōu)先級(jí)概念解析

一共大致分為五個(gè)等級(jí)：

內(nèi)聯(lián)樣式：權(quán)重為(1,0,0,0)
id選擇器：權(quán)重為(0,1,0,0)。
類、偽類、屬性選擇器：權(quán)重為(0,0,1,0)。
標(biāo)簽、偽元素選擇器：權(quán)重為(0,0,0,1)。
通用、子、相鄰選擇器：權(quán)重為(0,0,0,0)。

還有三個(gè)特殊的規(guī)則：!important、繼承和默認(rèn)代理樣式。其中!important權(quán)重為無窮大。

他們之間的默認(rèn)優(yōu)先級(jí)順序?yàn)椋?important > 行內(nèi)樣式 > id選擇器 > 類選擇器 > 標(biāo)簽選擇器 > 通用選擇器 > 繼承 > 代理(瀏覽器)默認(rèn)屬性。

樣式生效的規(guī)則符合以下幾點(diǎn)：

兩個(gè)選擇器權(quán)重不同時(shí)，權(quán)重搞得優(yōu)先生效。
兩個(gè)選擇器權(quán)重相同時(shí)，后定義的優(yōu)先生效(即層疊樣式表的特性，后面定義的會(huì)覆蓋前面定義的)。
被!important修飾的屬性，會(huì)無條件的優(yōu)先生效。

這里面還有幾個(gè)需要注意的點(diǎn)：

所有權(quán)重中的0和1代表的是標(biāo)識(shí)位，如內(nèi)聯(lián)樣式的(1,0,0,0)代表第一等級(jí)標(biāo)識(shí)位為1，并不是代表內(nèi)聯(lián)樣式權(quán)重為1000，同樣id選擇器(0,1,0,0)代表第二個(gè)標(biāo)識(shí)位為1，并不代表內(nèi)聯(lián)權(quán)重為100。也就是說#container {color: red}具有第二級(jí)權(quán)重。
同一權(quán)重等級(jí)下的選擇器才可以累加，低等級(jí)權(quán)重的選擇器永遠(yuǎn)不會(huì)超過高等級(jí)的選擇器，如#a.b.c的優(yōu)先級(jí)比#a.d的優(yōu)先級(jí)要高，因?yàn)樗鼈冸m然都擁有第二等級(jí)權(quán)重，但是#a.b.c比#a.b多了一個(gè)第三等級(jí)的權(quán)重，而#a的優(yōu)先級(jí)永遠(yuǎn)比.b.c(可以有任意多個(gè)低于第二等級(jí)權(quán)重的選擇器)高，因?yàn)樵谶M(jìn)行權(quán)重比較的時(shí)候，是從高到低逐級(jí)比較的，#a選擇器為第二等級(jí)，那么.b.c沒有第二等級(jí)權(quán)重，即使有再多的第三級(jí)權(quán)重都沒用。
!important選擇器雖然權(quán)重為無窮大，但是與數(shù)學(xué)中無窮大的比較不同，兩個(gè)!important權(quán)重是可以進(jìn)行比較的，兩個(gè)同時(shí)擁有!important屬性的選擇器，也符合上面的比較規(guī)則，如#a中的!important要比.b中的!important優(yōu)先級(jí)高。

權(quán)重逐級(jí)比較公式：(第一等級(jí)權(quán)重*該選擇器個(gè)數(shù),第二等級(jí)權(quán)重*該選擇器個(gè)數(shù),第三等級(jí)權(quán)重*該選擇器個(gè)數(shù),第四等級(jí)權(quán)重*該選擇器個(gè)數(shù),第五等級(jí)權(quán)重*該選擇器個(gè)數(shù))。

會(huì)逐個(gè)標(biāo)識(shí)位進(jìn)行比較，并不是進(jìn)行簡單的加法運(yùn)算。

是的沒錯(cuò)

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

選擇器類型解析

假設(shè)你已經(jīng)對(duì)各種類型的選擇器有所了解，知道了什么是類選擇器、什么是內(nèi)聯(lián)樣式、什么是標(biāo)簽選擇器等。

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

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

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

<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應(yīng)用樣式。

<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應(yīng)用樣式。不用緊跟。

<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應(yīng)用樣式，但是li必須是屬于其父元素的第一個(gè)子元素。li:last-child與其類似，但是li必須是屬于其父元素的最后一個(gè)子元素，不再給出示例。

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

選擇屬于第一個(gè)子元素的

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

<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必須是作為第一個(gè)子元素，而first-of-type是作為同一種類型中的第一個(gè)，他們都可修飾多個(gè)選擇器，如.a.b:first-child。last-child和last-of-type同理。)

⑦ .b:not(li)：表示給b應(yīng)用樣式，但是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應(yīng)用樣式，但是li必須是屬于其父元素的第order個(gè)子元素。li:nth-last-child(order)與其類似，但是li必須是屬于其父元素的倒數(shù)第order個(gè)子元素，不再給出示例。

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

可以指定為第幾個(gè)元素應(yīng)用樣式

這里還有一個(gè)小技巧，比如我想要選擇前五個(gè)li，能做到嗎？當(dāng)然可以。請(qǐng)看代碼。

<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>

選擇前五個(gè)元素

這是因?yàn)槌丝梢灾付╫rder之外，還可以指定一個(gè)迭代序列n(從0開始)，ul有8個(gè)li子元素，所以n可以取0,1,2,3,4,5,6,7，所以-n + 5可取出5,4,3,2,1,0,-1,-2，舍去負(fù)數(shù)，那么就是選中了1,2,3,4,5也就是前五個(gè)元素，注意這里只能寫成-n + 5的形式，而不能寫成5 - n的形式。

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

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

第五個(gè)及之后的元素

n+一個(gè)數(shù)字，表示這個(gè)數(shù)字以及之后的元素應(yīng)用樣式，-n+一個(gè)數(shù)字，表示這個(gè)數(shù)字以及之前的元素應(yīng)用樣式。

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

只選擇2的倍數(shù)

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

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

2的倍數(shù)加1

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

<style>
  /* 按照同類型查找，不會(huì)受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>

按照類型來查找

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

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

<style>
  /* 注意：type指的是標(biāo)簽名要唯一才會(huì)生效 */
  .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也會(huì)變顏色 -->
  <div class="a">4</div>
</div>

對(duì)唯一的類型應(yīng)用樣式

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

good job!

局部作用域

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

很好

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

這是因?yàn)槊恳粋€(gè)組件都是獨(dú)立樣式作用域，它用一個(gè)唯一標(biāo)識(shí)來區(qū)分，在父組件中寫的樣式，會(huì)自動(dòng)在選擇器的最后面加上這個(gè)唯一標(biāo)識(shí)，而子組件中有自己的另一個(gè)唯一標(biāo)識(shí)，所以會(huì)選擇不到該元素。

這可怎么辦？

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

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

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

經(jīng)典案例

我們以下面這段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>

區(qū)間選擇：我們可以指定一個(gè)區(qū)間來選擇指定的元素。

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

區(qū)間選擇1

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

區(qū)間選擇2

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

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

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

默認(rèn)狀態(tài)

鼠標(biāo)懸浮

題外話

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

我們?cè)谛薷脑貥邮降臅r(shí)候，盡量先預(yù)設(shè)好選擇器的樣式，然后通過動(dòng)態(tài)增加或移除相應(yīng)的類名來達(dá)到效果，而不是直接設(shè)置style。
應(yīng)該盡量避免使用id選擇器，最好都通過標(biāo)簽、類名、屬性選擇器來操作樣式。因?yàn)閕d選擇器權(quán)重大，有時(shí)候覆蓋起來不方便。而且id只能存在一個(gè)。再有一個(gè)就是id選擇器會(huì)比類選擇器給瀏覽器帶來更大的負(fù)擔(dān)。
盡量少使用!important，多通過上面講述的權(quán)重規(guī)則來設(shè)定相應(yīng)的樣式。
盡量少用通用選擇器，即通配符*，也會(huì)給瀏覽器增加負(fù)擔(dān)。

CSS很厲害

總的來說

CSS選擇器在我們實(shí)際開發(fā)工作當(dāng)中不但是不可缺少的一部分，而且?guī)缀鯐r(shí)時(shí)刻刻都要與之打交道，熟練掌握他們的用法和原理，能夠使我們?cè)诓僮髟貥邮降臅r(shí)候得心應(yīng)手，今天內(nèi)容你學(xué)會(huì)了嗎？[比心]

感謝閱讀!

tml和css的使用方法以及樣式，很好的基礎(chǔ)知識(shí)系列，內(nèi)容都是干貨知識(shí)點(diǎn)，適合收藏下來！

布局步驟

第一步：清除默認(rèn)樣式

第二步：劃分模塊

第三步：設(shè)置模塊的大小以及位置

第四步：劃分下一級(jí)模塊

html和css

引入網(wǎng)頁頭像

css樣式表的引入方式

1、外鏈?zhǔn)?/p>

2、嵌入式

3、行內(nèi)樣式

@import url('')

文件命名以及變量命名

命名規(guī)范

1、嚴(yán)格區(qū)分大小寫

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

3、命名語義化

4、可以采用駝峰命名法

清除默認(rèn)樣式

清楚邊距

margin: 0;

padding: 0;

list-style: none;

}

a標(biāo)簽清楚下劃線和顏色

color: black;

text-decoration: none;

}

css中顏色的表示方式

css中顏色的表示方式：

1.預(yù)定義的顏色【關(guān)鍵字顏色】 red pink blue yellow

2.#6位數(shù)的色值 #00-00-00 紅綠藍(lán)

3.rgb（紅，綠，藍(lán)）：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中的標(biāo)簽和屬性

html：

標(biāo)簽：

按照語法分類：

1.單標(biāo)簽：只有開始標(biāo)簽

meta img a

2.雙標(biāo)簽：有開始標(biāo)簽和結(jié)束標(biāo)簽

3.屬性的語法

語法：

屬性名 = "屬性值"

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

注意:

1、標(biāo)簽名和屬性名之間要有空格

2、多個(gè)屬性之間要有空格

3、多個(gè)屬性值之間要有空格

4.開始標(biāo)簽標(biāo)簽名后有空格

按照標(biāo)簽在頁面中的呈現(xiàn)效果分類：

1、行內(nèi)元素

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

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

2、塊元素

塊元素定義：可以設(shè)置寬高，獨(dú)占一行。

舉例：div 標(biāo)題標(biāo)簽列表標(biāo)簽段落標(biāo)簽 ...

3、行內(nèi)塊元素

行內(nèi)塊元素定義：可以設(shè)置寬高，在一行顯示。

舉例：img 【title="鼠標(biāo)移入時(shí)顯示的文字" 】表單控件

元素的轉(zhuǎn)換

塊元素： display:block;

行內(nèi)塊元素：display:inline-block;

行內(nèi)元素： display:inline;

元素的級(jí)別

塊元素 > 行內(nèi)塊元素 > 行內(nèi)元素

元素嵌套規(guī)范

1、同一級(jí)別可以相互嵌套

2、級(jí)別高的元素可以嵌套級(jí)別低的元素

3、段落標(biāo)簽只能嵌套行內(nèi)元素

4、a標(biāo)簽不可以嵌套a標(biāo)簽；p不能嵌套p

盒子模型及其問題

四部構(gòu)成：

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

2、border 邊框

3、padding 內(nèi)填充（內(nèi)間距）邊框與內(nèi)容之間的距離。

4、content 內(nèi)容

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

margin: 50px; 上右下左

margin: 50px 100px; 上下左右

margin:0 auto; auto自動(dòng)

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:設(shè)置方法同margin

content: ;

width : 數(shù)值百分比 auto

height: 數(shù)值百分比 auto

盒子模型的問題：

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

2.想領(lǐng)的兩個(gè)塊元素的margin會(huì)重合，值會(huì)取最大值

3.margin可以為[負(fù)數(shù)] ，padding不可以設(shè)置[負(fù)數(shù)]。

4.行內(nèi)元素margin只有左右，沒有上下

5.如果（1）發(fā)生嵌套關(guān)系的元素，（2）父元素沒有上邊框，（3）上padding ，（4）父元素與子元素之間沒有別的內(nèi)容，此時(shí)子元素margin-top就會(huì)作用到父元素身上

margin-top的解決方式：

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

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

寬高的設(shè)置和計(jì)算

height：auto / 百分比 / px；

width：auto / 百分比 / px；

height：auto；參照與父元素

width：auto；參照與內(nèi)容

box-sizing：border-box；將邊框算入盒子內(nèi)；

一個(gè)元素實(shí)際的寬高

實(shí)際寬度 = border-left + padding-left + width +paddint-right + border-right;

實(shí)際高度 = border-top + padding-top + height + padding-bottom + border-bottom;

浮動(dòng)

作用：讓塊元素橫排排列

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

float：right；從右往左排列

原理：讓元素脫離文檔流，讓元素從文檔層浮動(dòng)到浮動(dòng)層。

引發(fā)的問題：父元素不設(shè)置高度，子元素都浮動(dòng)，浮動(dòng)的子元素?fù)尾婚_父元素。（浮動(dòng)的元素脫離文檔流）

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

*解決方式二：在父元素內(nèi)容最后添加擁有清除浮動(dòng)屬性的元素。

clear：right/left/both ；別的浮動(dòng)對(duì)它的影響清除掉

例：

.box：after{

content: "";

display:block;

width: 0;

height: 0;

clear:both;

}

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

浮動(dòng)之后的塊元素參照內(nèi)容：屬性值 auto

定位

定位的元素脫離文檔層，到達(dá)定位層

定位的元素會(huì)多出5個(gè)樣式：

top right bottom left z-index：999

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

層級(jí)：

z-index：整數(shù)；

定位的幾種方式：

1.相對(duì)定位：

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

用法：

position：relative；

2.絕對(duì)定位：

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

用法：

position：absolute；

+方向值

3.固定定位：

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

用法：

position：fixed；

top與bottom同時(shí)定義，那個(gè)樣式會(huì)作用到元素身上的判斷關(guān)系：

top的權(quán)重比bottom的權(quán)重大

left的權(quán)重比right的權(quán)重大

元素作用時(shí)：

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.絕對(duì)居中：

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); 向上為負(fù)，向下為正

transform:translateX(100px);

transform：rotate（180deg）；（1turn）轉(zhuǎn)一圈

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

旋轉(zhuǎn) transform:rotate（）例子rotate（180deg）順時(shí)針 -180deg 逆時(shí)針

transform：rotate（）空格translate（）；

transform-origin:px px;變換的中心點(diǎn)；

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；

全部時(shí)間

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

可以為：屬性的全部樣式

4.過度的總時(shí)間： transition-duration：；

5.過渡的時(shí)間函數(shù)： transition-timing-function：；

linear（勻速） ease（開頭結(jié)尾慢，中間快）

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

6.延遲 transition-delay：；

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

prespective：給父元素加prespective（滅點(diǎn)的值）

prespective-origin：x y；滅點(diǎn)的位置調(diào)整觀察的角度（大多數(shù)情況不設(shè)置）

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

transform：ratateY（45deg）

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

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

動(dòng)畫

動(dòng)畫規(guī)則：

@keyframes 動(dòng)畫名（隨便給）{

（動(dòng)畫規(guī)則）

from{}

to{}

}

@keyframes 動(dòng)畫名（隨便給）{

（動(dòng)畫規(guī)則）

0%{}

50%{}

100%{}

}

@keyframes animation1{

from{

background-color:red;

}

to{

background-color:blue;

}

掛載動(dòng)畫:將動(dòng)畫加到元素身上

.元素{

animation：animation1 時(shí)間步數(shù) 時(shí)間函數(shù) 延遲時(shí)間次數(shù) ；

}

掛載多個(gè)動(dòng)畫：

.元素{

animation：animation1 時(shí)間,animation2 時(shí)間,animation1 時(shí)間；

其他動(dòng)畫的相同的可以附件通過animation屬性；

}

animation的樣式

動(dòng)畫名：animation-name

時(shí)間： animation-duration

步數(shù)：animation-steps：8；

時(shí)間函數(shù)：animation-timing-function

延遲： animation-delay

動(dòng)畫次數(shù)： animation-iteration-count：infinite（無限次）/2；

指定下一次動(dòng)畫是否逆向：animation-direction：alternate（逆向）/ normal（常規(guī)）；

最后的狀態(tài)：animation-fill-mode：backwards（默認(rèn)（保持一開始的狀態(tài)））/forwards（保持當(dāng)前的狀態(tài)）；

狀態(tài)即指定動(dòng)畫是否運(yùn)動(dòng)： animation-play-state: running（運(yùn)行）/paused（靜止）;

元素分類

按照在頁面中的呈現(xiàn)效果：

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

span a b i strong del

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

img 表單控件

3.塊元素：可以設(shè)置寬高，獨(dú)占一行

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

元素嵌套規(guī)范：

1.同一級(jí)別可以相互嵌套

2.級(jí)別高的可以嵌套級(jí)別低的元素

3.p標(biāo)簽只能嵌套行內(nèi)元素

4.a鏈接不能相互嵌套

元素的轉(zhuǎn)換：

1.塊元素：display：block；

2.行內(nèi)塊元素：display：inline-block；

3.行內(nèi)元素：display：inline；

背景圖片以及瀏覽器內(nèi)核

背景圖

先設(shè)大小，在引background；

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

//圖片位置禁止重復(fù) 位置（top bottom left right）

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

4. background-repeat：no-repeat，repeat；（無重復(fù)）

5. background-repeat：repeat-x（x方向重復(fù)）

background-repeat：repeat-y（y方向重復(fù)）

背景圖的位置：

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

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

8. padding-box；（默認(rèn)）從padding位置開始渲染

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

content-box；從內(nèi)容的位置開始渲染

圖片結(jié)束渲染的位置：background-clip: ;

11. padding-box；（默認(rèn)）從padding位置結(jié)束渲染

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

content-box；從內(nèi)容的位置結(jié)束渲染

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

8.可以簡寫：

background：空格隔開；

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

//漸變開始的方向（默認(rèn)top）類似25deg（25度）

10.瀏覽器內(nèi)核//背景色漸變

1. /* 標(biāo)準(zhǔn)語法 */

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

2. /* 谷歌內(nèi)核 -webkit- */

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

3. /* 火狐內(nèi)核 -moz- */

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

4. /* 歐鵬內(nèi)核 -o- */

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

5. /* IE內(nèi)核 -ms- */

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

文件的讀取方法路徑

絕對(duì)路徑：從盤符開始的一條完整路徑

相對(duì)路徑：兩個(gè)文件的位置關(guān)系

邊框的相關(guān)屬性【圓角，邊框形狀】

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

border-style:dotted solid double dashed;

上邊框是點(diǎn)狀

右邊框是實(shí)線

下邊框是雙線

左邊框是虛線

透明度

透明性的選擇：（整個(gè)容器都變）

opacity：；0-1之間的值；

字體

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

鼠標(biāo)移入樣式

span標(biāo)簽

cursor：pointer；鼠標(biāo)樣式：手型

陰影

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

引入字符圖標(biāo)

引入字符圖標(biāo)：

行內(nèi)元素隨意

span class=“iconfont 圖標(biāo)類名”

可調(diào)節(jié)樣式：同文字

文檔流

文檔流：

標(biāo)準(zhǔn)情況下，頁面元素從左往右從上往下依次排列

flex布局(規(guī)范的設(shè)計(jì)稿)-彈性布局

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

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

row 主軸在水平方向，從左向右（默認(rèn)）。

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

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

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

*flex-wrap: 決定項(xiàng)目換行

wrap: 項(xiàng)目換行

nowrap: 項(xiàng)目不換行（默認(rèn)值）

wrap-reverse：項(xiàng)目換行且反轉(zhuǎn)

*justify-content: 決定項(xiàng)目在主軸的對(duì)齊方式

flex-start;主軸的起點(diǎn)

flex-end;主軸的終點(diǎn)

center;主軸的中心

space-between;兩端對(duì)齊

space-around;項(xiàng)目兩側(cè)距離相等

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

flex-start:交叉軸的起點(diǎn)

flex-end：交叉軸的終點(diǎn)

Center：交叉軸的中心

baseline：基線對(duì)齊（文本底部）

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

flex-start;交叉軸的起點(diǎn)

flex-end;交叉軸的終點(diǎn)

center;交叉軸的中心

space-between;兩端對(duì)齊

space-around;兩側(cè)距離相等

子元素（項(xiàng)目）的屬性：

*order：定義項(xiàng)目的排列順序，數(shù)值越小，越靠前，默認(rèn)值為0（可以取負(fù)值）。

*flex-grow:定義項(xiàng)目的放大比例。默認(rèn)值為0，即使存在剩余空間，也不放大。

*flex-shrik：定義項(xiàng)目的縮小比例，默認(rèn)值為1，空間不足，項(xiàng)目縮小;值為0時(shí),空間不足,項(xiàng)目也不縮小.

*flex-basis: 定義項(xiàng)目占據(jù)的主軸空間.默認(rèn)auto或者自己添加像素;

*align-self:定義單個(gè)項(xiàng)目在交叉軸的對(duì)齊方式.

flex-start:交叉軸的起點(diǎn)

flex-end：交叉軸的終點(diǎn)

Center：交叉軸的中心

滾動(dòng)條

overflow-x：auto；超出部分在x軸的表現(xiàn)形式。

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

去滾動(dòng)條：加在具有overflow屬性的元素身上

::-webkit-scrollbar{

height：0；

}

值描述測(cè)試

visible 不裁剪內(nèi)容，可能會(huì)顯示在內(nèi)容框之外。測(cè)試

hidden 裁剪內(nèi)容 - 不提供滾動(dòng)機(jī)制。測(cè)試

scroll 裁剪內(nèi)容 - 提供滾動(dòng)機(jī)制。測(cè)試

auto 如果溢出框，則應(yīng)該提供滾動(dòng)機(jī)制。測(cè)試

no-display 如果內(nèi)容不適合內(nèi)容框，則刪除整個(gè)框。測(cè)試

no-content 如果內(nèi)容不適合內(nèi)容框，則隱藏整個(gè)內(nèi)容。測(cè)試

輪播圖

swiper(.js).com

表格

[行] [列]

table身上的屬性

table身上的屬性：

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

cellpadding：單元格的內(nèi)容與其邊框的內(nèi)邊距

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

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

border-collaspe：collaspe：邊框合并，不疊加 cellspacing：0：邊框合并，但合并之后的邊框?qū)挾鹊扔?前兩個(gè)邊框?qū)挾戎?/p>

caption：表格標(biāo)題

background:表格背景圖

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

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

表格的標(biāo)題

單元格【tr】【td】

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

align：單元格內(nèi)文本的對(duì)齊方式,通常是左，中，右 left，center，right

valign：單元格內(nèi)文本的對(duì)齊方式,通常是上，中，下 top，middle，bottom

nowrap：在為設(shè)置單元格寬度時(shí)，當(dāng)文本長度寬于單元格寬度，將要換行時(shí)，該標(biāo)簽會(huì)使其不換行

</tr>

表格的跨行與跨列【td】

rowspan：跨行標(biāo)簽，表示跨了多少行

colspan：跨列標(biāo)簽，表示跨了多少列

表格標(biāo)簽拓展及其屬性

thead：定義表格的表頭。

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

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

colgroup：標(biāo)簽用于對(duì)表格中的列進(jìn)行組合，以便對(duì)其進(jìn)行格式化。

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

1、<thead> 內(nèi)部必須擁有 <tr> 標(biāo)簽！

2、<tfoot> 元素內(nèi)部必須包含一個(gè)或者多個(gè) <tr> 標(biāo)簽。

3、<tbody> 元素內(nèi)部必須包含一個(gè)或者多個(gè) <tr> 標(biāo)簽。

4、必須在 table 元素內(nèi)部使用這些標(biāo)簽。

5、當(dāng)不同行間的單元格合并時(shí)各單元格所在的行不要加tbody標(biāo)簽。

標(biāo)題欄

《tr》<th></th>《/tr》用法和td相似知識(shí)自動(dòng)將單元格內(nèi)容以粗體顯示

表單控件表單標(biāo)簽

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

method：提交的方式

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

post：信息量多，比較安全

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

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

placeholder：默認(rèn)提示文本;

maxlength:規(guī)定輸入的最大字符數(shù)

name:本文本框的名字，與后臺(tái)進(jìn)行數(shù)據(jù)交互用

class:定義本文本框的樣式，相當(dāng)于盒子

placeholder下的縮進(jìn)

text-indent：2em；縮進(jìn)

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

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

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

請(qǐng)選擇你的性別：

<label for="man"> [label實(shí)現(xiàn)點(diǎn)什么就選中，for中的值和id中的值相同]

男：<input type="radio" name="sex" id="man" checked> //checked默認(rèn)選項(xiàng)

</label>

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

</label>

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

請(qǐng)選擇你喜歡的音樂：

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

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

選擇你的學(xué)歷：

</select>

6.上傳文件：

選擇你的照片：

7.留言文本空間：

</textarea>

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

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

9.重置按鈕：

10.提交按鈕：

11.自定義按鈕：

12.顏色：

13.時(shí)間日期：

年月：<input type="month">

年周：<input type="week">

時(shí)分：<input type="time">

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

年月時(shí)分：<input type="datetime-local">

14.驗(yàn)證

<input type="email"> 郵箱驗(yàn)證

<input type="tel" autofocus> 電話

15. autofocus 自動(dòng)獲取焦點(diǎn)

</form>

文本模型

文本換行

使非中日韓文本換行

word-break: break-all ;

文本禁止換行

white-space:nowrap;

單行文本溢出部分以省略號(hào)顯示

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

text-overflow: ellipsis;

多行文本溢出

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

音頻視頻標(biāo)簽

音頻標(biāo)簽

controls 空間向用戶顯示：

loop 循環(huán)播放

autoplay當(dāng)前頁面加載完自動(dòng)播放

視頻標(biāo)簽

H5語義化標(biāo)簽

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

meta標(biāo)記【簽】

name="關(guān)鍵字" cantent="內(nèi)容"

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

bgsound標(biāo)簽

body屬性

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

對(duì)文字操作的標(biāo)簽

<p></p>開始一個(gè)新段落，可單可雙
換行標(biāo)簽，單獨(dú)標(biāo)記
<pre></pre>預(yù)格式化【敲什么樣式，顯示什么樣式】
<font></font> 用來設(shè)置文字的字體大小顏色粗細(xì)等
文字樣式標(biāo)記[均成對(duì)出現(xiàn)]
b 粗體 i 斜體 u 下劃線 tt 等寬
sup 上標(biāo)體 sub 下表體 strike 刪除線 big 大號(hào)字樣
small 小號(hào)字樣 blink 閃爍字樣 em強(qiáng)調(diào)字樣 strong著重字樣 cite引用字樣

列表標(biāo)簽

符號(hào)列表
<ul type="circlr(空心圓點(diǎn))/disc（實(shí)心圓點(diǎn)）【默認(rèn)】/square（實(shí)心方塊）">

2. <li>

<li>

</ul>

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

4. <li>

<li>

</ol>

a標(biāo)簽

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

[字符實(shí)體]常用的轉(zhuǎn)義字符

顯示結(jié)果描述實(shí)體名稱

空格

< 小于號(hào)

大于號(hào)

& 和號(hào)

" 引號(hào)

' 撇號(hào) (IE不支持)

￠分（cent）

￡鎊（pound）

￥元（yen）

€ 歐元（euro）

§ 小節(jié)

? 版權(quán)（copyright）

? 注冊(cè)商標(biāo)

? 商標(biāo)

× 乘號(hào)

÷ 除號(hào)

選擇器

分類

css選擇器

1.通用選擇器：

*｛｝//選擇所有的標(biāo)簽

2.群組選擇器：

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

3.標(biāo)簽選擇器

標(biāo)簽名｛｝

4.類名選擇器：

.類名｛｝

5.后代選擇器

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

6.交叉選擇器

標(biāo)簽名.類名｛｝

7.id選擇器

例如創(chuàng)建id

#id名｛｝ //選擇頁面中id為**的標(biāo)簽

8.偽類選擇器：

鼠標(biāo)移入狀態(tài)

E：hover{ } E元素選擇鼠標(biāo)移入狀態(tài)

E：hover .子類{ } 選擇e元素下鼠標(biāo)移入時(shí)子類的變化

獲取焦點(diǎn)，用于表單的輸入

E: focus{

outline: none;

}

9.偽結(jié)構(gòu)選擇器：

E：first-child｛｝作為子元素的第一個(gè)孩子的E標(biāo)簽

E：last-child｛｝作為子元素的最后第一個(gè)孩子的E標(biāo)簽

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

E: nth-last-child(n) 作為子元素的倒數(shù)第n個(gè)孩子的E標(biāo)簽

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

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

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

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

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

例子：5.15/偽結(jié)構(gòu)選擇器

10.偽元素選擇器：

::after{} 在元素之后加入一個(gè)

::before{

content：“內(nèi)容之前”；

color：；

} 在元素之前

屬于行內(nèi)元素

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

11.子類選擇器

相鄰兄弟選擇器

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

div.box>a+img a和img統(tǒng)計(jì)

子類選擇器

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

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

div.box>a>img

12.屬性選擇器

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

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

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

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

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

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

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

例子：屬性選擇器

選擇器的優(yōu)先級(jí)

宗旨：越具體的優(yōu)先級(jí)越高

id (100 ) > class( 10 )> 標(biāo)簽名( 1)

.box .son{ } 10+10=20

abcde優(yōu)先級(jí)（e為個(gè)位）：

a:行內(nèi)樣式

b:id選擇器

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

d:標(biāo)簽選擇器偽元素選擇器（：：after）

e:通用選擇器有一個(gè)

選擇有中有一個(gè)abcde在其位置+1

移動(dòng)端布局步驟

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

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

em:當(dāng)前字體的倍率 100px=10em

rem：html字體的倍率

移動(dòng)端窗口 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中設(shè)計(jì)稿的寬度
100px=1rem

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

在線咨詢

上一篇：最好用的內(nèi)外網(wǎng)測(cè)速工具, speedtest 服務(wù)器搭建指南
下一篇：把 Word文檔轉(zhuǎn)為移動(dòng)端友好的 HTML5格式文檔從未如此輕松

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

css篇二 css選擇器

優(yōu)先級(jí)概念解析

選擇器類型解析

局部作用域

經(jīng)典案例

題外話

總的來說

您的項(xiàng)目需求