1. 程式人生 > >(2)選擇器:class選擇器、id選擇器、關聯選擇器、組合選擇器、偽元素選擇器

(2)選擇器:class選擇器、id選擇器、關聯選擇器、組合選擇器、偽元素選擇器

就是制定css要作用的標籤,那個標籤的名稱就是選擇器,意為選擇哪個容器
(1)class選擇器,使用的是標籤中的屬性。在一個網頁中可以定義多個style
指定哪個類用”.”

<style>

   div{
       background-color:#F00;
       color:#FF9;
   }
   //制定哪個選擇器,哪個類用這種格式
  div.haha{
       background-color:#3C9;
       color:#FF9;   
   }
   span.haha{
       background-color:#3C9;
       color
:#FF9
; }
</style> <!--若希望所有的選擇器中帶hehe的都是相同效果,可以用.hehe{},這樣就能有效提高程式碼複用性--> <style> .hehe{ background-color:#36F; color:#F69; } <!--.enen:是預定義樣式,可以作用在任何選擇器的類名為enen中,可以實現動態載入 <!-- 比如開始的網頁是一種顯示,當點某個按鈕或其他操作時,該網頁會出現新的效果 --> </style
>
<p class="hehe">這是一個段落2</p>

(2)id選擇器就是標籤中的id屬性

<style type="text/css">

 div#qq{
     background-color:#F39;
     color: #FF3;
 }
 span#qq{
     background-color:#F39;
     color: #FF3;
 }
 </style>
 <style type="text/css">
 #pp{

     background-color:#0FC;
     color
: #F00
; }
</style>

每個標籤都定義了class屬性和id屬性,用於對標籤進行標識,方便對標籤進行操作。
通常id的取值在頁面上是唯一的,因為該屬性除了css使用,還可以被jsp使用。id通常都是為了標識頁面中的一些特定區域使用的
優先順序:標籤選擇器<類選擇器

<!--若只寫b則將頁面的所有b標籤全都改成了這種樣式-->

<!--若只是對span中的b標籤進行格式修改,用span+空格+b -->
span b{
       background-color:#F00;
       color:#FF9  
   }
<span >span<b>區域</b>1</span>

四、組合選擇器
對多個選擇器進行相同樣式設定,選擇器間用“,”隔開

//對.haha選擇器和div中的b選擇器進行樣式修改
<style>
 .haha,div b{
     background-color:#0C0;
     color:#F00;
 }
</style>

五、偽元素選擇器
格式:標籤名:偽元素
(1)超連結
a:link 超連結未點選狀態
a:hover 游標移動到超連結上的狀態
a:active 點選超連結時的狀態
a:visted 被訪問後的狀態
順序:L-V-H-A
(超連結一般預設都有樣式,例如下劃線、點選後文字顏色改變,這些都可以自定義)

<style>
/*
未訪問
*/
a:link{
    color:#906;
    text-decoration:none;
    font-size:18px;
}
 /*
 滑鼠懸停
 */
 a:hover{
    color:#F00;
     font-size:24px;
     }
/*
點選效果
*/

 a:active{
     color:#0F0;
     font-size:36px;
 }
 /*
 訪問後的效果
 */
 a:visted{
     color:#30F;
     text-decoration:line-through;
 }

</style>

</head>

<body>

<a href="http://www.sina.com.cn" target="_blank">偽元素選擇器演示</a>

</body>

(2)
p:first-line 段落的第一行文字
p:first-letter段落中的第一個字母
:focus具有焦點的元素

<style>
p:first-letter{
    font-size:36px;
    color:#F00;

}
p:first-line{
    font-size:18px;
    color:#0F0;
}
input:focus{
    background-color:#F00;
}
</style>