HTML CSS 學習筆記三 CSS選擇器

2021-10-03 05:49:55 字數 2142 閱讀 6785

*


div


span


p
.center


#center


"center">段落居中
兩個選擇器之間不加空格或符號

選擇器1選擇器2選擇器3
被選中的元素需要同時滿足所有選擇器

選擇器1，選擇器2，選擇器3
只要符合其中乙個選擇器就會被選中

兩個選擇器之間用空格隔開

祖先元素 後代元素 後代元素
直接後代選擇器

選擇器1>選擇器2
選擇父元素為選擇器1的所有選擇器2元素

[target]


//選擇帶有 target 屬性的所有元素


[target=_blank]


//選擇 target="_blank" 的所有元素


[title~=flower]


//選擇 title 屬性包含單詞 "flower" 的所有元素。
css 屬性選擇器 *=, |=, ^=, $=, *= 的區別

元素1 + 元素2
選擇緊接在元素1後乙個的元素2，元素1和元素2擁有共同的父元素

元素1 ~ 元素2
選擇在元素1後所有的元素2，元素1和元素2擁有共同的父元素

錨偽類

a:link


/*未訪問的鏈結 */


a:visited


/* 已訪問的鏈結 */


a:hover


/* 滑鼠移動到鏈結上 */


a:active


/* 選定的鏈結 */
:first-child 偽類

p:first-child


/*選擇第乙個p元素*/


li:last-child


/*選擇最後乙個li元素*/
:before 和 :after

p:before


/*在每個 元素的內容之前插入內容*/


p:after


/*在每個 元素的內容之後插入內容*/
p::before


tudou::before


tudou:hover::before


. clearfix:after


.clearfix:before, .clearfix:after


.clearfix:after
否定偽類

元素1:not(元素2)


/*選擇所有元素1但是元素2的除外的每個元素*/
nth-child

**演示

選擇滑鼠指標浮動在上面的元素權值*

0標籤1類

10屬性

10偽類

10id

100important

1000

選擇器的權值加在一起，大的優先；權值相同，後定義的優先

優先順序排序：

important > 內聯 > id > 類/偽類/屬性 > * > 繼承

HTMLCSS學習筆記（十一） CSS統籌

css層疊指的是樣式的優先順序，當產生衝突時以優先順序高的為準。css的乙個主要特徵就是繼承，它是依賴於祖先 後代的關係的。繼承是一種機制，它允許樣式不僅可以應用於某個特定的元素，還可以應用於它的後代。整站裡相同的css樣式提取到乙個樣式表裡，各個頁面呼叫相同的樣式檔案即可。較大的情況下一般會把 的...

HTML CSS筆記 CSS高階

我們可以使用css樣式為網頁中的文字設定字型 字型大小 顏色等樣式屬性。語法 body 這裡注意不要設定不常用的字型，因為如果使用者本地電腦上如果沒有安裝你設定的字型，就會顯示瀏覽器預設的字型。因為使用者是否可以看到你設定的字型樣式取決於使用者本地電腦上是否安裝你設定的字型。現在一般網頁喜歡設定 微...

HTML CSS學習筆記

利用標籤中style屬性來改變每個標籤的顯示樣式 適用於單個標籤的樣式修改。不靈活 this is p tag 內嵌形式 可用於同類標籤的樣式統一修改 依然不夠靈活 表示後面的所有table中的文字預設顏色如我所設定。前提是已經存在乙個定義好的css檔案，網頁的一部分樣式需要用到，那麼可以採用這種方...