社群 學習 工具庫 休閒
搜尋
繁体中文
首頁 > web前端 > html教學 > css之選擇器篇

css之選擇器篇

WBOY
發布： 2016-08-10 08:49:38
原創
1160 人瀏覽過

css能夠取得到HTML結構上的元素，這個是怎麼實現的了？

在我們看來這是個很神奇的事情，css可以寫在頁面之外，也可以寫在頁面內，而都不會影響到它去

取得這個元素，還有無論這個HTML結構多麼複雜，這個css也能準確地取得你所要的HTML元素，既然

那麼強大，那麼是不是實現過程也是很難呢?

只能絕對說這個很很很簡單的。

這只要記住以下的選擇符即可，噢，還有上一篇還介紹了一些選擇符。

子選擇符

選擇所有作為E元素的子元素F。 E>F

範例：

<style><span style="color: #000000;">
    p</span>><span style="color: #000000;">a{
        color: black;
    }
</span></style>

<p>火狐是个<a href=<span style="color: #800000;">"</span><span style="color: #800000;">#</span><span style="color: #800000;">"</span>>浏览器</a></p>
登入後複製

相鄰選擇符

選擇緊貼在E元素之後F元素。 E+F

<span style="color: #0000ff;"><</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;">
    p+p</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
    font-weight</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> bold</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
    <span style="background-color: #f5f5f5; color: #000000;">}</span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>

<span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>火狐是个<span style="color: #0000ff;"><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>浏览器<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>IE是个坑爹的浏览器<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
登入後複製

兄弟選擇符

選擇E元素所有兄弟元素F。 E~F

        <span style="color: #0000ff;"><</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;">
        li~li</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
            color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> red</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
        <span style="background-color: #f5f5f5; color: #000000;">}</span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>

    <span style="color: #0000ff;"><</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>大明的子女1<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>大明的子女2<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>大明的子女3<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>大明的子女4<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>大明的子女5<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>大明的子女6<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>大明的子女7<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>大明的子女8<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>大明的子女9<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>大明的子女10<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
登入後複製

 

這個選擇符選擇不包括自己以外所有F選擇符。

id 及 class 選擇符

<span style="color: #0000ff;"><</span><span style="color: #800000;">p </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="p1"</span><span style="color: #0000ff;">></span> 这是一个段落 <span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span><span style="color: #000000;">

        #p1 {
          font-size:12px;
          font-weight:bold;
        }</span>
登入後複製
<span style="color: #0000ff;"><</span><span style="color: #800000;">p </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="p1"</span><span style="color: #0000ff;">></span> 这是一个段落 <span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span><span style="color: #000000;">

        .p1 {
          font-size:12px;
          font-weight:bold;
        }</span>
登入後複製

 

id 選擇器可以為標示特定 id 的 HTML 元素指定特定的樣式。

在網頁中，每個id名稱只能使用一次，不得重複。

與id 不同，class 允許重複使用。例如頁面中的多個元素，都可以使用同一個樣式定義。

偽類選擇子

E:link 設定超連結a在未被存取前的樣式。

E:visited 設定超連結a在其連結地址已被存取過時的樣式。

E:hover 設定元素在其滑鼠懸停時的樣式。

E:active 設定元素在被使用者啟動(在滑鼠點選與釋放之間發生的事件)時的樣式。 

<span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">DOCTYPE html</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">html </span><span style="color: #ff0000;">lang</span><span style="color: #0000ff;">="en"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="UTF-8"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>伪类<span style="color: #0000ff;"></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;">
        a:link</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
            color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> #00ffff</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
        <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
        a:visited</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
            color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> #000</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
        <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
        a:hover</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
            color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> #ff7600</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
        <span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
        a:active</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
            color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> #eee</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
        <span style="background-color: #f5f5f5; color: #000000;">}</span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>click into<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span>
登入後複製

 

注意：這個4個偽類選擇符的順序依照    link-visited-hover-active

link-visited-hover-active 順序亂來會出現問題，這個問題請移步到

上篇擴充內容

 

E:focus     設定元素在成為輸入焦點(該元素的onfocus事件發生)時的樣式。

 

