CSSの基本チュートリアルの基本セレクター
CSSセレクター
1. 基本セレクター
(1) "*"セレクター: ワイルドカード
: すべての HTML タグに一致します。タグが変わります。
構(gòu)文: *{ color:red; }
注: IE6 はサポートしていないため、「*」はできるだけ使用しないでください。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php.cn</title>
<style type="text/css">
*{
color:red;
}
</style>
</head>
<body>
<h1>習(xí)近平心中的互聯(lián)網(wǎng)</h1>
<p>互聯(lián)網(wǎng)是20世紀(jì)最偉大的發(fā)明，它正在將人類“一網(wǎng)打盡”，人們在不知不覺中已經(jīng)融入了互聯(lián)網(wǎng)生態(tài)，互聯(lián)網(wǎng)讓世界變成了“雞犬之聲相聞”的地球村。</p>
</body>
</html> (2) タグセレクター
Description: 指定された HTML タグと一致します。
構(gòu)文: h1{ color:red; }
注: CSS タグ セレクターは HTML タグと同じ名前ですが、山括弧は追加できません。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php.cn</title>
<style type="text/css">
h1{
color:red;
}
p{
color:blue;
}
</style>
</head>
<body>
<h1>習(xí)近平心中的互聯(lián)網(wǎng)</h1>
<p>互聯(lián)網(wǎng)是20世紀(jì)最偉大的發(fā)明，它正在將人類“一網(wǎng)打盡”，人們在不知不覺中已經(jīng)融入了互聯(lián)網(wǎng)生態(tài)，互聯(lián)網(wǎng)讓世界變成了“雞犬之聲相聞”的地球村。</p>
</body>
</html> (3) クラスセレクター (クラスセレクター) - クラスセレクターは最も頻繁に使用されます
説明: HTML タグのタイプにスタイルを追加します。ここで言う「1つのクラス」とは、各HTMLタグがclass屬性を持ち、classの値が同じであることを意味します。 class 屬性は、すべての HTML タグが持つパブリック屬性です。
クラスセレクターの名前は「.」で始まり、HTML タグの class 屬性の値に限定される必要があります。例: .box{ color:red; }
注: HTML タグの class 屬性の値を數(shù)字で始めることはできません。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php.cn</title>
<style type="text/css">
.NO1{
color:red;
background-color:#88ff66;
}
</style>
</head>
<body>
<h1 class="NO1">習(xí)近平心中的互聯(lián)網(wǎng)</h1>
<p class="NO1">互聯(lián)網(wǎng)是20世紀(jì)最偉大的發(fā)明，它正在將人類“一網(wǎng)打盡”，人們在不知不覺中已經(jīng)融入了互聯(lián)網(wǎng)生態(tài)，互聯(lián)網(wǎng)讓世界變成了“雞犬之聲相聞”的地球村。</p>
</body>
</html> (4) ID セレクター
説明: 指定された ID を持つ要素にスタイルを追加します。
注:
Web ページ內(nèi)の HTML タグの id 屬性の値は一意である必要があります。
すべての HTML タグには id という public 屬性があります。
id 屬性は通常、スタイルを追加するためではなく、JS に使用されます。 class 屬性は CSS にのみ使用でき、JS には使用できません。
ID セレクターの名前は「#」で始まり、その後に HTML タグの id 屬性の値が続く必要があります。
