ife2018 零基礎(chǔ)學(xué)院 day 4

shinezejian 發(fā)布于2019-04-23 13:44 / 1301人閱讀

摘要：類型選擇器又名元素選擇器類型選擇器又名元素選擇器在標(biāo)準(zhǔn)中，元素選擇器又稱為類型選擇器。個(gè)位在整個(gè)選擇器中每包含一個(gè)元素選擇器或偽元素就在該列中加分。

第四天，背景邊框列表鏈接和更復(fù)雜的選擇器

背景，邊框，列表，鏈接相關(guān)屬性

背景

MDN 背景
W3School 背景

元素的背景是指，在元素內(nèi)容、內(nèi)邊距和邊界下層的區(qū)域。

屬性	描述
background-color	為背景設(shè)置一個(gè)純色。
background-image	把圖像設(shè)置為背景。線性漸變是通過(guò)linear-gradient()函數(shù)傳入的，它是一個(gè)background-image屬性的值。
background-position	指定背景應(yīng)該出現(xiàn)在元素背景中的位置。
background-repeat	指定背景是否應(yīng)該被重復(fù)(平鋪)。
background-attachment	當(dāng)內(nèi)容滾動(dòng)時(shí)，指定元素背景的行為
background	在一行中指定以上五個(gè)屬性的縮寫(xiě)。簡(jiǎn)寫(xiě)屬性，作用是將背景屬性設(shè)置在一個(gè)聲明中。
background-size	允許動(dòng)態(tài)調(diào)整背景圖像的大小。

邊框

W3School 邊框
MDN 邊框

元素外邊距內(nèi)就是元素的的邊框 (border)。元素的邊框就是圍繞元素內(nèi)容和內(nèi)邊據(jù)的一條或多條線。
每個(gè)邊框有 3 個(gè)方面：寬度（border-width）、樣式（border-style），以及顏色（border-color）。

列表

W3SChool 列表
MDN 列表

列表有三種：無(wú)序列表、有序列表、描述列表

可以在

list-style-type ：設(shè)置用于列表的項(xiàng)目符號(hào)的類型，例如無(wú)序列表的方形或圓形項(xiàng)目符號(hào)，或有序列表的數(shù)字，字母或羅馬數(shù)字。
list-style-position ：設(shè)置在每個(gè)項(xiàng)目開(kāi)始之前，項(xiàng)目符號(hào)是出現(xiàn)在列表項(xiàng)內(nèi)，還是出現(xiàn)在其外。
list-style-image ：允許您為項(xiàng)目符號(hào)使用自定義圖片，而不是簡(jiǎn)單的方形或圓形。

鏈接

W3School 鏈接
MDN 鏈接

鏈接存在時(shí)處于不同的狀態(tài)，每一個(gè)狀態(tài)都可以用對(duì)應(yīng)的偽類來(lái)應(yīng)用樣式:

a:link - 普通的、未被訪問(wèn)的鏈接

a:visited - 用戶已訪問(wèn)的鏈接

a:hover - 鼠標(biāo)指針位于鏈接的上方

a:active - 鏈接被點(diǎn)擊的時(shí)刻

a:focus - 鏈接被選中。一個(gè)鏈接當(dāng)它被選中的時(shí)候 (比如通過(guò)鍵盤(pán)的 Tab 移動(dòng)到這個(gè)鏈接的時(shí)候，或者使用編程的方法來(lái)選中這個(gè)鏈接 HTMLElement.focus()) 它可以使用 :focus 偽類來(lái)應(yīng)用樣式。

CSS 各種選擇器的概念，使用方法及使用場(chǎng)景

MDN 選擇器
W3C 選擇器

簡(jiǎn)單選擇器（Simple selectors）

通過(guò)元素類型、class 或 id 匹配一個(gè)或多個(gè)元素。

類型選擇器（又名元素選擇器）

在 W3C 標(biāo)準(zhǔn)中，元素選擇器又稱為類型選擇器（type selector）。
此選擇器只是一個(gè)選擇器名和指定的HTML元素名的不區(qū)分大小寫(xiě)的匹配。這是選擇所有指定類型的最簡(jiǎn)單方式。

