CSS及其多種選擇器

2021-08-21 20:31:37 字數 1547 閱讀 4438

昨天博文快結束的時候我展示了css的**結構和css的乙個樣式選擇器-----標籤選擇器;其功能為——根據標籤名稱定義所有將要使用的這種標籤都採用定義的樣式。其格式為     標籤名

今天我將展示css其他的選擇器:類選擇器,id選擇器,後代選擇器,分組選擇器,通配選擇器及其他們的優先順序。

每乙個標籤都可以有乙個class屬性,此屬性常用來分類標籤。定義格式為

.標籤屬性值

例.divtext

注意 :定義class選擇器的名稱時不能以數字開頭

在使用時(以div標籤為例)表明此div的background-color為crimson

每乙個標籤都可以有乙個屬性id 。

id標籤屬性的屬性值不能以數字開頭;id標籤屬性的屬性值在html文件中必須唯一;class標籤屬性的屬性值可以不唯一;

定義格式為

#標籤屬性值

例#divcol

使用時(以div標籤為例) 表明此div的background-color為forestgreen

我們可以定義在某一標籤裡的巢狀標籤使用的樣式屬性。

定義格式

父標籤1 子標籤1

例div span

父當選擇器與子選擇器間以空格分隔 **中有以下格式時

div中的第乙個span元素

div中的第二個span元素

div裡span中元素的font -size為larger ,color為#dc143c

如果多個css樣式表內的部分樣式相同,則可以通過定義乙個分組選擇器抽取出來以簡化css樣式**

該類選擇器的選擇器名由多個選擇器組成,使用逗號分隔,在其語法如下

選擇器1,選擇器2

div,span

萬用字元選擇器等價於列出了html文件中所有標籤的乙個分組選擇器,所有的標籤都採用此樣式,

定義語法如下

*
id選擇器優先順序最高,標籤選擇器優先順序最低,如下所示:id選擇器 > 類選擇器 > 標籤選擇器》萬用字元選擇器

注意:選擇器優先順序不考慮選擇器的先後順序

css的樣式多種多樣,以上這些只是讓我們知道了css的用法和能讀懂css,想要做出來精彩的網頁還需要我們學會使用css的多種樣式,接下來我會整理乙份常用的簡單樣式。同時網上的css使用手冊有許多,我們可以通過查閱使用手冊得到css的多種樣式屬性使用。

css選擇器及其性質

通過標籤名選中元素。語法 標籤名 不管標籤巢狀多深,都可以通過標籤名查詢到。1 p 4 5 6 7 8 9 內部深層的 p10 11 12 13 14 用途 清除,重置預設樣式 1 用途 重置,清除預設樣式 2 a 6 ul 通過id名選中元素 語法 id名 和id名緊緊書寫 id名命名規則 htm...

CSS的簡介及其選擇器

基本語法檢視文字內容 檢視文字內容 檢視文字內容 檢視文字內容 檢視文字內容 檢視文字內容 檢視文字內容 檢視文字內容 檢視文字內容 檢視文字內容 檢視css的效果 檢視css的效果 檢視css的效果 zhangsan 23 選擇所有標籤1.未連線 a link 2.已經訪問鏈結 a visited...

css選擇器 CSS選擇器總結

在前不久的專案中,實習小妹妹在乙個全域性的樣式中使用了下面這個css選擇器 content 對應的html結構大致是 實習妹子大致的意思是想要讓content下的子元素div的高度100 但是貌似她沒有真正理解first child的意義,從而導致這個全域性的樣式讓 所有頁面都出現了問題,然後我就只...