CSS學習（持續更新）

學習css的過程中遇到的一些值得留下筆記的地方~

1.樣式衝突：

特殊性：id>class>元素名本身（如元素p）；

順序：特殊性相同時，後出現的優先順序高；

重要性important：在樣式後加 !important 提高樣式重要性，這樣在遇到樣式衝突時，網頁將使用有important的樣式，而不是後出現的樣式。

tip：載入外部樣式表時若不同檔案中有顯示宣告產生衝突，則後面的檔案中的規則優先順序更高。

2.外部樣式表的匯入方式：

指定乙個只用於特定輸出的樣式表，如只用於列印，或只用於在瀏覽器中檢視螢幕。例如，可建立乙個具有列印和螢幕版本共有特徵的通用樣式表，再建立單獨的列印樣式表和螢幕樣式表，分別包含只用於列印的屬性和只用於螢幕顯示的屬性。

使用方法：

1. 在link或style中新增：

2. 在樣式表中使用@media規則：media print;

4.萬用字元*：

例： * 讓每個元素都有乙個紅色邊框。

萬用字元匹配範圍廣，會讓瀏覽器載入速度變慢，要謹慎使用。

5.子選擇器：

.classname p這個樣式會對使用了classname這個類的元素的所有元素後代的p產生影響（不僅僅是對於子元素，還有子子元素等），若只想p的樣式作用於子元素（而不作用於子子元素、子子子元素），那麼使用.classname > p。

6.同胞結合符：

相鄰同胞結合符：同胞元素即同乙個父元素的子元素。相鄰同胞結合符用+表示，用法為.classname p+p 即p之後相鄰的p元素都有classname的樣式；

普通同胞結合符：.classname h1~h2不管是否相鄰，同一父元素的h1後面的h2元素有classname的樣式。

//需要測試第乙個元素是否擁有樣式

7.偽類和偽元素：

偽類：應用於一組html元素，無需在html**中用類標記它們（不用寫成class=」「就可以作用於html元素上，起到了class的功能但是不是class，所以叫偽類）。

:first-child

:last-child

用法：li:first-child，

選擇某元素的第乙個或最後乙個子元素進行格式化。

偽元素：html中不存在的元素，例如定義第乙個字母時並沒有在html中標記，該字母（::first-letter）是另乙個元素的部分內容。

區分：

偽類 :first-child :link :hover 等用單引號；

偽元素 ::first-line ::first-letter ::before ::after （一共四個）用雙引號。

8.按屬性選擇元素：

p[class] 所有有class的p的顏色都改為紅色；

p[class=」classname」] class名字為classname的p；

p[class~=」classname」] class被分為多個單詞，其中有乙個是classname；

不一定是class，只要是元素屬性都行。

[attribute] 用於選取帶有指定屬性的元素。

[attribute=value] 用於選取帶有指定屬性和值的元素。

[attribute~=value] 用於選取屬性值中包含指定詞彙的元素。

[attribute|=value] 用於選取帶有以指定值開頭的屬性值的元素，該值必須是整個單詞。

[attribute^=value] 匹配屬性值以指定值開頭的每個元素。

[attribute$=value] 匹配屬性值以指定值結尾的每個元素。

[attribute*=value] 匹配屬性值中包含指定值的每個元素。

9.透明度：

opacity是不繼承的，但是！opacity值小於1的元素的子元素也會受到影響，但這些子元素的opacity值仍然為1。

CSS學習（持續更新）

css總結（持續更新）

CSS3學習站點，持續更新

css部分細節持續更新

CSS學習（持續更新）

css總結（持續更新）

CSS3學習站點，持續更新

css部分細節 持續更新

相關推薦

css部分細節持續更新