針對(duì)某個(gè)HTML元素設(shè)置樣式

html {color:black;} 
h1 {color:blue;}

類選擇器

類選擇器由一個(gè)點(diǎn)“.”以及類后面的類名組成。類名是在HTML class文檔元素屬性中沒(méi)有空格的任何值。由你自己選擇一個(gè)名字。同樣值得一提的是，文檔中的多個(gè)元素可以具有相同的類名，而單個(gè)元素可以有多個(gè)類名(以空格分開(kāi)多個(gè)類名的形式書(shū)寫(xiě))。

.類型名A{}，對(duì)類型名為A的元素設(shè)置樣式，一個(gè)HTML文檔中可以匹配多個(gè)元素

ID選擇器

ID選擇器由哈希/磅符號(hào) (#)組成，后面是給定元素的ID名稱。任何元素都可以使用id屬性設(shè)置唯一的ID名稱。由你自己選擇的ID是什么。這是選擇單個(gè)元素的最有效的方式。

#ID名A{}，對(duì)ID名為A的元素設(shè)置樣式，一個(gè)HTML文檔中只能匹配一個(gè)元素

屬性選擇器（Attribute selectors）

通過(guò) 屬性 / 屬性值匹配一個(gè)或多個(gè)元素。

CSS 2 引入了屬性選擇器。

[attr]：該選擇器選擇包含 attr 屬性的所有元素，不論 attr 的值為何。

[attr=val]：該選擇器僅選擇 attr 屬性被賦值為 val 的所有元素。

[attr~=val]：該選擇器僅選擇 attr 屬性的值（以空格間隔出多個(gè)值）中有包含 val 值的所有元素，比如位于被空格分隔的多個(gè)類（class）中的一個(gè)類。

把包含標(biāo)題（title）的所有元素變?yōu)榧t色，可以寫(xiě)作：

*[title] {color:red;}

偽類（Pseudo-classes）

偽類和偽元素
概念：

匹配處于確定狀態(tài)的一個(gè)或多個(gè)元素，比如被鼠標(biāo)指針懸停的元素，或當(dāng)前被選中或未選中的復(fù)選框，或元素是DOM樹(shù)中一父節(jié)點(diǎn)的第一個(gè)子節(jié)點(diǎn)。

使用方法：

一個(gè) CSS 偽類（pseudo-class）是一個(gè)以冒號(hào)(:)作為前綴的關(guān)鍵字，當(dāng)你希望樣式在特定狀態(tài)下才被呈現(xiàn)到指定的元素時(shí)，你可以往元素的選擇器后面加上對(duì)應(yīng)的偽類（pseudo-class）。

偽元素（Pseudo-elements）

概念：

匹配處于相關(guān)的確定位置的一個(gè)或多個(gè)元素，例如每個(gè)段落的第一個(gè)字，或者某個(gè)元素之前生成的內(nèi)容。

使用方法：

偽元素（Pseudo-element）跟偽類很像，但它們又有不同的地方。它們都是關(guān)鍵字 —— 但這次偽元素前綴是兩個(gè)冒號(hào) (::) —— 同樣是添加到選擇器后面達(dá)到指定某個(gè)元素的某個(gè)部分。

組合器（Combinators）

這里不僅僅是選擇器本身，還有以有效的方式組合兩個(gè)或更多的選擇器用于非常特定的選擇的方法。例如，你可以只選擇divs的直系子節(jié)點(diǎn)的段落，或者直接跟在headings后面的段落。

Combinators	Select
A B	匹配任意元素，滿足條件：B是A的后代結(jié)點(diǎn)（B是A的子節(jié)點(diǎn)，或者A的子節(jié)點(diǎn)的子節(jié)點(diǎn)）
A > B	匹配任意元素，滿足條件：B是A的直接子節(jié)點(diǎn)
A + B	匹配任意元素，滿足條件：B是A的下一個(gè)兄弟節(jié)點(diǎn)（AB有相同的父結(jié)點(diǎn)，并且B緊跟在A的后面）
A ~ B	匹配任意元素，滿足條件：B是A之后的兄弟節(jié)點(diǎn)中的任意一個(gè)（AB有相同的父節(jié)點(diǎn)，B在A之后，但不一定是緊挨著A）

