2018-08-14 HTML學(xué)習(xí)CSS選擇器與偽類選擇器

選擇器

<style type="text/css">

1. 元素選擇器(標(biāo)簽選擇器):標(biāo)簽名

選中所有的標(biāo)簽名對(duì)應(yīng)的標(biāo)簽
例:所有a標(biāo)簽

    a{
        background-color: yellow;
      }

2.id選擇器:#id屬性值

每個(gè)標(biāo)簽都有一個(gè)id屬性,整個(gè)html中,id的值必須唯一
例:id為a1的標(biāo)簽

   #a1{
        /*color:#ff0000;*/
        color:rgba(0,0,255,0.4)
        }

3.class選擇器:.class屬性值

每個(gè)標(biāo)簽都有一個(gè)class屬性,
例:所有class為.c1的標(biāo)簽

    .c1{
        color: brown;
        background-color: olive;
        }

4.通配符:*

選中所有的標(biāo)簽

 *{
    font-size: 50px;
  }

5.層級(jí)選擇器:選擇器1 選擇器2...

例:id為all_a的所有a標(biāo)簽

    #all_a a{
                color: pink;
            }

滿足div層下的div層下的a標(biāo)簽

    div div a{
                text-decoration: none;
            }

6.群組選擇器:選擇器1,選擇器,....

例:同時(shí)選中所有h1標(biāo)簽和所有的span標(biāo)簽

    h1,span{
                background-color: #FFC0CB;
            }

偽類選擇器

偽類選擇器: 選擇器:狀態(tài)
link: 超鏈接的初始狀態(tài); -- 一次都沒有訪問成功的時(shí)候的狀態(tài)
visited: 超鏈接訪問后的狀態(tài) --- 已經(jīng)訪問成功后的狀態(tài)
hover: 鼠標(biāo)懸停在標(biāo)簽上對(duì)應(yīng)的狀態(tài)
active:鼠標(biāo)按住的狀態(tài)

給同一個(gè)標(biāo)簽通過偽類選擇器給不同狀態(tài)設(shè)置不同的樣式的時(shí)候,要遵守愛恨原則(先要愛才能恨)
LoVe HAte
例子:a標(biāo)簽使用偽類選擇器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            a{
                color: black;
            }
            
            a:link{
                color: green;
                
            }
            
            a:visited{
                color: pink;
            }
            
            a:hover{
                color: red;
            }
            a:active{
                color: darkblue;
            }
        </style>
    </head>
    <body>
        <a >百度一下</a>
    </body>
</html>

a標(biāo)簽為黑色,從未瀏覽過的a標(biāo)簽為綠色,瀏覽過的a標(biāo)簽為粉紅色,鼠標(biāo)懸停在a標(biāo)簽上為紅色,鼠標(biāo)按下是a標(biāo)簽變?yōu)榘邓{(lán)色,松開鼠標(biāo)恢復(fù)成變色前.

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn),斷路器,智...
    卡卡羅2017閱讀 136,632評(píng)論 19 139
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML標(biāo)準(zhǔn)。 注意:講述HT...
    kismetajun閱讀 28,827評(píng)論 1 45
  • 概述 在網(wǎng)易云課堂學(xué)習(xí)李南江老師的《從零玩轉(zhuǎn)HTML5前端+跨平臺(tái)開發(fā)》時(shí),所整理的筆記。筆記內(nèi)容為根據(jù)個(gè)人需求所...
    墨荀閱讀 2,475評(píng)論 0 7
  • 早上好,我是陳城。人生最重要的就是藍(lán)圖和狀態(tài)。每天早上你起床你都要記得,你有兩個(gè)選擇,不是選擇平凡的度過今天就是選...
    87233594db05閱讀 319評(píng)論 0 0
  • 雨墜青荷碧, 草軟泥濘行。 云霧皆著墨, 羊腸俱作溪。
    瘋不語AOA閱讀 163評(píng)論 0 0

友情鏈接更多精彩內(nèi)容