網頁學習(三) css各種選擇器

2022-05-27 02:45:07 字數 1157 閱讀 2755

根據學習

選擇器:它是元素和其他部分組合起來告訴瀏覽器哪個html元素應當是被選為應用規則中的css屬性值的方式

選擇器列表:

其實是組合定義的方式

h1, .special

當你使用選擇器列表時,如果任何乙個選擇器無效 (存在語法錯誤),那麼整條規則都會被忽略。

1.型別、類和id選擇器

h1 類選擇器以乙個句點(.)開頭,會選擇文件中應用了這個類的所有物件。點前面加型別,可以特化這個類只用於這個型別。還能多個點,代表多對一。

.box

id選擇器開頭為#而非句點,不過基本上和類選擇器是同種用法。可是在一篇文件中,乙個id只會用到一次。它能選中設定了id的元素,你能把id放在型別選擇器之前,只指向元素和id都匹配的類

#unique

2.標籤屬性選擇器

這組選擇器根據乙個元素上的某個標籤的屬性的存在以選擇元素的不同方式:

a[title]

或者根據乙個有特定值的標籤屬性是否存在來選擇:

a[href="

"] 3.偽類與偽元素

這組選擇器包含了偽類,用來樣式化乙個元素的特定狀態。例如:hover偽類會在滑鼠指標懸浮到乙個元素上的時候選擇這個元素:

a:hover

它還可以包含了偽元素,選擇乙個元素的某個部分而不是元素自己。例如,::first-line是會選擇乙個元素(下面的情況中是)中的第一行,類似包在了第乙個被格式化的行外面,然後選擇這個。

p::first-line

4.運算子

最後一組選擇器可以將其他選擇器組合起來,更複雜的選擇元素。下面的示例用運算子(>)選擇了元素的初代子元素。

article >p

5.全域性選擇器

全域性選擇器,是由乙個星號(*)代指的,它選中了文件中的所有內容

i可以讓選擇器不敏感

li[class^="a"]

li[class^="a" i]

css 各種 選擇器

css 各種 選擇器 通配選擇器。全文匹配,所有使用,預設配置 標籤選擇器。應用於標籤為以下的html標籤 td 多標籤選擇器,也叫群組選擇器。應用於所有html標籤為以下的元素 td,p,div,a 類選擇器。應用於html頁面所有class屬性為ibmclass的標籤元素 ibmclass 精確...

CSS各種選擇器

1 元素選擇器 li 最常用 最基本 2 派生選擇器 li strong標籤間用空格分隔 定義了li標籤中的strong標籤的樣式,css1中上下文選擇器 css2中派生選擇器 3 id選擇器 id 在現代布局中,id 選擇器常常用於建立派生選擇器。id div 4 class選擇器 classna...

css選擇器學習

本片文章主要講解html5中css選擇器,通過選擇器定位到想要進行樣式設定的元素。當前css選擇已經發布到第三代,也就是css3選擇器。css3選擇器分為 基本選擇器,復合選擇器,偽元素選擇器。1.1 代表通用選擇器,選擇所有元素 1.2 type選擇器 元素選擇器 選擇指定的元素 1.3 id選擇...