CSS筆記——選擇器（二）
之前作j2ee,超級煩寫css，屬性太多，看來仍是繞回來了！css
一、元素選擇器html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>師然學習筆記</title>
<!--描述：元素選擇器 -->
<style type="text/css">
div{
background-color: red;
font:italic normal bold 14pt normal 楷體_GB2312;
}
</style>
</head>
<body>
<divr>
師然學習JAVA
</div>
</body>
</html>java
效果以下：android
二、ID選擇器學習
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>師然學習筆記</title>
<!--描述：元素選擇器 -->
<style type="text/css">
div{
background-color: red;
font:italic normal bold 14pt normal 楷體_GB2312;
}
#shiran{
width:200px;
height:30px;
background-color: #ddd;
padding:3px
}
</style>
</head>
<body>
<div id="shiran">
師然學習JAVA
</div>
</body>
</html>orm
效果以下：htm
若是隻想對某一id的某一個元素起做用，能夠這樣寫blog
例如：只對多個div元素中的某一個id爲shiran的元素起做用：it
div#shiran{io
width:200px;
height:30px;
background-color: #ddd;
padding:3px
}
三、class選擇器
我之前會叫它「類選擇器」，別人也這麼叫，可是這樣的稱呼並不合適，它和類沒有關係。只是好像把一些屬性放到了一塊兒而已，誰用均可以。
這個class選擇器也和ID選擇器同樣，能夠寫上元素名。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>師然學習筆記</title>
<style type="text/css">
.shiranClass{
background-color: red;
}
</style>
</head>
<body>
<div class="shiranClass">師然學習JAVA</div>
</body>
</html>
效果以下：
四、包含選擇器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>師然學習筆記</title>
<style>
div{
font-family: "微軟雅黑";
background-color: yellow;
}
div.shiran{
font-family: "微軟雅黑";
background-color: red;
}
</style>
</head>
<body>
<div>師然學java</div>
<div>
<section>
<div class="shiran">師然學HD5</div>
</section>
</div>
<p class="shiran">師然學iOS</p>
</html>
效果以下：
五、子選擇器
子選擇器和包含選擇器有點像，區別在於：
包含選擇器的目標元素還要在父元素下就能夠，孫子元素也能夠。
可是子選擇器就必須是兒子，也就是說目標元素必須是直接子元素，孫子都不行。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>師然學習筆記</title>
<style type="text/css">
div{
width: 200px;
height: 30px;
background-color:red ;
margin: 5px;
}
div>.shiran{
width: 300px;
height: 40px;
background-color:yellow ;
margin: 10px;
}
</style>
<body>
<div>我是1號DIV</div>
<div><p class="shiran">我是2號DIV</p></div>
<div><section><p class="shiran">我是3號DIV</p></section></div>
</body>
</html>
效果以下：
六、兄弟選擇器
這個有點難理解，我理解的意思是這樣，目標選擇器做用的位置元素在匹配的某選擇器的 後面。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>師然學習筆記</title>
<style type="text/css">
#android ~ .long{
background-color: #00FF00;
}
</style>
</head>
<body>
<div>
<div>師然學習Java</div>
<div class="long">師然學習H5</div>
<div id="android">師然學習iOS</div>
<p class="long"> 師然學習安卓</p>
<div class="long">師然學習.NET</div>
</div>
</body>
</html>
看代碼，android是個人第一個選擇器，是一個ID選擇器，而後有一個class選擇器叫long.
那麼，再看個人幾個html元素。在ID爲android後面的元素，若是class是long，這個才生效。
- 1. css筆記（二）選擇器
- 2. CSS選擇器筆記
- 3. css筆記 選擇器
- 4. css（二）-- 選擇器
- 5. CSS選擇器（二）
- 6. CSS學習筆記——選擇器——day two
- 7. css選擇器學習筆記
- 8. 前端學習筆記(CSS)——選擇器
- 9. CSS——讀書筆記-02-選擇器
- 10. Selenium(五)：CSS選擇器(二)
- 更多相關文章...
- • XQuery 選擇 和 過濾 - XQuery 教程
- • MySQL選擇數據庫（MySQL USE語句） - MySQL教程
- • Tomcat學習筆記（史上最全tomcat學習筆記）
- • Docker容器實戰(七) - 容器眼光下的文件系統
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. css筆記（二）選擇器
- 2. CSS選擇器筆記
- 3. css筆記 選擇器
- 4. css（二）-- 選擇器
- 5. CSS選擇器（二）
- 6. CSS學習筆記——選擇器——day two
- 7. css選擇器學習筆記
- 8. 前端學習筆記(CSS)——選擇器
- 9. CSS——讀書筆記-02-選擇器
- 10. Selenium(五)：CSS選擇器(二)