CSS樣式第一天-基本選擇器

們之前講了網頁的HTML代碼，今天我們來講一下CSS樣式,css樣式和HTML的關系就像人的的骨頭和肉，HTML是網頁的骨架，CSS則是網頁的肉。我看過一個視頻，說只有HTML的網頁就像一個沒有化妝的女生，而加了CSS樣式的網頁就像一個化了妝的女神，確實，通過CSS樣式，我們的網頁可以變得非常美麗。那么CSS樣式到底是怎么樣的呢，我們今天來開始學習一下。

1.引入CSS：

1）我們之前用到過的行間樣式

例：<div style=" ">.

2)頁面級CSS：

<head>

</style>

</head>

這個 type="text\css"的意思是告訴瀏覽器，我這里面是CSS，可寫可不寫。

3）外部CSS文件

打開一個文件以文件名.css 命名保存，拓展名一定要是.css。并且要在頭標簽；里面寫：

<head>

2.簡單選擇器：

1）id選擇器

特點：一個元素只能有一個id值，一個id值只能對應一個元素，二者是一一對應的，語法格式是#（加上id后面的值是什么就填什么），這個在我之前的視頻里也有提到。

我們來看一個代碼案例：

<div id="abc">把我選出去</div>

在css中寫：
#abc{background-color:red;}

2)class選擇器

特點：一個class可以對應多個元素。語法格式是：.class就可以找到class選擇器了

案例：

<div class="abc">把我選出去</div>

<div class="abc">因為是class所以我們倆可以都選<div>

在css中寫：
.abc{background-color:red;}

3）標簽選擇器

語法格式：標簽名{}。

如果想選擇<div>就直接寫div{},如果想選擇<p>就直接寫p{}不管被嵌套多少層都會被選擇出來，而且是選擇全部

例：<span> 123</span>

在css中寫：

div{

color:red;

}

span{

color:green;

}

4）通配符選擇器

*是全部的意思，所以*{}會把所有的標簽都選擇出來，包括html和body標簽。

好了，以上就是我們最基本的標簽選擇器了，今天的內容也就到這里了，歡迎大家評論與關注呦！

SS3 選擇器——基本選擇器

1、通配符（*）

通配符

<ul class="demo">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
</ul>
.demo * {border:1px solid blue;}

2、元素選擇器（Element）

元素選擇器

<ul class="demo">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
</ul>

li { background-color: grey; color: orange; }

元素選擇器，是css選擇器中最常見而且最基本的選擇器。元素選擇器其實就是文檔的元素，如html,body,p,div等等，比如這個demo：中元素包括了div,ul,li等。

3、類選擇器（.className）

類選擇器

<ul class="demo">
    <li>1</li>
    <li class="li-2">2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

.li-2 {font-weight: bold; color: yellow;}

上面代碼表示是給有 "li-2" 類名的元素加上一個“字體為粗體，顏色為黃色”的樣式。

4、id選擇器（#ID）

id選擇器

<ul class="demo">
    <li id="first">1</li>
    <li class="li-2">2</li>
    <li>3</li>
    <li>4</li>
    <li id="last">5</li>
</ul>

#first {background: lime;color: #000;}
#last {background: #000;color: lime;}
上面的代碼選擇了id為"first"和"last"的li。

5、后代選擇器（E F）

后代選擇器

<ul class="demo">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

