css 選擇器基礎

2022-09-01 22:09:27 字數 742 閱讀 1610

有時在看別人**時,看到一長串的選擇器經常有點懵,今天來夯實一下基礎

選擇器有:

1、標籤選擇器 :就是html 中的標籤 如等

2、類選擇器: 用 class="類選擇器名稱" 為標籤設定乙個類 ,以英文原點開頭,語法:

.類選擇器名稱

3、id選擇器:用 id="id選擇器名稱"為標籤設定乙個類,以(#)號開頭.(id選擇器只能在文件中使用一次)

4、通用選擇器:它使用乙個(*)號指定,它的作用是匹配html中所有標籤元素,如:

*5、子代選擇器:用(>)符號,用於指定標籤元素的第一代子元素。如:

li>span

6、後代選擇器:加入空格 ,用於選擇指定標籤下的後輩元素。

.parent  .son

7、偽類選擇器:用於給html不存在的標籤(標籤的某種狀態)設定樣式,如

a:hover

8、分組選擇符:想為多個標籤設定相同的樣式,用分組選擇符(,)。如

h1,p

選擇器權值:

哪種選擇器權值高就使用哪種css的樣式,權值規則:

標籤的權值為1,類選擇符的權值為10,id選擇符的權值最高為100。

當有權值相同的樣式存在,根據前後順序決定樣式,處於最後面的css樣式會被應用

所以優先順序:內聯樣式表(標籤內部)>嵌入樣式表(當前文件中)>外部樣式表(外部檔案中)

為某些樣式設定最高權值,用!important。如:

p   !important寫在分號前。

CSS選擇器之基礎選擇器

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

CSS 選擇器之基礎選擇器

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

CSS 基礎選擇器

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