CSS ID選擇器(三)

時間 2019-11-11

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

原文原文鏈接

1、ID選擇器

ID選擇器使用"#"前綴標識符進行標識，後面緊跟指定的元素的ID名稱。css

如html

#box{ width:100px; height:100px;}

元素的ID名稱是惟一的，只能對應於文檔中一個具體的元素。在HTML中，用來構建總體框架的標籤應該定義ID屬性，由於這此對象通常在頁面中都是比較惟一的，固定的，不會重複，如Logo包含框，導航條，主體包含框，版權區域等。框架

2、ID設置頁面佈局

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="css/test4.css"  />
<title>測試ID</title>
</head>

<body>
<div id="header"><!--頭部模塊-->
    <div id="logo"></div><!--網站logo-->
    <div id="banner"></div><!--廣告條-->
    <div id="nav"></div><!--導航條-->
</div>
<div id="main"><!--主體模塊-->
<div id="left"></div><!--左側通欄-->
<div id="content"></div><!--內容-->
</div>
<div id="footer"><!--底部模塊-->
<div id="copyright"></div><!--版權信息-->
</div>
</body>
</html>

@charset "utf-8";
/* CSS Document */

#header{
    margin:0 auto;
    width:960px;
    height:210px;
    border:solid 1px #000000;
}
#logo{
    width:100px;
    height:100px;
    border:solid 1px #000000;
    float:left;
}
#banner{
    margin-left:30px;
    float:left;
    width:800px;
    height:100px;
    border:solid 1px #000000;
}
#nav{
    clear:both;
    margin:0 auto;
    width:800px;
    height:100px;
    border:solid 1px #000000;
}

3、外部ID內部class屬性

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="css/test3.css" />
<title>ID選擇器</title>
</head>

<body>
<div id="father">
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
</div>
</body>
</html>

@charset "utf-8";
/* CSS Document */
/* 父級樣式*/
#father{
    width:500px;
    height:500px;
    border:solid 2px blue;
    margin:5px;
}
/* 經過父級樣式設置父級樣式下的標籤div模式*/
#father div{
    width:100px;
    height:100px;
    border:solid 1px red;
    padding:10px;
    margin:10px;
    background-color:#0000FF;
}
/* 經過父級樣式設置父級樣式下的類*/
#father .child1{
    width:100px;
    height:100px;
    margin:20px;
    padding:10px;
    border:solid 5px #FF00FF;
    background-color:#66FF00;
}
/* 經過父級樣式設置父級樣式下的類*/
#father .child2{
    width:100px;
    height:100px;
    margin:10px;
    padding:10px;
    border:solid 5px #00FF00;
    background-color:#FF0000;
}
/*這裏直接設置類樣式不起做用由於上面經過#father div已經設置過了，這裏的類選擇器優先級小於標籤選擇器*/
.child3{
    width:100px;
    height:100px;
    margin:10px;
    padding:10px;
    border:solid 10px #0000FF;
    background-color:#FF00FF;
}

相關標籤/搜索

每日一句

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