(2)選擇器:class選擇器、id選擇器、關聯選擇器、組合選擇器、偽元素選擇器
阿新 • • 發佈:2018-12-26
就是制定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>