欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

css選擇器_動力節(jié)點Java學院整理

  發(fā)布時間：2017-06-23 10:40:07   作者：polk6   我要評論
要使用css對HTML頁面中的元素實現(xiàn)一對一，一對多或者多對一的控制，這就需要用到CSS選擇器，這篇文章主要介紹了css選擇器，有興趣的可以了解一下

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

Id選擇器

格式

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

示例

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

Class 類選擇器

格式

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

示例

 .postTitle {background-color: Green;}

元素(標簽)名稱選擇器

格式

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

示例

h2 {background-color:Green;}

復合選擇器

格式

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

示例

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

層次選擇器

格式

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

示例

① 父選擇器為元素

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

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

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

 

偽類選擇器

格式

其他選擇器   偽類選擇器

說明

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

①a:link 選擇所有未被訪問的鏈接

②a:visited 選擇所有已被訪問的鏈接

③a:active  選擇活動鏈接

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

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

示例

1.若不想a鏈接在訪問后改變元素，可以把a標簽的未被訪問和已被訪問設(shè)為同一種顏色

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

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

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

 

屬性選擇器

格式

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

說明

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

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

示例

1) 匹配只讀的textarea標簽

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

2) 指定類名以及多屬性

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

樣式調(diào)用方式

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

外部樣式表

存放方式

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

引用方式 

在HTML頁面的<head></head>節(jié)點里，添加<link />標簽：

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

應用場景

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

內(nèi)部樣表

存放方式

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

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

使用場景

單個page特有的樣式。

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

存放方式

元素的Style屬性里。

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

樣式的優(yōu)先級

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

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

非同級引用

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

優(yōu)先級對比

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

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

示例

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

input標簽的width屬性，實際為120px;

同級引用

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

優(yōu)先級對比

外部樣式表、內(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>

顯示圖片：

 

相關(guān)文章

最新評論