腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

css選擇器_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理

發(fā)布時(shí)間：2017-06-23 10:40:07 作者：polk6

我要評(píng)論

要使用css對(duì)HTML頁(yè)面中的元素實(shí)現(xiàn)一對(duì)一，一對(duì)多或者多對(duì)一的控制，這就需要用到CSS選擇器，這篇文章主要介紹了css選擇器，有興趣的可以了解一下

語(yǔ)法結(jié)構(gòu)

Id選擇器

格式

#id ：#+元素的id；id是區(qū)分大小寫。

示例

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

Class 類選擇器

格式

.ClassName ：.+Class類的名稱；類名是區(qū)分大小寫。

示例

 .postTitle {background-color: Green;}

元素(標(biāo)簽)名稱選擇器

格式

元素名稱：元素的名稱不區(qū)分大小寫。

示例

h2 {background-color:Green;}

復(fù)合選擇器

格式

元素名稱1,元素名稱2,#id,.ClassName ：可以根據(jù)元素的名稱、id、類名，使符合條件的元素共同擁有樣式;各選擇器條件要以分號(hào)(,)隔開(kāi)。

示例

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

層次選擇器

格式

父選擇器子選擇器：滿足父選擇器下的子選擇器條件；兩者中間用空格隔開(kāi)。

示例

① 父選擇器為元素

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

② 父選擇器可以為類、Id選擇器，子選擇器也可以。

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

偽類選擇器

格式

其他選擇器偽類選擇器

說(shuō)明

行為選擇器是以 : 開(kāi)頭，后面跟著偽類名稱。主要有5個(gè)(CSS1和2)：

①a:link 選擇所有未被訪問(wèn)的鏈接

②a:visited 選擇所有已被訪問(wèn)的鏈接

③a:active 選擇活動(dòng)鏈接

④input:hover 鼠標(biāo)懸停上方的元素

⑤input:focus 獲取到焦點(diǎn)的元素

示例

1.若不想a鏈接在訪問(wèn)后改變?cè)?，可以把a(bǔ)標(biāo)簽的未被訪問(wèn)和已被訪問(wèn)設(shè)為同一種顏色

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

2.元素的鼠標(biāo)懸停(進(jìn)入)：如"登錄"按鈕的變色。

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

屬性選擇器

格式

元素選擇器[屬性名稱="屬性值"]

說(shuō)明

1) 可在其他選擇器上，再添加對(duì)屬性的匹配。

2) 若要元素同時(shí)滿足多個(gè)屬性，可在屬性選擇器后面進(jìn)行追加：元素選擇器[屬性名稱1="屬性值"][屬性名稱2="屬性值"]

示例

1) 匹配只讀的textarea標(biāo)簽

textarea[readonly="readonly"]{ background-color: #EBEBEB;}

2) 指定類名以及多屬性

 .readOnlyBg input[type="text"][readonly="readonly"]{ background-color: #EBEBEB;}

樣式調(diào)用方式

樣式可以存放在一個(gè)專門存放樣式的文件里(外部樣式表)、HTML頁(yè)面的<head></head>里(內(nèi)部樣式表)、元素的Style屬性里(內(nèi)聯(lián)樣式)。

外部樣式表

存放方式

存放在專門的一個(gè)樣式表里。以css為后綴的文件。

引用方式

在HTML頁(yè)面的<head></head>節(jié)點(diǎn)里，添加<link />標(biāo)簽：

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

應(yīng)用場(chǎng)景

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

內(nèi)部樣表

存放方式

在HTML頁(yè)面的<head></head>節(jié)點(diǎn)里，添加<style type="text/css" ></style> 腳本。

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

使用場(chǎng)景

單個(gè)page特有的樣式。

內(nèi)聯(lián)樣式

存放方式

元素的Style屬性里。

<input type="text" style="background-color:Blue;" value="input1"/>

樣式的優(yōu)先級(jí)

當(dāng)一個(gè)元素附加許多級(jí)樣式時(shí)，比如：外聯(lián)樣式包含此元素、內(nèi)聯(lián)樣式也包含此元素等，樣式采用的是并集方式。

若有交集的元素，將按以下的情況決定采用哪個(gè)樣式屬性：

非同級(jí)引用

外部樣式表、內(nèi)部樣式表、內(nèi)聯(lián)樣式都設(shè)置了此元素的某個(gè)相同樣式屬性。

優(yōu)先級(jí)對(duì)比

內(nèi)聯(lián)樣式 > 內(nèi)部樣式表 > 外部樣式表

對(duì)相同的樣式屬性，其值是獲取優(yōu)先級(jí)最高的。

示例

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

input標(biāo)簽的width屬性，實(shí)際為120px;

同級(jí)引用

在外部樣式表或內(nèi)部樣式表里多個(gè)樣式選擇器包含了此元素。

優(yōu)先級(jí)對(duì)比

外部樣式表、內(nèi)部樣式表情況下：Id選擇器 > class 類選擇器 >元素選擇器。

內(nèi)聯(lián)樣式情況下：采用后面同屬性樣式的值。

示例

<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>

顯示圖片：