CSS選擇器(一)

2021-07-28 15:43:25 字數 1767 閱讀 1528

css的規則主要由兩個部分組成:選擇器和一條或多條宣告,**形式表現如下:

selector

選擇器通常就是我們需要改變樣式的html的元素。其中,每條宣告又是由乙個屬性(property)和乙個值(value)組成,屬性與屬性之間通常用分號隔開。**的形式則表現為:

selector

以上是對css規則的簡單概述,接下來的才是這篇文章的重點——css選擇器。

css選擇器分為以下幾大類:

1.通用選擇器:

書寫:*

作用範圍:頁面中的所有元素。

2.元素選擇器:

書寫:元素名

作用範圍:指定的元素下的內容。如div

3.id選擇器:

書寫:#id值

作用範圍:指定具有id值的元素。如#p

4.類別選擇器:

書寫:.類名

作用範圍:具有指定的class值的所有元素內容。如.mark

以上四種是最常用的幾種,但是有時候如果僅用以上幾種選擇器,也並不是很方便,因為它只能針對其所固有的相對應的值。接下來介紹的幾種選擇器主要是針對相關聯的元素內容、

5.並列/過濾選擇器:

書寫:選擇器1選擇器2

作用範圍:選擇可被兩個選擇器同時選中的內容。如p.mark,.mark.product

6.子元素選擇器(後代選擇器):

書寫:選擇器1 選擇器2(選擇器1與選擇器2之間是空格)

作用範圍:選擇可被選擇器1選擇的元素下的所有子元素能被選擇器2選擇的部分。

7.直接子元素選擇器:

書寫:選擇器1>選擇器2

作用範圍:選擇器1的直接子元素,可被選擇器2選中的元素。

相容性問題:ie6不支援。

8.相鄰兄弟選擇器;

書寫:選擇器1+選擇器2

作用範圍:選擇器1和選擇器2所有的元素。值得注意的是:選擇器1和選擇器2是緊挨著的,且有相同的父元素。

8.多選/多組選擇器:

書寫:選擇器1,選擇器2,選擇器3...,選擇器n

作用範圍:選擇可被以上任何選擇器選中的元素。

9.偽類選擇器:

a:link未被訪問的超連結

a:visited被訪問後的超連結

元素:hover滑鼠懸停時的樣式——>ie6只支援a:hover

元素:active當元素被啟用時。

input:focus當元素獲得輸入焦點時——>ie7之前都不支援

元素名:first-child某父元素下,第乙個子元素。比如body下有若干p元素。p:first-child則表示第乙個p元素。

元素名:first-line,文字首行—只能用於塊級元素。如:font.color,background,word-spacing,letter-spacing,text-decoration,vertical-aliogn,

text-transform,line-height,clear

元素名:first-letter,文字首字母—只能用於塊級元素。font.color,background,margin,pading,border,text-decoration,vertical-align(僅當float為none),text-transform,line-height,float,clear

元素名:before在元素的內容前面插入內容。

元素名:after在元素的內容後面插入內容。

元素名:lang向帶有指定lang屬性的元素新增樣式。

css樣式的優先順序:

!important>內聯樣式》#id選擇器》類選擇器/偽類選擇器》元素選擇器》瀏覽器預定義樣式

CSS一 選擇器

一 規範 實現結構 html 樣式 css 行為的分離 js 二 css在html中的宣告 如果直接寫css 如果鏈結css檔案 三 選擇器 1 類選擇器 選擇元素.類名 html檔案 this paragraph will also be center aligned.css檔案 h1.cente...

CSS(一)選擇器

1.什麼是css?cascading style sheet 層疊樣式表 表現層 美化網頁 css發展史 css優勢 2.css基本語法 1 格式選擇器 2 使用樣式 行內樣式 內部樣式 外部樣式 推薦使用 h1這三種方式遵循就近原則。3.選擇器 選擇器的作用 選擇頁面上的某一元素或者某一類元素。1...

CSS選擇器(一)

首先了解下文件結構的關係 在css中有許多選擇器 萬用字元選擇器 可以匹配頁面所有的元素,統一樣式 元素選擇器,選中某個元素為其新增樣式 header偽元素選擇器,在標籤後新增 afte和 before,注 偽元素的display的預設值是inline,設定高度無效,進行display值的更改 in...