標籤：前端 css html
前面說過樣式規則，也知道了樣式規則文法形式為：選取器+聲明塊
如：div{ color：black；padding：10px; } div即表示選取器(此處是元素選取器)，花括弧中的內容就是聲明塊。
選取器用於指定樣式規則可作用於HTML文檔中的哪個或者哪些元素。常見的選取器類型有以下幾種：
1、元素選取器(類型選取器)：匹配選取器的網頁上的任何HTML元素，不考慮這些元素在文檔樹中的位置。
如：p{ background:aqua; color:pink; } 匹配網頁上的任何p元素，不考慮p元素在文檔樹中的位置
2、類別選取器：被用於選擇有某個class屬性的任何HTML元素，文法形式：.類名{屬性：值;}
<head><style type="text/css">.hello{width:100px;height: 100px;background: #eee;color: blue;font-weight: bold;}</style></head><body><span style="white-space:pre"></span><div class="hello">類別選取器</div></body>
同一class屬性值可以再同一頁面出現多次
3、 ID選取器：被用於選擇有某個ID屬性的任何HTML元素，文法形式： #id名{ 屬性：值；}<head><style type="text/css">#hello{width:100px;height: 100px;background: #eee;color: blue;font-weight: bold;}</style></head><body><span style="white-space:pre"></span><div id="hello">ID選取器</div></body>
同一ID屬性值在同一頁面上只能出現一次
4、萬用字元選取器：用於選擇所有元素，文法：*{ 屬性：值}
5、包含選取器：用於選擇文檔的一個元素的後代元素
第一種方法：
<head><style type="text/css">p span{font-weight: bold;color:red;}</style></head><body><p>how <span> are</span> you?</p></body>第二種方法
<head><style type="text/css">p>.sp{font-weight: bold;color:red;}</style></head><body><span style="white-space:pre"></span><p>how <span class="sp"> are</span> you?</p></body>
a:visited{} 用在已訪問的連結的選取器
a:hover{} 用在滑鼠游標放在其上的連結的選取器，其中hover還可以用在別的元素中用於製作在滑鼠游標放在目標上的樣式的編輯
a:active{} 用在獲得焦點(比如：被點擊)的連結上的選取器
<head><style type="text/css">.a:link{color: #000;}.a:visited{color: #ff0;}.a:hover{color:red;}.a:active{color:black;}</style></head><body><a href="#" class="a">點點點</a></body>7、
虛擬元素選取器
:
(1) :first-line 用於一個元素的第一行的選取器
如段落的第一行
<head><style type="text/css">p:first-line{color:red;}</style></head><body><p>hello<br/>world</p></body>只有hello是紅色的
(2) :first-letter 用於一個元素的第一個字元的選取器
如段落的第一個字元
<head><style type="text/css">p:first-letter{color:red;}</style></head><body><p>驀然回首</p></body>只有
驀字是紅色的。
(3) :first-child 用於<body>中第一個是( :first-child)前面的元素的所有內容的選取器
<head><style type="text/css">p:first-child{color:red;}</style></head><body><p>驀然回首</p><p>然後呢？</p></body>
驀然回首是紅色的
<head><style type="text/css">p:first-child{color:red;}</style></head><body><div>歌聲裡</div><p>驀然回首</p><p>然後呢？</p></body>沒有字型內容的顏色是紅色的，
因為<body>中第一個元素是div，而不是pCSS基礎2——選取器
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