使用在表單中或能取得遊標的元素上。 

<span style="color: #000000;">    input:focus{
        outline: 2px solid #ff7600;
    }


    </span><span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text"</span><span style="color: #0000ff;">></span>
登入後複製
E:lang(fr)     配對使用特殊語言的E元素。很少用

匹配中英雙版，可能要使用。 

<span style="color: #000000;">p:lang(en){
        font-size: 14px;
    }

</span><span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>IE是个坑爹的浏览器<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
登入後複製
 

E:not(s)     符合不含有s選擇符的元素E。 

<span style="color: #000000;">ul li:not(.li3){
        color: #fff;
    }

    </span><span style="color: #0000ff;"><</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>大明的子女1<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>大明的子女2<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">li </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="li3"</span><span style="color: #0000ff;">></span>大明的子女3<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>大明的子女4<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>大明的子女5<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>大明的子女6<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>大明的子女7<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>大明的子女8<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>大明的子女9<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>大明的子女10<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
登入後複製

E:root      匹配E元素在文件的根元素。常指html元素

<span style="color: #000000;">p:root{
        background: blue;
    }</span>
登入後複製

E:first-child     符合父元素的第一個子元素E。 

<span style="color: #000000;">   ul:first-child{
        font-size: 15px;
    }


    </span><span style="color: #0000ff;"><</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>大明的子女1<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>大明的子女2<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>大明的子女3<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>大明的子女4<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>大明的子女5<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>大明的子女6<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>大明的子女7<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>大明的子女8<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>大明的子女9<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>大明的子女10<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
登入後複製

 

第一個li被配對；

E:last-child   符合父元素的最後一個子元素E。 

<span style="color: #000000;">ul:last-child{
        color: blue;
    }</span>
登入後複製

  最後一個li被配對；

E:only-child

<span style="color: #000000;">    body:only-child{
        color: blue;
    }

</span><span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>火狐是个<span style="color: #0000ff;"><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>浏览器<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>IE是个坑爹的浏览器<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>

<span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text"</span><span style="color: #0000ff;">></span>
登入後複製

 

input被配對；

E:nth-child(n)    匹配父元素的第n個子元素E。 

<span style="color: #000000;">    ul:nth-child(1){
        color: blue;
    }</span>
登入後複製

 

ul下的第一個li被配對；

E:nth-last-child(n)     符合父元素的倒數第n個子元素E。 

<span style="color: #000000;">ul:nth-last-child(1){
        color: blue;
    }</span>
登入後複製

 

ul的子元素li的倒數第一個被配對到。

E:first-of-type    匹配同類型中的第一個同級兄弟元素E。 

<span style="color: #000000;">    li:first-of-type{
        font-weight: bold;
    }</span>
登入後複製

 

同類型li的第一個被選中；

E:last-of-type    符合同類型中的最後一個同級兄弟元素E。 

<span style="color: #000000;">    li:last-of-type{
        border: 1px solid #ddd;
    }</span>
登入後複製

 

同類型li的最後一個被選中；

E:only-of-type   匹配同類型中的唯一的一個同級兄弟元素E。 

<span style="color: #000000;">    li:only-of-type{
        font-weight: bold;
    }</span>
登入後複製
🎜E:nth-of-type(n)  匹配同類型中的第n個同級兄弟元素E。 🎜 🎜 
<span style="color: #000000;">    li:nth-of-type(3){
        font-weight: bold;
    }</span>
登入後複製
🎜

 

第三li被匹配；

E:nth-last-of-type(n)   匹配同类型中的倒数第n个同级兄弟元素E。

<span style="color: #000000;">    li:nth-last-of-type(3){
        background: green;
    }</span>
登入後複製

 

倒数第三个被匹配；

E:empty    匹配没有任何子元素（包括text节点）的元素E。

E:checked  匹配用户界面上处于选中状态的元素E。 (用于input type为radio与checkbox时)

