CSS 都有哪些選擇器？
CSS的選擇器
1、根據HTML的標記來修飾，
<style>
p{
color:#FFOOFF;
text-decoration:underline;
font-size:25px;
font-weight:bold
}
h1{
color:red;
font-size:30px;}
</style>
所有的p標籤按style中p宣告的樣式來修飾，h1標籤按h1宣告的樣式來修飾
2、類別選擇器，按照類來修飾
<style>
.Class1{
color:#FFOOFF;
text-decoration:underline;
font-size:25px;
font-weight:bold
}
.Class2{
color:red;
font-size:30px;}
</style>
<body>
<p class="Class1">選擇類別為class1</p>
<p class="Class2">選擇類別為class2</p>
<p class="Class3">選擇類別為class3</p>
<body/>
這樣相同的標籤可以有各自的風格
3、混合選擇器
<style>
.Class1{
color:#FFOOFF;
text-decoration:underline;
font-size:25px;
font-weight:bold
}
.Class2{
color:red;
font-size:30px;}
.Class3{
text-decoration:underline;
font-weight:bold
}
p{
color:#FFOOFF;
text-decoration:underline;
font-size:25px;
font-weight:bold
}
h1{
color:red;
font-size:30px;}
h1.Class1{
color:black;
font: 12px;
}
</style>
<body>
<h1>h1的標籤修飾</h1>
<h1 class="Class1">選擇類別為h1.class1</h1>
<p>p標籤修飾</p>
<p class="Class1">選擇類別為class1</p>
<p class="Class2">選擇類別為class2</p>
<p class="Class2 Class3">選擇類別為class2 class2 一起修飾</p>
<body/>
4、Id選擇器
與類別選擇器類似
<style>
#Id1{
color:#FFOOFF;
text-decoration:underline;
font-size:25px;
font-weight:bold
}
#Id2{
color:red;
font-size:30px;}
##Id3{
color:blue;
font-size:50px;}
</style>
<body>
<p id="Id1">選擇類別為Id1</p>
<p id="Id2">選擇類別為Id2</p>
<p id="id3">選擇類別為Id3</p>
<body/>
HTML中宣告Id時不能重複, 如下
<p id="Id1">選擇類別為Id1</p>
<p id="Id1">選擇類別為Id1</p>
這樣在CSS中可能沒有問題，但是Id還有其他作用，例如在Js中GetElementById()時則會出錯
---------------------
作者：Janelare
來源：CSDN
原文：https://blog.csdn.net/l09120204/article/details/52910086
版權宣告：本文為博主原創文章，轉載請附上博文連結！