點擊下載
本文文檔

當前位置：首頁 - 科技 - 知識百科 - 正文

CSS選擇器總結-zhongJaywang

來源：懂視網責編：小采時間：2020-11-27 16:44:24

CSS選擇器總結-zhongJaywang

CSS選擇器總結-zhongJaywang:最近在www.w3school.com.cn學習了CSS選擇器，下面做一個知識匯總。部分源碼來自www.w3school.com.cn！插入樣式表的方法有三種：第一種：外部樣式表 head> link rel=stylesheet type=text/css href=mystyle.css

推薦度：

點擊下載本文 文檔為doc格式

導讀CSS選擇器總結-zhongJaywang:最近在www.w3school.com.cn學習了CSS選擇器，下面做一個知識匯總。部分源碼來自www.w3school.com.cn！插入樣式表的方法有三種：第一種：外部樣式表 head> link rel=stylesheet type=text/css href=mystyle.css

最近在www.w3school.com.cn學習了CSS選擇器，下面做一個知識匯總。部分源碼來自www.w3school.com.cn！

插入樣式表的方法有三種：

第一種：外部樣式表

第二種：內部樣式表

第三種：內聯樣式表

This is a paragraph

CSS基本的選擇器有四種，其它復雜的選擇器都由這四種組合而成

元素選擇器（類型選擇器）
id選擇器
類選擇器
屬性選擇器

選擇器的基礎語法，規則由兩個主要的部分構成：選擇器，以及一條或多條聲明。

//CSS 規則由兩個主要的部分構成：選擇器，以及一條或多條聲明。

selector {declaration1; declaration2; ... declarationN }

//每條聲明由一個屬性和一個值組成。

selector {property: value}

1. 元素選擇器（類型選擇器）

```
h1 {font-family: sans-serif;}
```

同時也可以為XML文檔設置樣式：

XML文檔：




George
John
Reminder
Don't forget the meeting!

CSS樣式：

note
 {
 font-family:Verdana, Arial;
 margin-left:30px;
 }

to
 {
 font-size:28px;
 display: block;
 }

from
 {
 font-size:28px;
 display: block;
 }

heading
 {
 color: red;
 font-size:60px;
 display: block;
 }

body
 {
 color: blue;
 font-size:35px;
 display: block;
 }

2.id選擇器

id 屬性只能在每個 HTML 文檔中出現一次！

HTML代碼：

這個段落是紅色。

這個段落是綠色。

CSS樣式：

#red {color:red;}
#green {color:green;}

3.類選擇器

在下面的 HTML 代碼中，h1 和 p 元素都有 center 類。這意味著兩者都將遵守 ".center" 選擇器中的規則。

This heading will be center-aligned

This paragraph will also be center-aligned.

CSS樣式：

.center {text-align: center}

4.屬性選擇器

css屬性選擇器參考
[attribute]	用于選取帶有指定屬性的元素。
[attribute=value]	用于選取帶有指定屬性和值的元素。
[attribute~=value]	用于選取屬性值中包含指定詞匯的元素。
[attribute\|=value]	用于選取帶有以指定值開頭的屬性值的元素，該值必須是整個單詞。
[attribute^=value]	匹配屬性值以指定值開頭的每個元素。
[attribute$=value]	匹配屬性值以指定值結尾的每個元素。
[attribute=value*]	匹配屬性值中包含指定值的每個元素。

為了更準確的定位HTML元素并對其添加樣式，在上面四種基礎選擇器上面，CSS選擇器還可以分成：分組選擇器，派生選擇器，后代選擇器，子元素選擇器，相鄰兄弟選擇器，偽類和偽元素。

*1.分組選擇器

/* no grouping */
h1 {color:blue;}
h2 {color:blue;}
h3 {color:blue;}
h4 {color:blue;}
h5 {color:blue;}
h6 {color:blue;}

/* grouping */
h1, h2, h3, h4, h5, h6 {color:blue;}

*2.派生選擇器

派生選擇器是通過依據元素在其位置的上下文關系來定義樣式的。

HTML代碼：

我是粗體字，不是斜體字，因為我不在列表當中，所以這個規則對我不起作用

我是斜體字。這是因為 strong 元素位于 li 元素內。
我是正常的字體。

CSS代碼：

li strong {
 font-style: italic;
 font-weight: normal;
 }

*3.后代選擇器

后代選擇器又稱包含選擇器，可以選擇某元素的任意一代的后代元素。

HTML代碼：

This is a important heading

This is a important paragraph.

CSS代碼：

h1 em {color:red;}

*4.子元素選擇器

子元素選擇器只可選擇某元素第一代后代的選擇器。

HTML代碼：

This is very very important.
This is really very important.

CSS代碼：

h1 > strong {color:red;}

*5.相鄰兄弟選擇器

相鄰兄弟選擇器會選擇某一元素緊隨其后的元素，但是前提是他們擁有相同的父級。

eg1:

HTML代碼：


 
This is a heading

 This will be styled.
 This will not be styled.

CSS代碼：

h2 + strong {color:red;}

語法規則是h2和strong之間有一個“＋”，“＋”和前面的h1或者后面的strong之間的空格都是可有可無的。

在以上例子中，第一個strong緊鄰著h2并且他們擁有相同的父級(h1)，所以h2 + strong會選擇到第一個而不會選到第二個.

eg2:

HTML代碼：

 
 
 List item 1 
 List item 2 
 List item 3 
 
  
 List item 1 
 List item 2 
 List item 3

CSS代碼：

li + li {color:red;}

在以上的例子中li+li是選擇緊挨著li后面的第一個

，所以第一個

不會被選擇；而第二個

是緊挨著第一個li的，所有會被選擇；第三個

是緊挨著第二個

的，也會被選擇。

*6偽類

偽類的語法：

selector : pseudo-class {property: value}

CSS 類也可與偽類搭配使用：

selector.class : pseudo-class {property: value}

屬性	描述
:active	向被激活的元素添加樣式。
:focus	向擁有鍵盤輸入焦點的元素添加樣式。
:hover	當鼠標懸浮在元素上方時，向元素添加樣式。
:link	向未被訪問的鏈接添加樣式。
:visited	向已被訪問的鏈接添加樣式。
:first-child	向元素的第一個子元素添加樣式。
:lang	向帶有指定 lang 屬性的元素添加樣式。

超鏈接例子：

a:link {color: #FF0000} /* 未訪問的鏈接 */
a:visited {color: #00FF00} /* 已訪問的鏈接 */
a:hover {color: #FF00FF} /* 鼠標移動到鏈接上 */
a:active {color: #0000FF} /* 選定的鏈接 */

*7偽元素

屬性	描述
:first-letter	向文本的第一個字母添加特殊樣式。
:first-line	向文本的首行添加特殊樣式。
:before	在元素之前添加內容。
:after	在元素之后添加內容。