ul li { background-color: red; color: #fff; }

元素的子元素或者是孫元素或者是更深層次的關系，都將被選中，換句話說，不論li在ul中有多少層關系，都將被選中。注意他們之間需要一個空格隔開

6、子元素選擇器(E>F)

子元素選擇器

<ul class="demo">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

ul > li {background: green;color: yellow;}

子元素選擇器只能選擇某元素的第一層子元素，其中ul為父元素，而li為子元素，其中ul>li所表示的是：選擇了ul元素下的所有第一層子元素li。簡單的說就是只選擇當前第一層級的子元素

7、相鄰兄弟元素選擇器(E + F)

相鄰兄弟元素選擇器

<ul class="demo">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

li + li {background: green;color: yellow; border: 1px solid #ccc;}

相鄰兄弟選擇器可以選擇緊接在另一個元素后面的元素。

上面的 li+li，其中第二個li是第一個li的相鄰元素，第三個又是第二個相鄰元素，因此第三個也被選擇，依此類推，所以后面4個li都被選中了。

8、通用兄弟選擇器（E ? F）

通用兄弟選擇器

<ul class="demo">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
</ul>

.active ~ li {background: green;color: yellow; border: 1px solid #ccc;}

選擇某元素后面的所有兄弟元素（選擇相鄰的所有兄弟元素），和相鄰選擇器類似（相鄰選擇器只選擇相鄰的一個元素）

選擇中了li.active 元素后面的所有兄弟元素li

9、群組選擇器

群組選擇器

<ul class="demo">
    <li  class="first">1</li>
    <li>2</li>
    <li  class="li-3">3</li>
    <li>4</li>
    <li class="last">5</li>
</ul>

.first,
.last,
.li-3 {background: green;color: yellow; border: 1px solid #ccc;}

群組選擇器是將具有相同樣式的元素分組在一起，每個選擇器之間使用逗號“，”隔開

li.first和li.last和.li-3具有相同的樣式效果，所以我們把他們寫到一個組里

CSS3 選擇器——屬性選擇器

1、E[attr]：只使用屬性名，但沒有確定任何屬性值

屬性名選擇器

       <ul class="demo">
            <a href="http://www.w3cplus.com" target="_blank" class="links item first" id="first" title="w3cplus">1</a>
            <a href="" class="links active item" title="test website" target="_blank" lang="zh">2</a>
            <a href="sites/file/test.html" class="links item" title="this is a link" lang="zh-cn">3</a>
            <a href="sites/file/test.png" class="links item" target="_balnk" lang="zh-tw">4</a>
            <a href="sites/file/image.jpg" class="links item" title="zh-cn">5</a>
            <a href="mailto:w3cplus@hotmail" class="links item" title="website link" lang="zh">6</a>
            <a href="" class="links item" title="open the website" lang="cn">7</a>
            <a href="" class="links item" title="close the website" lang="en-zh">8</a>
            <a href="" class="links item" title="http://www.sina.com">9</a>
            <a href="" class="links item last" id="last">10</a>
        </ul>

.demo a[id] { background: blue; color:yellow; font-weight:bold; }

選擇了div.demo下所有帶有id屬性的a元素，并在這個元素上使用背景色為藍色，字體加粗并為黃色的樣式，

2、E[attr="value"]選擇指定的屬性對象

選擇指定的屬性對象

        <ul class="demo">
            <a href="http://www.w3cplus.com" target="_blank" class="links item first" id="first" title="w3cplus">1</a>
            <a href="" class="links active item" title="test website" target="_blank" lang="zh">2</a>
            <a href="sites/file/test.html" class="links item" title="this is a link" lang="zh-cn">3</a>
            <a href="sites/file/test.png" class="links item" target="_balnk" lang="zh-tw">4</a>
            <a href="sites/file/image.jpg" class="links item" title="zh-cn">5</a>
            <a href="mailto:w3cplus@hotmail" class="links item" title="website link" lang="zh">6</a>
            <a href="" class="links item" title="open the website" lang="cn">7</a>
            <a href="" class="links item" title="close the website" lang="en-zh">8</a>
            <a href="" class="links item" title="http://www.sina.com">9</a>
            <a href="" class="links item last" id="last">10</a>
        </ul>

.demo a[id="first"] {background: blue; color:yellow; font-weight:bold; }

選擇了.demo a[id="first"] 選擇屬性id的值為first的對象。

3、E[attr~="value"] 包含屬性值

        <ul class="demo">
            <a href="http://www.w3cplus.com" target="_blank" class="links item first" id="first" title="w3cplus">1</a>
            <a href="" class="links active item" title="test website" target="_blank" lang="zh">2</a>
            <a href="sites/file/test.html" class="links item" title="this is a link" lang="zh-cn">3</a>
            <a href="sites/file/test.png" class="links item" target="_balnk" lang="zh-tw">4</a>
            <a href="sites/file/image.jpg" class="links item" title="zh-cn">5</a>
            <a href="mailto:w3cplus@hotmail" class="links item" title="website link" lang="zh">6</a>
            <a href="" class="links item" title="open the website" lang="cn">7</a>
            <a href="" class="links item" title="close the website" lang="en-zh">8</a>
            <a href="" class="links item" title="http://www.sina.com">9</a>
            <a href="" class="links item last" id="last">10</a>
        </ul>

.demo a[title~="website"]{ background:orange; color:green; }

div.demo下的a元素的title屬性中，只要其屬性值中含有"website"這個詞就會被選擇

4、E[attr^="value"] 選擇attr屬性值以“value”開頭的所有元素

        <ul class="demo">
            <a href="http://www.w3cplus.com" target="_blank" class="links item first" id="first" title="w3cplus">1</a>
            <a href="" class="links active item" title="test website" target="_blank" lang="zh">2</a>
            <a href="sites/file/test.html" class="links item" title="this is a link" lang="zh-cn">3</a>
            <a href="sites/file/test.png" class="links item" target="_balnk" lang="zh-tw">4</a>
            <a href="sites/file/image.jpg" class="links item" title="zh-cn">5</a>
            <a href="mailto:w3cplus@hotmail" class="links item" title="website link" lang="zh">6</a>
            <a href="" class="links item" title="open the website" lang="cn">7</a>
            <a href="" class="links item" title="close the website" lang="en-zh">8</a>
            <a href="" class="links item" title="http://www.sina.com">9</a>
            <a href="" class="links item last" id="last">10</a>
        </ul>

.demo a[href^="http://"]{ background:orange; color:green; }
.demo a[href^="mailto:"]{ background:green; color:orange; }
選擇了以href屬性并且以"http://"和"mailto:"開頭的所有a元素。

5、E[attr$="value"] 選擇attr屬性值以"value"結尾的所有元素


        <ul class="demo">
            <a href="http://www.w3cplus.com" target="_blank" class="links item first" id="first" title="w3cplus">1</a>
            <a href="" class="links active item" title="test website" target="_blank" lang="zh">2</a>
            <a href="sites/file/test.html" class="links item" title="this is a link" lang="zh-cn">3</a>
            <a href="sites/file/test.png" class="links item" target="_balnk" lang="zh-tw">4</a>
            <a href="sites/file/image.jpg" class="links item" title="zh-cn">5</a>
            <a href="mailto:w3cplus@hotmail" class="links item" title="website link" lang="zh">6</a>
            <a href="" class="links item" title="open the website" lang="cn">7</a>
            <a href="" class="links item" title="close the website" lang="en-zh">8</a>
            <a href="" class="links item" title="http://www.sina.com">9</a>
            <a href="" class="links item last" id="last">10</a>
        </ul>

.demo a[href$="png"]{ background:orange; color:green; }
選擇div.demo中元素有href屬性，并以png值結尾的a元素。

6、E[attr*="value"] 選擇attr屬性值中包含子串"value"的所有元素。

        <ul class="demo">
            <a href="http://www.w3cplus.com" target="_blank" class="links item first" id="first" title="w3cplus">1</a>
            <a href="" class="links active item" title="test website" target="_blank" lang="zh">2</a>
            <a href="sites/file/test.html" class="links item" title="this is a link" lang="zh-cn">3</a>
            <a href="sites/file/test.png" class="links item" target="_balnk" lang="zh-tw">4</a>
            <a href="sites/file/image.jpg" class="links item" title="zh-cn">5</a>
            <a href="mailto:w3cplus@hotmail" class="links item" title="website link" lang="zh">6</a>
            <a href="" class="links item" title="open the website" lang="cn">7</a>
            <a href="" class="links item" title="close the website" lang="en-zh">8</a>
            <a href="" class="links item" title="http://www.sina.com">9</a>
            <a href="" class="links item last" id="last">10</a>
        </ul>

.demo a[title*="site"]{ background:black; color:white; }
選擇了div.demo中a元素，而a元素的title屬性中只要有"site"就選中。

7、E[attr|="value"] 選擇attr屬性值等于value或以value-開頭的所有元素

        <ul class="demo">
            <a href="http://www.w3cplus.com" target="_blank" class="links item first" id="first" title="w3cplus">1</a>
            <a href="" class="links active item" title="test website" target="_blank" lang="zh">2</a>
            <a href="sites/file/test.html" class="links item" title="this is a link" lang="zh-cn">3</a>
            <a href="sites/file/test.png" class="links item" target="_balnk" lang="zh-tw">4</a>
            <a href="sites/file/image.jpg" class="links item" title="zh-cn">5</a>
            <a href="mailto:w3cplus@hotmail" class="links item" title="website link" lang="zh">6</a>
            <a href="" class="links item" title="open the website" lang="cn">7</a>
            <a href="" class="links item" title="close the website" lang="en-zh">8</a>
            <a href="" class="links item" title="http://www.sina.com">9</a>
            <a href="" class="links item last" id="last">10</a>
        </ul>

.demo a[lang|="zh"]{ background: gray; color: yellow; }

選擇了div.demo中lang屬性等于zh或以zh-開頭的所有a元素。

CSS3 選擇器——偽類選擇器

1、:first-child 選擇某個元素的第一個子元素

<ul class="demo">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

.demo li:first-child { background: red; border: 1px solid yellow; color: #fff; }
選擇某個元素的第一個子元素。

2、:last-child 選擇某個元素的最后一個子元素

<ul class="demo">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

.demo li:last-child { background: red; border: 1px solid yellow; color: #fff; }
選擇某個元素的最后一個子元素。

3、:nth-child() 選擇某個的一個或多個特定的子元素

:nth-child(number);/*參數是具體數字*/
:nth-child(n);/*參數是n,n從0開始計算*/
:nth-child(n*length)/*n的倍數選擇，n從0開始算*/
:nth-child(n+length);/*選擇大于length后面的元素*/
:nth-child(-n+length)/*選擇小于length前面的元素*/
:nth-child(n*length+1);/*表示隔幾選一*/

<ul class="demo">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

:nth-child() 可以定義括號的值（值可以是整數，也可以是表達式）

.demo li:nth-child(3) { background: red; border: 1px solid yellow; color: #fff; }
選擇 div 元素下的第3個 li 子元素。

[微風][微風]

:nth-child(n) /*參數是n,n從0開始計算*/

.demo li:nth-child(n) { background: red; border: 1px solid yellow; color: #fff; }
等于.demo li {background: lime;}

n是一個簡單的表達式，那么"n"取值是從“0”開始計算。

?[微風][微風]

:nth-child(n*length)

.demo li:nth-child(2n) { background: red; border: 1px solid yellow; color: #fff; }
等于.demo li:nth-child(even) {}

選擇偶數的對象：n是一個簡單的表達式，那么"n"取值是從“0”開始計算。
表達示結果，如下:
.demo li:nth-child(2n) = (2*0) = 0
.demo li:nth-child(2n) = (2*1) = 2
.demo li:nth-child(2n) = (2*2) = 4
.demo li:nth-child(2n) = (2*3) = 6
以此類推....

?[微風][微風]

.demo li:nth-child(2n-1) { background: red; border: 1px solid yellow; color: #fff; }
等于.demo li:nth-child(odd) {}

選擇奇數的對象：n是一個簡單的表達式，那么"n"取值是從“0”開始計算。
表達示結果，如下:
.demo li:nth-child(2n-1) = (2*0-1) = -1
.demo li:nth-child(2n-1) = (2*1-1) = 1
.demo li:nth-child(2n-1) = (2*2-1) = 3
.demo li:nth-child(2n-1) = (2*3-1) = 5
以此類推....

?[微風][微風]

:nth-child(n+length); /*選擇大于length后面的元素*/

nth-child(n+5)從第五個元素開始選擇，這里的數字你可以自己定義
.demo li:nth-child(n+5){ background: red; border: 1px solid yellow; color: #fff; }

n是一個簡單的表達式，那么"n"取值是從“0”開始計算。

表達示結果，如下:
.demo li:nth-child(0+5) = 5
.demo li:nth-child(1+5) = 6
.demo li:nth-child(2+5) = 7
.demo li:nth-child(3+5) = 8
以此類推....

?[微風][微風]

nth-child(-n+5)反向從第五個元素開始選擇，這里的數字你可以自己定義

.demo li:nth-child(-n+5){ background: red; border: 1px solid yellow; color: #fff; }

n是一個簡單的表達式，那么"n"取值是從“0”開始計算。

表達示結果，如下:
.demo li:nth-child(-0+5) = 5
.demo li:nth-child(-1+5) = 4
.demo li:nth-child(-2+5) = 3
.demo li:nth-child(-3+5) = 2
以此類推....

?[微風][微風]

:nth-child(n*length+1); /*表示隔幾選一*/

:nth-child(4n+1)間隔選擇對象，數字可自定義

.demo li:nth-child(4n+1) { background: red; border: 1px solid yellow; color: #fff; }

n是一個簡單的表達式，那么"n"取值是從“0”開始計算。

表達示結果，如下:
.demo li:nth-child(4*0+1) = 1
.demo li:nth-child(4*1+1) = 5
.demo li:nth-child(4*2+1) = 9
.demo li:nth-child(4*3+1) = 13
以此類推....

4、:nth-last-child() 選擇指定的元素，從最后一個開始

.demo li:nth-last-child(4) { background: red; border: 1px solid yellow; color: #fff; }
選擇倒數第四個元素。

?[微風][微風]

可以用表達示，選擇奇數

.demo li:nth-last-child(2n) { background: red; border: 1px solid yellow; color: #fff; }

n是一個簡單的表達式，那么"n"取值是從“0”開始計算。

表達示結果，如下:
:nth-last-child(2*1) = 2
:nth-last-child(2*2) = 4
:nth-last-child(2*3) = 6
:nth-last-child(2*4) = 8
以此類推....

?[微風][微風]

可以用表達示，選擇偶數

.demo li:nth-last-child(2n-1) { background: red; border: 1px solid yellow; color: #fff; }

n是一個簡單的表達式，那么"n"取值是從“0”開始計算。

表達示結果，如下:
:nth-last-child(2*1-1) = 1
:nth-last-child(2*2-1) = 3
:nth-last-child(2*3-1) = 5
:nth-last-child(2*4-1) = 7
:nth-last-child(2*5-1) = 9

5、:nth-of-type 選擇指定的類型元素

.demo li:nth-of-type(8) { background: red; border: 1px solid yellow; color: #fff; }
指定獲取類型為 li 的第8個元素，中間間隔了a元素

?[微風][微風]

與 :nth-child區別，:nth-child不指定類型 .demo li:nth-child(8) { background: red; border: 1px solid yellow; color: #fff; }

指定獲取元素為li第8個元素，中間間隔了a元素，因沒有指定類型，而第8個元素是a，所以無法設置樣式

6、:nth-last-of-type() 選擇指定類型的元素，從元素的最后一個開始計算

.demo li:nth-last-of-type(2) { background: red; border: 1px solid yellow; color: #fff; }

數字可使用n表達式計算，從最后一個元素開始計算，獲取指定類型為 li 的第2個元素，

7、:first-of-type 選擇指定類型的第一個元素；

.demo li:first-of-type { background: red; border: 1px solid yellow; color: #fff; }

:first-of-type與:first-child類型，前者區別了類型，后者無區域

獲取第一個為 li 的元素，子元素中包含了a、li兩種元素

8、:last-of-type 選擇指定類型的最后一個元素；

.demo li:last-of-type { background: red; border: 1px solid yellow; color: #fff; }

:last-of-type與:last-child類型，前者區分了類型，后者無區分

獲取最后一個為 li 的元素，子元素中包含了a、li兩種元素

9、:only-child 選擇的元素是它的父元素的唯一一個了元素；

        <div>
            <p>我是子級，在父級中是唯一一個子元素。</p>
        </div>

        <div>
            <span>我是span標簽，在父級中并不是唯一的子元素，因為還有一個p標簽。</span>
            <p>我是p標簽，在父級中并不是唯一的子元素，因為還有一個span標簽。</p>
        </div>

        <p>
            我是p標簽，而我并沒有父級。
        </p>

p:only-child { background: #ff0000; }

我是子級，在父級中是唯一一個子元素。
我是span標簽，在父級中并不是唯一的子元素，因為還有一個p標簽。
我是p標簽，在父級中并不是唯一的子元素，因為還有一個span標簽。
我是p標簽，而我并沒有父級。

10、:only-of-type 選擇一個元素是它的上級元素的唯一一個相同類型的子元素；

        <div>
            <p>我是子級p元素，在父級中是唯一的一個p元素。所以會被選擇中。</p>
            <span>我是子級span元素，在父級中并不是唯一的span元素。</span>
            <span>我是子級span元素，在父級中并不是唯一的span元素。</span>
            <span>我是子級span元素，在父級中并不是唯一的span元素。</span>
        </div>
        <div>
            <p>我是p標簽，在父級中并不是唯一的p元素，因為還有一個和我相同的p元素。所以不會被選中。</p>
            <p>我是p標簽，在父級中并不是唯一的p元素，因為還有一個和我相同的p元素。所以不會被選中。</p>
        </div>

p:only-of-type { background:#ff0000; }

我是子級p元素，在父級中是唯一的一個p元素。所以會被選擇中。

我是子級span元素，在父級中并不是唯一的span元素。我是子級span元素，在父級中并不是唯一的span元素。我是子級span元素，在父級中并不是唯一的span元素。

我是p標簽，在父級中并不是唯一的p元素，因為還有一個和我相同的p元素。所以不會被選中。
我是p標簽，在父級中并不是唯一的p元素，因為還有一個和我相同的p元素。所以不會被選中。

11、:empty 選擇的元素里面沒有任何內容。

        <p>我是一個p標簽，我<span style="color: red;">下面</span>有個p標簽，內容是空的，所以它會被選中。</p>
        <p></p>
        <p>我是一個p標簽，我<span style="color: red;">上面</span>有個p標簽，內容是空的，所以它會被選中。</p>
        <p>我是一個p標簽。</p>
        <p>我是一個p標簽。</p>

p:empty { background:#ff0000; }

第2行的p標簽會被選中，因為它沒有內容。

方文檔沒有找到在哪里設置，但是在Views章節Views - Nuxt.js有提到相關，內容如下：

結合Google到在nuxt的issues上相關提問，推導出相關的信息如下：

html

在線咨詢

上一篇：VUE項目打包發到Docker二次刷新頁面報404錯誤問題解決
下一篇：JavaScript代碼怎樣引入到HTML中？

您的項目需求

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

整合營銷服務商

CSS樣式第一天-基本選擇器

您的項目需求