CSS 選擇器【詳解】

時間 2019-11-24

標籤 css 選擇器詳解欄目 CSS 简体版

原文原文鏈接

轉自：http://www.cnblogs.com/polk6/archive/2013/07/19/3142142.html

CSS 選擇器及各樣式引用方式介紹

一個好的界面，是一個Web吸引人們最大的賣點。css

Css ：層疊樣式表 (Cascading Style Sheets),定義瞭如何顯示HTML元素。html

1.選擇器的分類

語法結構：

1.1 Id選擇器

1.1.1 格式

　　　　#id ：#+元素的id；id是區分大小寫。post

1.1.2 示例

#title1 {background-color:Blue;border-width:thick;}

1.2 Class 類選擇器

1.2.1 格式

　　　　.ClassName ：.+Class類的名稱；類名是區分大小寫。url

1.2.2 示例

.postTitle {background-color: Green;}

1.3 元素(標籤)名稱選擇器

1.3.1 格式

　　　　元素名稱：元素的名稱不區分大小寫。spa

1.3.2 示例

h2 {background-color:Green;}

1.4 複合選擇器

1.4.1 格式

　　　　元素名稱1,元素名稱2,#id,.ClassName ：能夠根據元素的名稱、id、類名，使符合條件的元素共同擁有樣式;各選擇器條件要以分號(,)隔開。3d

1.4.2 示例

h2 , #subid , .subclass {background-color:Green;}

1.5 層次選擇器

1.5.1 格式

　　　　父選擇器 子選擇器 ：知足父選擇器下的子選擇器條件；二者中間用空格隔開。code

1.5.2 示例

① 父選擇器爲元素htm

div input{background-color:Green} /* 表示div下的input子元素 */

② 父選擇器能夠爲類、Id選擇器，子選擇器也能夠。blog

.showInfo_tabel  tr{height:20px;} /* 表示table的class爲showInfo_tabel時，下面的tr元素height屬性爲20px  */

1.5.3 展現圖片

1.6 僞類選擇器

1.6.1 格式

　　　　其餘選擇器 僞類選擇器圖片

1.6.2 說明

行爲選擇器是以 : 開頭，後面跟着僞類名稱。主要有5個(CSS1和2)：

①a:link 選擇全部未被訪問的連接

②a:visited 選擇全部已被訪問的連接

③a:active 選擇活動連接

④input:hover 鼠標懸停上方的元素

⑤input:focus 獲取到焦點的元素

1.6.3 示例

1.若不想a連接在訪問後改變元素，能夠把a標籤的未被訪問和已被訪問設爲同一種顏色

a :link,:visited{color:Blue;}

2.元素的鼠標懸停(進入)：如"登陸"按鈕的變色。

.btn_login:hover {background-color: #218fd5;}

2. CSS樣式的存放方式

樣式能夠存放在一個專門存放樣式的文件裏(外部樣式表)、HTML頁面的<head></head>裏(內部樣式表)、元素的Style屬性裏(內聯樣式)。

2.1 外部樣式表

2.1.1 存放方式

存放在專門的一個樣式表裏。以css爲後綴的文件。

2.1.2 引用方式

在HTML頁面的<head></head>節點裏，添加<link />標籤：

<head>
    <link href="../Styles/Site.css" rel="stylesheet" type="text/css" />
</head>

2.1.3 應用場景

多個page頁面共享樣式，如：論壇帖子的排版。

2.2 內部樣表

2.2.1 存放方式

在HTML頁面的<head></head>節點裏，添加<style type="text/css" ></style> 腳本。

<head>
    <title>page標題</title>
    <style type="text/css">
        input{background-color:Green }
    </style>
</head>

2.2.2 使用場景

單個page特有的樣式。

2.3 內聯樣式

2.3.1 存放方式

元素的Style屬性裏。

<input type="text" style="" value="input1"/>

2.3.2 使用場景

特殊場合的特殊元素。

3. 樣式的優先級

當一個元素附加許多級樣式時，好比：外聯樣式包含此元素、內聯樣式也包含此元素等，樣式採用的是並集方式。

如有交集的元素，將按如下的狀況決定採用哪一個樣式屬性：

3.1 非同級引用

外部樣式表、內部樣式表、內聯樣式都設置了此元素的某個相一樣式屬性。

3.1.1 優先級對比

內聯樣式 > 內部樣式表 > 外部樣式表

對相同的樣式屬性，其值是獲取優先級最高的。

3.1.2 示例

<head>
    <style>
        #testinput{width:300px}
    </style>
</head>
<body  >
<input type="text" id="testinput" style="width:120px;" value="input1"/>
</body>

input標籤的width屬性，實際爲120px;

3.2 同級引用

在外部樣式表或內部樣式表裏 多個樣式選擇器包含了此元素。

3.2.1 優先級對比

外部樣式表、內部樣式表狀況下：Id選擇器 > class 類選擇器 >元素選擇器。

內聯樣式狀況下：採用後面同屬性樣式的值。

3.2.2 示例

<head>
    <style>
        input{background-color:Yellow;}
        #testinput{background-color:Red;}
        .showblue{background-color:Blue;}
    </style>
</head>
<body  >
<input type="text" id="testinput" class="showblue" value="input1" style="width:1000px;width:100px"/>
</body>

顯示圖片：

==================================系列文章==========================================

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。