類選擇器、偽類選擇器这吻、偽元素選擇器學(xué)習(xí)總結(jié) Day1

先來看一下如標(biāo)題三個選擇器的寫法:

.one類選擇器 :hover偽類選擇器 ::偽元素選擇器

類選擇器是一個點吊档,偽類選擇器是兩個點,偽元素選擇器是三個點唾糯。

接下來我們分別做一個介紹:

一怠硼、類選擇器

類選擇器最大的優(yōu)勢是可以給 元素對象 定義單獨或相同的樣式。

.類名 { 屬性1: 屬性值1; 屬性2: 屬性值2;}

小技巧:
1.長名稱或詞組可以使用中橫線來為選擇器命名移怯。
2.不建議使用“_”下劃線來命名css選擇器香璃。
3.不要用純數(shù)字、中文等命名舟误,盡量使用英文字母來表示葡秒。

二、偽類選擇器

偽類選擇器是用于向某些選擇器添加特殊的效果嵌溢。

比如給鏈接添加特殊效果眯牧;比如可以選擇第1個、第n個元素堵腹。

鏈接偽類選擇器

:link 未訪問的鏈接
:visited 已訪問的鏈接
:hover 鼠標(biāo)移動到鏈接上
:active 選定的鏈接

注意:以上順序盡量不要顛倒炸站,按照 lvha 的順序。
love hate 愛上了討厭 記憶法 或者 lv 包包非常 hao疚顷。

結(jié)構(gòu)(位置)偽類選擇器

:first-child 選取屬于其父元素的首個子元素的指定選擇器
:last-child 選取屬于其父元素的最后一個子元素的指定選擇器
:nth-child(n) 匹配屬于其父元素的第n個字元素旱易,不論元素的類型
:nth-last-child(n) 選擇器匹配屬于其元素的第n個字元素的每個元素,不論元素類型腿堤,從最后一個子元素開始計數(shù)阀坏。n可以是數(shù)字、關(guān)鍵詞或公式


li:first-child { /* 選擇第一個孩子 */

color: blue;

}

li:last-child { /* 選擇最后一個孩子 */

color: purple;

}

li:nth-child(4) { /* 選擇第4個孩子 */

color: red;

}

目標(biāo)偽類選擇器

:target 目標(biāo)偽類選擇器:選擇器可用于選取當(dāng)前活動的目標(biāo)元素笆檀。


:target {

color: purple;

font-size: 14px;

}

三忌堂、偽元素選擇器(::brfore和::after)

之所以被稱為偽元素是因為他們不是真正的頁面元素,html沒有對應(yīng)的元素酗洒,但是其所有用法和表現(xiàn)行為與真正的頁面元素是一樣的士修,可以對其使用諸如頁面元素一樣的css樣式,表面看上去貌似是頁面的某些元素展現(xiàn)出來的效果樱衷,實際上是css樣式展現(xiàn)的行為棋嘲,因此被稱為偽元素。

偽元素在body的結(jié)構(gòu)是無法審查的矩桂,只能在css中看到樣式沸移。


<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8">

        <style>


        div::before {

              content: "劉昊然";

              background-color: pink;

              border: 1px solid red;

              width: 100px;

              height: 100px;

              display: block;

          }

        div::after {

              content: "你們的";

              display: block;

              width: 50px;

              height: 50px;

              border: 1px solid skyblue;

          }
        </style>

      </head>

      <body>

            <div>是</div>

            <p></p>

      </body>

</html>

注意:
1.偽元素::before和::after添加的內(nèi)容默認是inline元素,即行內(nèi)元素;
2.偽元素的content屬性是其的內(nèi)容雹锣;設(shè)置::before和::after時必須設(shè)置其content屬性网沾,否則偽元素就不起作用。

綜上可以看出:

類選擇蕊爵、偽類選擇器就是選取對象辉哥,做效果使用的。

偽元素選擇器 本質(zhì)上是 插入一個元素(標(biāo)簽or盒子) 只不過是行內(nèi)元素( span a )形式的盒子在辆,若要給偽元素寬和高的話证薇,得把其轉(zhuǎn)化為快元素dispaly:block。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末匆篓,一起剝皮案震驚了整個濱河市浑度,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌鸦概,老刑警劉巖箩张,帶你破解...
    沈念sama閱讀 216,744評論 6 502
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異窗市,居然都是意外死亡先慷,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,505評論 3 392
  • 文/潘曉璐 我一進店門咨察,熙熙樓的掌柜王于貴愁眉苦臉地迎上來论熙,“玉大人,你說我怎么就攤上這事摄狱∨Ч睿” “怎么了?”我有些...
    開封第一講書人閱讀 163,105評論 0 353
  • 文/不壞的土叔 我叫張陵媒役,是天一觀的道長祝谚。 經(jīng)常有香客問我,道長酣衷,這世上最難降的妖魔是什么交惯? 我笑而不...
    開封第一講書人閱讀 58,242評論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮穿仪,結(jié)果婚禮上席爽,老公的妹妹穿的比我還像新娘。我一直安慰自己啊片,他們只是感情好拳昌,可當(dāng)我...
    茶點故事閱讀 67,269評論 6 389
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著钠龙,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上碴里,一...
    開封第一講書人閱讀 51,215評論 1 299
  • 那天沈矿,我揣著相機與錄音,去河邊找鬼咬腋。 笑死羹膳,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的根竿。 我是一名探鬼主播陵像,決...
    沈念sama閱讀 40,096評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼寇壳!你這毒婦竟也來了醒颖?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,939評論 0 274
  • 序言:老撾萬榮一對情侶失蹤巍膘,失蹤者是張志新(化名)和其女友劉穎渠概,沒想到半個月后锰提,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,354評論 1 311
  • 正文 獨居荒郊野嶺守林人離奇死亡腰耙,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,573評論 2 333
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了铲球。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片挺庞。...
    茶點故事閱讀 39,745評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖稼病,靈堂內(nèi)的尸體忽然破棺而出选侨,到底是詐尸還是另有隱情,我是刑警寧澤溯饵,帶...
    沈念sama閱讀 35,448評論 5 344
  • 正文 年R本政府宣布侵俗,位于F島的核電站,受9級特大地震影響丰刊,放射性物質(zhì)發(fā)生泄漏隘谣。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,048評論 3 327
  • 文/蒙蒙 一啄巧、第九天 我趴在偏房一處隱蔽的房頂上張望寻歧。 院中可真熱鬧,春花似錦秩仆、人聲如沸码泛。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,683評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽噪珊。三九已至晌缘,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間痢站,已是汗流浹背磷箕。 一陣腳步聲響...
    開封第一講書人閱讀 32,838評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留阵难,地道東北人岳枷。 一個月前我還...
    沈念sama閱讀 47,776評論 2 369
  • 正文 我出身青樓,卻偏偏與公主長得像呜叫,于是被迫代替她去往敵國和親空繁。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,652評論 2 354