學習前端之CSS選擇器

2021-10-25 09:54:35 字數 2022 閱讀 3789

css選擇器是個啥子東東?別看它取了個高階的名字,其實就相當於給目標人物取名字,例如:

>

div>

我要給上面的div標籤加樣式,首先就要找到它,簡單粗暴的一種,就是直接取div

div

這樣我們就能給div加樣式了。廢話不多說,選擇器有哪些呢?

標籤選擇器

上面的例子就是標籤選擇器,直接是用的標籤名,寫div,就會選中html中所有的div標籤

id選擇器

這個選擇器就相當於身份證號,乙個身份證號只能代表乙個人,乙個id只能選中乙個標籤,別人不能一起共用,id選擇器以"#"來定義。同樣選中上面的div,用id選擇器。

注:id屬性不能以數字開頭,數字開頭的id在mozilla/firefox瀏覽器中不起作用。

class選擇器

class選擇器與id選擇器類似,但有別於id選擇器,它可以在多個元素中使用,又叫做類選擇器,以乙個點"."號顯示。

div

>

.box

注:類名的第乙個字元不能使用數字!它無法在 mozilla 或 firefox 中起作用。

屬性選擇器

一般用於input標籤上,input標籤有多種type,想要給其中一種type加樣式,就用屬性選擇器。

除了上面的用法外,還可以

[attribute],表示選擇所有帶有括號裡屬性元素

[attribute~=value]表示選擇attribute屬性包含單詞"value"的所有元素

[title~=flower] 選擇標題屬性包含單詞"flower"的所有元素

[attribute|=language]表示選擇 attribute屬性以 language為開頭的所有元素

[lang|=en] 選擇 lang 屬性以 en 為開頭的所有元素

[attribute^=value]表示選擇每乙個attribute屬性的值以"value"開頭的元素

a[src^=「https」] 選擇每乙個src屬性的值以"https"開頭的元素

[attribute$=value]表示選擇每乙個attribute屬性的值以"value"結尾的元素

a[src$=".pdf"] 選擇每乙個src屬性的值以".pdf"結尾的元素

[attribute*=value]表示選擇每乙個attribute屬性的值包含子字串"value"的元素

a[src*=「runoob」] 選擇每乙個src屬性的值包含子字串"runoob"的元素

萬用字元*

選擇所有的元素,用於最開頭,初始化頁面。以第乙個例子標籤選擇器為例,我們給div設好樣式後,會發現它離左邊,上面都有一定的距離,這個樣式我們並沒有設定,是瀏覽器自帶的樣式。

每個元素設定好樣式後,都會有以上的距離,為了消除這個樣式,就用"*"

*

這樣我們就把這個樣式消除了。

以上的這些選擇器都是簡單的選擇器,還有複雜選擇器,就下次再分享啦!!!

前端學習之 CSS 選擇器

css選擇有三種 html 元素指的是從開始標籤 start tag 到結束標籤 end tag 的所有 元素選擇器通過標籤名選擇元素。p元素 p元素p元素 效果 id選擇器通過id選擇元素,乙個元素的id應該是唯一的。另乙個元素不應該重複使用 p標籤 p1標籤 效果 當需要多個元素,都使用同樣的c...

前端之CSS介紹 選擇器

一 概述 css我們稱呼層疊樣式表 英文全稱 cascading style sheets 它是一種用來表現html 標準通用標記語言的乙個應用 或xml 標準通用標記語言的乙個子集 等檔案樣式的計算機語言。css不僅可以靜態地修飾網頁,還可以配合各種指令碼語言動態地對網頁各元素進行格式化。如果ht...

前端基礎css之選擇器

css cascading style sheet,層疊樣式表 定義如何顯示html元素。當瀏覽器讀到樣式表,它就會按照這個樣式來對文件進行格式化 渲染 每個css樣式由兩部分組成 選擇器和宣告。宣告有包括屬性和屬性值。每個宣告之後用分號結束。1,行內樣式 直接寫在標籤裡面style 樣式1 樣式2...