css繼承樣式怎麼控制 用選擇器

2022-03-31 03:14:00 字數 2764 閱讀 5597

css樣式繼承性是指下級的樣式屬性會繼承上級的屬性,通俗點講是兒子來繼承父親的屬性,比如li會繼承ul的屬性。css繼承原理是我們設定上級(父級)的css樣式,上級(父級)及以下的子級(下級)都具有此屬性。

哪些css樣式屬性是可以繼承的?

azimuth, border-collapse, border-spacing,caption-side, color, cursor, direction, elevation,empty-cells, font-family, font-size, font-style,font-variant, font-weight, font, letter-spacing,line-height, list-style-image, list-style-position,list-style-type, list-style, orphans, pitch-range,pitch, quotes, richness, speak-header, speaknumeral,speak-punctuation, speak, speechrate,stress, text-align, text-indent, texttransform,visibility, voice-family, volume, whitespace,widows, word-spacing
其中可以繼承的文字屬性為font-family, font-size, font-style,font-variant, font-weight, font, letter-spacing,line-height

可以繼承的列表相關屬性為list-style-image, list-style-position,list-style-type, list-style

css 派生選擇器:通過依據元素在其位置的上下文關係來定義樣式,你可以使標記更加簡潔。比方說,你希望列表中的 strong 元素變為斜體字,而不是通常的粗體字,可以這樣定義乙個派生選擇器:

li strong
在上面的例子中,只有 li 元素中的 strong 元素的樣式為斜體字,無需為 strong 元素定義特別的 class 或 id,**更加簡潔。

後代選擇器(descendant selector)又稱為包含選擇器。後代選擇器可以選擇作為某元素後代的元素。假設有乙個文件,其中有乙個邊欄(sidebar),還有乙個主區(maincontent)。邊欄的背景為藍色,主區的背景為白色,這兩個區都包含鏈結列表。不能把所有鏈結都設定為藍色,因為這樣一來邊欄中的藍色鏈結都無法看到。

div.sidebar div.sidebar a:link div.maincontent div.maincontent a:link
有關後代選擇器有乙個易被忽視的方面,即兩個元素之間的層次間隔可以是無限的。例如,如果寫作 ul em,這個語法就會選擇從 ul 元素繼承的所有 em 元素,而不論 em 的巢狀層次多深。

<

ul>

<

li>

list item 1

<

ol>

<

li>list item 1-1

li>

<

li>list item 1-2

li>

<

li>

list item 1-3

<

ol>

<

li>list item 1-3-1

li>

<

li>list item <

em>1-3-2

em>

li>

<

li>list item 1-3-3

li>

ol>

li>

ol>

li>

<

li>list item 2

li>

ul>

子元素選擇器(child selectors),與後代選擇器相比,只能選擇作為某元素子元素的元素。如果您不希望選擇任意的後代元素,而是希望縮小範圍,只選擇某個元素的子元素,請使用子元素選擇器(child selector)。例如,如果您希望選擇只作為 h1 元素子元素的 strong 元素,可以這樣寫:

h1 > strong
這個規則會把第乙個 h1 下面的兩個 strong 元素變為紅色,但是第二個 h1 中的 strong 不受影響:

<

h1>this is <

strong

>very

strong

>

<

strong

>very

strong

> important.

h1>

<

h1>this is <

em>really <

strong

>very

strong

>

em> important.

h1>

css相鄰兄弟選擇器(adjacent sibling selector)可選擇緊接在另一元素後的元素,且二者有相同父元素。如果需要選擇緊接在另乙個元素後的元素,而且二者有相同的父元素,可以使用相鄰兄弟選擇器。例如,如果要增加緊接在 h1 元素後出現的段落的上邊距,可以這樣寫:

h1 + p

CSS 樣式 選擇器 繼承 tag

1.css主要是用於定義html內容在瀏覽器內的顯示樣式,如文字大小 顏色 字型加粗等,如 2.內聯式css樣式表就是把css 直接寫在現有的html標籤中,如下面 這裡文字是紅色。3.嵌入式css樣式,就是可以把css樣式 寫在標籤之間 4.外部式css樣式 也可稱為外聯式 就是把css 寫乙個單...

CSS樣式選擇器

1.css 選擇器 1 標記選擇器 選擇器 用來指定確定標記的樣式 如 類別選擇器 class 類別名稱 如 對應的 class 選擇器 id選擇器 id id選擇器 如 對應的 id選擇器1id 選擇器2 2.集體宣告 對應的 集體宣告 h4集體宣告 h5集體宣告 p1集體宣告 p2集體宣告 p3...

CSS樣式選擇器

樣式選擇器 每一條css樣式宣告 定義 由兩部分組成,形式如下 選擇器類選擇器 以英文圓點開頭,不可以使用數字或中文起名 使用方法 1.使用class 類選擇器名 為標籤設定乙個類,如下 膽小如鼠 2.設定類選擇器css樣式,如下 stress id選擇器 id選擇器類似於類選擇器 1.為標籤設定i...