css基礎選擇器

2022-08-16 03:24:25 字數 1642 閱讀 7628

要想將css樣式應用於特定的html元素,首先需要找到該目標元素。在css中,執行這一任務的樣式規則部分被稱為選擇器(選擇符)。

標籤選擇器是指用html標籤名稱作為選擇器,按標籤名稱分類,為頁面中某一類標籤指定統一的css樣式。其基本語法格式如下:

標籤名  或者

元素名

標籤選擇器最大的優點是能快速為頁面中同型別的標籤統一樣式,同時這也是他的缺點,不能設計差異化樣式。

案例:

熱門新聞

老母豬上樹了

高考錄取分數線

類選擇器使用「.」(英文點號)進行標識,後面緊跟類名,其基本語法格式如下:

.類名
標籤呼叫的時候用 class=「類名」  即可。
類選擇器最大的優勢是可以為元素物件定義單獨或相同的樣式。

小技巧:

1.長名稱或片語可以使用中橫線來為選擇器命名。

2.不要純數字、中文等命名, 盡量使用英文本母來表示。

案例:

我們可以給標籤指定多個類名,從而達到更多的選擇目的。

注意:1. 樣式顯示效果跟html元素中的類名先後順序沒有關係,受css樣式書寫的上下順序有關。

2. 各個類名中間用空格隔開。

多類名選擇器在後期布局比較複雜的情況下,還是較多使用的。

id選擇器使用「#」進行標識,後面緊跟id名,其基本語法格式如下:

#id名
該語法中,id名即為html元素的id屬性值,大多數html元素都可以定義id屬性,元素的id值是唯一的,只能對應於文件中某乙個具體的元素。

用法基本和類選擇器相同。

w3c標準規定,在同乙個頁面內,不允許有相同名字的id物件出現,但是允許相同名字的class。

類選擇器(class) 好比人的名字, 是可以多次重複使用的, 比如 張偉 王偉 李偉 李娜

id選擇器 好比人的身份證號碼, 全中國是唯一的, 不得重複。 只能使用一次。

id選擇器和類選擇器最大的不同在於 使用次數上。

萬用字元選擇器用「*」號表示,他是所有選擇器中作用範圍最廣的,能匹配頁面中所有的元素。其基本語法格式如下:

*
例如下面的**,使用萬用字元選擇器定義css樣式,清除所有html標記的預設邊距。

* 

偽類選擇器用於向某些選擇器新增特殊的效果。比如給鏈結新增特殊效果, 比如可以選擇 第1個,第n個元素。

為了和我們剛才學的類選擇器相區別,  類選擇器是乙個點 比如 .demo {}   而我們的偽類 用 2個點 就是 冒號  比如  :link{}

注意寫的時候,他們的順序盡量不要顛倒 按照 lvha 的順序

a a:hover

li:first-child

li:last-child

li:nth-child(4)

:target目標偽類選擇器 :選擇器可用於選取當前活動的目標元素

:target 

CSS選擇器之基礎選擇器

選擇器 選擇符 就是根據不同需求把不同的標籤選出來這就是選擇器的作用。簡單來說,就是選擇標籤用的。標籤選擇器 又稱元素選擇器,指用html標籤作為選擇器,為頁面中某類標籤設定css樣式。缺點 不能差異化設定樣式,只能選擇全部的當前標籤。語法 基礎選擇器之標籤選擇器title 標籤選擇器 寫上標籤名 ...

CSS 選擇器之基礎選擇器

id選擇器 選擇具體的id屬性值的元素 元素選擇器 選擇具有相同標籤名稱的元素 類選擇器 選擇具有相同的class屬性值的元素。id選擇器,是根據標籤的id屬性值選擇對應的標籤的。格式 id值舉例 定義兩個p標籤,且標籤的id屬性值不同,然後用css定義p標籤的內容如何顯示。google瀏覽器中開啟...

CSS 基礎選擇器

css cascading style sheet,層疊式樣式表,即乙個標籤可以同時被多種選擇器選擇,標籤選擇器 id選擇器 類選擇器。這些選擇器都可以選擇上同乙個標籤,從而影響樣式。基礎選擇器 1.標籤選擇器,就是標籤的名字。追光者如果說你是遙遠的星河 耀眼得讓人想哭我是追逐著你的眼眸總在孤單時候...