多用選擇器（Multiple selectors）

這些也不是多帶帶的選擇器；這個(gè)思路是將以逗號(hào)分隔開(kāi)的多個(gè)選擇器放在一個(gè)CSS規(guī)則下面，以將一組聲明應(yīng)用于由這些選擇器選擇的所有元素。

Combinators	Select
A,B	匹配滿足A（和/或）B的任意元素

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

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

CSS 是 Cascading Style Sheets 的縮寫(xiě)，這暗示層疊（cascade）的概念是很重要的。在最基本的層面上，它表明CSS規(guī)則的順序很重要，但它比那更復(fù)雜。什么選擇器在層疊中勝出取決于三個(gè)因素（這些都是按重量級(jí)順序排列的——前面的的一種會(huì)否決后一種）：

重要性（Importance）

在CSS中，有一個(gè)特別的語(yǔ)法可以讓一條規(guī)則總是優(yōu)先于其他規(guī)則：!important。

相互沖突的聲明將按以下順序適用，后一種將覆蓋先前的聲明：

在用戶代理樣式表的聲明 (例如：瀏覽器在沒(méi)有其他聲明的默認(rèn)樣式).
用戶樣式表中的普通聲明（由用戶設(shè)置的自定義樣式）。
作者樣式表中的普通聲明（這是我們?cè)O(shè)置的樣式，Web開(kāi)發(fā)人員）。
作者樣式表中的重要聲明
用戶樣式表中的重要聲明

專用性（Specificity）
一個(gè)選擇器具有的專用性的量是用四種不同的值（或組件）來(lái)衡量的，它們可以被認(rèn)為是千位，百位，十位和個(gè)位——在四個(gè)列中的四個(gè)簡(jiǎn)單數(shù)字：
千位：如果聲明是在style 屬性中該列加1分（這樣的聲明沒(méi)有選擇器，所以它們的專用性總是1000。）否則為0。
百位：在整個(gè)選擇器中每包含一個(gè)ID選擇器就在該列中加1分。
十位：在整個(gè)選擇器中每包含一個(gè)類選擇器、屬性選擇器、或者偽類就在該列中加1分。
個(gè)位：在整個(gè)選擇器中每包含一個(gè)元素選擇器或偽元素就在該列中加1分。

源代碼次序（Source order）

如果多個(gè)相互競(jìng)爭(zhēng)的選擇器具有相同的重要性和專用性，那么第三個(gè)因素將幫助決定哪一個(gè)規(guī)則獲勝——后面的規(guī)則將戰(zhàn)勝先前的規(guī)則。

GPU云服務(wù)器云服務(wù)器零基礎(chǔ) 零基礎(chǔ)爬蟲(chóng) 前端零基礎(chǔ) 零基礎(chǔ)前端

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/2276.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

shinezejian

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

#黑五#hostarmada：共享主機(jī)80%折扣，vps主機(jī)30%折扣，新加坡/美國(guó)等9機(jī)房

閱讀 1028·2021-11-24 10:42
面試官問(wèn)我Redis集群，我真的是

閱讀 3577·2021-11-19 11:34
C語(yǔ)言進(jìn)階：動(dòng)態(tài)內(nèi)存管理

閱讀 2728·2021-09-29 09:35
干貨|app自動(dòng)化測(cè)試之Andriod WebView如何測(cè)試

閱讀 2610·2021-09-09 09:33
2020騰訊云產(chǎn)品采購(gòu)季有獎(jiǎng)問(wèn)卷調(diào)查,認(rèn)真填寫(xiě)送騰訊云代金券獎(jiǎng)勵(lì)

閱讀 752·2021-07-26 23:38
深入解析CSS FlexBox

閱讀 2591·2019-08-30 10:48
淺談 CSS 中的偽類 after

閱讀 1455·2019-08-28 18:07
數(shù)字孿生——思考IoT未來(lái)，UINO2019展會(huì)邀您蒞臨！

閱讀 482·2019-08-26 13:44

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！