1. 程式人生 > >HTML 中CSS三種常見的樣式選擇器

HTML 中CSS三種常見的樣式選擇器

1:標籤選擇器

標籤選擇器,是所有帶有某種標籤的都生效。這裡以p為例,也就是所有的帶有p標記的都會這樣的樣式

<html>
<head>
<styletype="text/css">
p{font:"宋體"; color:#FF0000}
</style>
</head>
<body>
<pid="p1">我現在表現的是標籤選擇器</p>
<pid="p2">我也用的是標籤選擇器</p>
<h1>我沒有被任何的選擇器修飾</h1>
</body>
</html>

2:id選擇器,注意id選擇器是唯一的,因為只有id="yy"的才有這種樣式,而一個頁面裡元素的Id必須是唯一的,所以。。。你懂得
id選擇器以#開頭
用法是:id=""

<html>
<head>
<styletype="text/css">
#yy{font:"宋體"; color:#FF0000}
</style>
</head>
<body>
<pid="yy">我現在表現的是id選擇器</p>
<pid="p">我沒有被id選擇器修飾</p>
<h1>我沒有被任何的選擇器修飾</h1>
</body>
</html>

3:類選擇器,
類選擇器以.開頭    只要把元素的class="" 就能表現為這種樣式了
用法是:class=""

<html>
<head>
<styletype="text/css">
.yy{font:"宋體"; color:#FF0000}
</style>
</head>
<body>
<pclass="yy">我現在表現的是類選擇器</p>
<pclass="yy">我沒有被類選擇器修飾</p>
<h1>我沒有被任何的選擇器修飾</h1>
</body>
</html>