要想將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.標籤選擇器,就是標籤的名字。追光者如果說你是遙遠的星河 耀眼得讓人想哭我是追逐著你的眼眸總在孤單時候...