css之標籤選擇器
摘要：
標籤（空格分隔）： 標籤選擇器
選擇器定義：
在一個HTML頁面中會有很多很多的元素，不同的元素可能會有不同的樣式，某些元素又需要設定相同的樣式，選擇器就是用來從HTML頁面中查詢特定元素的，找到元素之後就可以為它們設定樣式了。選擇器為樣式規則指定一個作用範圍。
基礎選擇器包含：
...
標籤（空格分隔）： 標籤選擇器
選擇器定義：
在一個HTML頁面中會有很多很多的元素，不同的元素可能會有不同的樣式，某些元素又需要設定相同的樣式，選擇器就是用來從HTML頁面中查詢特定元素的，找到元素之後就可以為它們設定樣式了。選擇器為樣式規則指定一個作用範圍。
基礎選擇器包含：
1.標籤選擇器
2.類選擇器
3.ID選擇器
4.通用選擇器
標籤選擇器：
顧名思義通過標籤名來選擇元素；
例如：
p {
color: red;
}
將所有的p標籤設定字型顏色為紅色。
如下程式碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css的選擇器</title>
<style type="text/css">
/*標籤選擇器*/
/*p{*/
/*color:red;*/
/*font-size:20px;*/
/*}*/
/*span{*/
/*color:yellow;*/
/*font-size:20px;*/
/*}*/
body{
color: gray;
font-size: 12px;
}
</style>
</head>
<body>
<!--
css選擇器
1.標籤選擇器：
標籤選擇器，可以選中所有的標籤，比如div,ul,li,p等等；
不管標籤的藏得多深，都能選中；
選中的是所有的，不是某一個，所以說這個標籤選擇器選中的是"共性"的屬性，而不是"特性"
-->
<div>
<p>我是一個段落</p>
<ul>
<li>
<span>
想想吧！！！
</span>
</li>
</ul>
</div>
<div>
<div>
<div>
<div>
<p>
藏得深的段落
</p>
</div>
</div>
</div>
</div>
</body>
</html>
id選擇器：
通過元素的ID值選擇元素：
例如：
#i1 {
color: red;
}
將id值為i1的元素字型顏色設定為紅色。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css的選擇器</title>
<style type="text/css">
/*id選擇器*/
#box{
color: green;
}
#s1{
color: red;
}
#s2{
color: red;
font-size:16px;
}
</style>
</head>
<body>
<!--
css選擇器
1.標籤選擇器：
標籤選擇器，可以選中所有的標籤，比如div,ul,li,p等等；
不管標籤的藏得多深，都能選中；
選中的是所有的，不是某一個，所以說這個標籤選擇器選中的是"共性"的屬性，而不是"特性"
2.id 選擇器：
#選中id
同一個頁面中id不能重複，
是不是所有的標籤都可以加標籤呢？任何的標籤都可以設定ID，但是ID的命名一定要規範，字母開頭後邊可以數字，下劃線等等；
-->
<div>
<p>我是一個段落</p>
<ul>
<li>
<span>
想想吧！！！
</span>
</li>
</ul>
</div>
<div>
<div>
<div>
<div>
<p>
藏得深的段落
</p>
</div>
</div>
</div>
</div>
<div id="box">
<span id="s1">123</span>
<span id="s2">234</span>
</div>
</body>
</html>
類選擇器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css的選擇器</title>
<style type="text/css">
/*id選擇器*/
#box{
color: green;
}
#s1{
color: red;
}
#s2{
color: red;
font-size:16px;
}
.titile{
color: yellowgreen;
font-size: 12px;
}
.aaaa{
color: red;
}
</style>
</head>
<body>
<!--
css選擇器
1.標籤選擇器：
標籤選擇器，可以選中所有的標籤，比如div,ul,li,p等等；
不管標籤的藏得多深，都能選中；
選中的是所有的，不是某一個，所以說這個標籤選擇器選中的是"共性"的屬性，而不是"特性"
2.id 選擇器：
#選中id
同一個頁面中id不能重複，
是不是所有的標籤都可以加標籤呢？任何的標籤都可以設定ID，但是ID的命名一定要規範，字母開頭後邊可以數字，下劃線等等；
3.類選擇器：
所謂類：.，class 與id非常的相似，可以作用任何標籤，
但是id特性是唯一，但是類是可以重複的，叫做歸類；
同一個標籤中可以攜帶多個類；多個類之間用空格隔開；
-->
<div>
<p>我是一個段落</p>
<ul>
<li>
<span>
想想吧！！！
</span>
</li>
</ul>
</div>
<div>
<div>
<div>
<div>
<p>
藏得深的段落
</p>
</div>
</div>
</div>
</div>
<div id="box">
<span id="s1">123</span>
<span id="s2">234</span>
</div>
<div>
<h3 id="h" class="titile xiaoma egon aaaa">woshi yige sanji bieti </h3>
<h3 class="titile">woshi yige sanji bieti </h3>
<h3 class="titile">woshi yige sanji bieti </h3>
<h3>woshi yige sanji bieti </h3>
<h3>woshi yige sanji bieti </h3>
<h3>woshi yige sanji bieti </h3>
</div>
</body>
</html>
類選擇器：具體的可以檢視程式碼註釋裡面；
如何正確的使用類選擇器及總結：
需求：
段落1：40px,綠色
段落2：綠色，下劃線
段落3：下劃線，40px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>練習</title>
<style>
.lv{
color: green;
font-size: 40px
;
}
.l2{
text-decoration: underline;
color: green;
}
.l3{
font-size: 40px;
text-decoration: underline;
}
</style>
<div>
<p class="lv">段落1</p>
<p class="l2">段落2</p>
<p class="l3">段落3</p>
</div>
</head>
<body>
</body>
</html>
方案2：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>練習</title>
<style>
.lv{
color: green;
}
.un{
text-decoration: underline;
}
.big{
font-size: 40px;
}
</style>
<div>
<p class="lv big">段落1</p>
<p class="lv un">段落2</p>
<p class="un big">段落3</p>
</div>
</head>
<body>
</body>
</html>
總結：不要試圖，用一個類的頁面寫完，這個標籤要攜帶多個類共同設定樣式，
2.每個類要儘可能的小，有公共的概念，能夠讓更多的標籤使用
-
總結：
到底是用id修改樣式還是用class呢？
答案：儘可能的使用class，除非特殊的原因，ID是用來js，也就是說js是通過ID來獲取到標籤的，後邊我們還會說的這個內容；在css中儘量不要用id，（一般的來說，css用class,js用ID，更像是一種約定）