DHTML【7】--CSS
本節將要介紹CSS的選擇器，CSS有三種常用的選擇器，還有三種擴展選擇器，說到選擇器，那么選擇器是做什么用的呢？
上一節我們介紹CSS常用屬性的時候，我們都是通過在標簽內定義Style屬性來介紹的，但是如果Style中的屬性有很多，并且我們還要把相同類型的標簽用同一個CSS樣式來美化，我們總不能Copy代碼吧，首先頁面太亂，再者代碼量大，在大型的網站開發中會影響執行效率，最后自己操作起來也很麻煩，遇到這個問題，我們改怎么解決呢？
這就是選擇器要做的事情，我們可以先定義好一個樣式，然后再指定給那些需要美化的標簽，這樣難道不好嗎？好，從美學角度講，一個頁面的同類事物只有一個風格會給用戶整體舒服感，那么選擇器該怎么用呢？下面先請看下圖：
此圖看和想5分鐘，好好體會一下。了解了分類和用途之后，下面我們就結合代碼，看看你的體會對嗎？
1.標簽選擇器
<html>
<head>
<styletype="text/css">
div{background:#FF0000}
</style>
</head>
<body>
<div >我是div</div>
<div >我也是div</div>
<p>我是p</p>
<p>我也是p</p>
<inputtype="text" value="我是TXT"/>
</body>
</html>
在瀏覽器中查看發現所有的div標簽全被美化了，其他標簽都是默認狀態，<style type="text/css"></style>這段代碼可以先不用管，下一節會介紹，主要看紅色標記的部分，標簽選擇要寫在head標簽內，寫法格式要好好掌握。
2.類選擇器
<html>
<head>
<styletype="text/css">
.waring{Blue;}< /span>
.highlight{font-size:xx-large;cursor:help;}
</style>
</head>
<body>
<div>
<h1>我是h1</h1>
<h2>我是h2</h2>
<h3 class="highlight">我是h3</h3>
</div>
</body>
</html>
在瀏覽器中查看發現，只有在class屬性被定義的標簽被相應美化了，其他標簽仍為默認樣式，類選擇器的名稱是自定義的。
3.ID選擇器
<html>
<head>
<styletype="text/css">
#myTxt
{
?font-size:36px;
?background-color:#00ff00;
}
</style>
</head>
<body>
<div>
<p>我是p</p>
<input id="myTxt" type="text"value="我是text"/>
</div>
</body>
</html>
ID選擇器和我們平時開發取對象很相似，最具有針對性。
對于以上的三種選擇器，三種選擇器可以結合使用，但是瀏覽器會給他們排個優先級，就是標簽的樣式被定義多次，該顯示哪個樣式，瀏覽器會其中優先級最高的樣式，樣式優先級：ID>class>標簽。
4.關聯選擇器
<html>
<head>
<styletype="text/css">
div h1{background:#00ff00}
</style>
</head>
<body>
<div>
<p>我是p</p>
<h1>我是h1</h1>
</div>
<h1>我也是h1</h1>
</body>
</html>
在瀏覽器中查看，我們發現，只有div標簽內的h1標簽被修飾了，div標簽內的其他標簽，甚至div外的h1標簽都沒有被修飾，這就是關聯組合器的作用，神奇吧。
5.組合選擇器
<html>
<head>
<styletype="text/css">
div,h1,p{background:#00ff00}
</style>
</head>
<body>
<div>我是div</div>
<h1>我也是h1</h1>
<p>我是p</p>
<h2>我是h2</h2>
</body>
</html>
在瀏覽器中查看，我們會發現，只有div,h1,p這三種標簽被修飾了，其他標簽沒有被修飾，這也是標簽選擇器的組合用法，達到頁面效果統一。
6.偽元素選擇器
<html>
<head>
<styletype="text/css">
?a:active{color:Green};
?a:hover{cursor:help};
?a:link{color:Red};
?a:visited{color:Blue};
</style>
</head>
<body>
<ahref="www.baidu.com">百度網首頁</a>
</body>
</html>
這是我介紹的最后一個選擇器了，上面代碼在瀏覽器中查看，發現超鏈接默認的顏色變為了綠色，鼠標放上去的時候鼠標指針形狀為問號幫助樣式，當我們鼠標按下時超鏈接的顏色變為紅色，訪問完再回到頁面，發現超鏈接的顏色變為藍色，我說完這些你也大概知道上面的代碼是什么意思了，為選擇器不僅可以用于a標簽，還可以用于p等標簽，具體怎么用就去查幫助文檔吧，怎么查呢？
DHTML->HTML元素->a標簽->樣式。
好了，關于選擇器我就介紹到這里，之所以舉這么簡單的例子，是因為我主要講的是原理，不想因為初學者突然看到其他難點而忽略了重點。好了，本節就到這里，下一節將繼續HTML與CSS的結合方式。
轉載于:https://blog.51cto.com/jhq0113/1264543
總結
以上是生活随笔為你收集整理的DHTML【7】--CSS的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Nagios安装与配置
- 下一篇： 通过java.util.concurre