<span style="color: #000000;">    input:checked{
            width: 100px;
        }

    </span><span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="checkbox"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="name"</span><span style="color: #ff0000;"> id</span><span style="color: #0000ff;">="1"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="checkbox"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="name"</span><span style="color: #ff0000;"> id</span><span style="color: #0000ff;">="2"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="checkbox"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="name"</span><span style="color: #ff0000;"> id</span><span style="color: #0000ff;">="3"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="checkbox"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="name"</span><span style="color: #ff0000;"> id</span><span style="color: #0000ff;">="4"</span><span style="color: #0000ff;">></span>
登入後複製

E:enabled    匹配用户界面上处于可用状态的元素E。

E:disabled    匹配用户界面上处于禁用状态的元素E。

E:target     匹配相关URL指向的E元素。

<span style="color: #000000;">ul li a:target{
    color: red;
    }


</span><span style="color: #0000ff;"><</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#nav1"</span><span style="color: #ff0000;"> id</span><span style="color: #0000ff;">="nav1"</span><span style="color: #0000ff;">></span>导航一<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#nav2"</span><span style="color: #ff0000;"> id</span><span style="color: #0000ff;">="nav2"</span><span style="color: #0000ff;">></span>导航二<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#nav3"</span><span style="color: #ff0000;"> id</span><span style="color: #0000ff;">="nav3"</span><span style="color: #0000ff;">></span>导航三<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>
登入後複製

这个一定要设置路径URL，不是不行。只能使用与锚点，就是本页跳转。

不过可以使用来代表激活状态，以前是需要js实现的。

 

ok~

 

扩展小知识：

接上一篇又补充一些，让我们对css的理解更加深刻。

层叠样式表

层叠是什么意思？为什么这个词如此重要，以至于要出现在它的名称里。

层叠可以简单地理解为冲突的解决方案。


优先级规则可以表述为

行内样式>ID样式>类别样式>标记样式


在复杂的页面中，某一个元素有可能会从很多地方获取样式，例如一个网站的某一级标题整体设置为使用绿色，而对某个特殊栏目

需要使用蓝色，这样在栏目中就需要覆盖通用的样式设置。在很简单的页面中，这样的特殊需求实现起来不会很难，但是如果网站

的结构很复杂，就完全有可能代码变得非常混乱，可能出现无法找到某个元素的样式来自于哪条规则的情况。因此，必须要充分理

解css中“层叠”的原理。


计算冲突样式的优先级是一个比较复杂的过程，并不仅仅是上面这个简单的优先级规则可以完全描述的。但是使用者可以把把握 一个大的

原则，就是“越特殊的样式，优先级越高”行内样式对指定的一个元素产生影响，非常特殊，ID是针对某个元素的，因此它一定比应用于多个

元素的类别样式特殊。特殊性越高的元素，优先级越高。

 

相關標籤：
css之选择器篇
來源：php.cn
上一篇：css 選擇符 下一篇：html頁面公共樣式
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
使用JS控製播放質量 有什麼方法可以使用Javascript來控制影片的播放品質嗎？更準確地說，我想使用JavaScript選擇視訊品質。就像我希望在chrome或firefox中加載瀏覽器時自動以10...
來自於 2024-04-04 00:21:55
0
1
384
如何使用CSS選擇器來定位包含特定屬性或標籤的div元素？ 我正在使用一個產生網站的POS系統。大部分程式碼是專有的，因此我無法編輯很多內容。我有一個輸出的類別列表，其中一些圖像作為類別浮動。我想隱藏主頁上列出的前3個。我嘗試使用div:n...
來自於 2024-04-03 22:25:59
0
1
277
如何檢查CSS類別選擇器的寬度屬性？一個例子是.label{} 這是我對css程式碼的評論，其中我為.label選擇了270的寬度：如果您使用瀏覽器的開發人員工具檢查.label元素，您可能會注意到它實際上是288像素寬，而不是270像素。這是...
來自於 2024-04-01 17:45:11
0
1
338
嘗試溢位 HTML <pre><code> 標籤而非換行時，Flex 間距會被破壞 我將CSS應用到precode選擇器，以便製作樣式程式碼區塊，就像您在GitHub或其他地方看到的那樣。我使用Flexbox進行佈局，並且在“框”div內並排有兩個“面板”div，...
來自於 2024-04-01 12:22:06
0
1
296
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板