CSS basic tutorial basic selector
CSS Selector
1. Basic Selector
(1) "*" selector: wildcard
Description: will match All HTML tags, all tags will change.
Grammar: *{ color:red; }
Note: Use "*" as little as possible , because IE6 does not support it.
<!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)打盡”，人們?cè)诓恢挥X中已經(jīng)融入了互聯(lián)網(wǎng)生態(tài)，互聯(lián)網(wǎng)讓世界變成了“雞犬之聲相聞”的地球村。</p>
</body>
</html>(2) Tag selector
Description : Will match the specified HTML tag.
Syntax: h1{ color:red; }
Note: The CSS tag selector has the same name as the HTML tag, but angle brackets cannot be added.
<!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)打盡”，人們?cè)诓恢挥X中已經(jīng)融入了互聯(lián)網(wǎng)生態(tài)，互聯(lián)網(wǎng)讓世界變成了“雞犬之聲相聞”的地球村。</p>
</body>
</html> (3) class selector (class selector) - class selector is the most frequently used
Description: Add styles to a type of HTML tags. The "one class" referred to here is: each HTML tag has a class attribute, and the value of class is the same. The class attribute is a public attribute that every HTML tag has.
The name of the class selector must start with "." and be limited to the value of the class attribute of the HTML tag. For example: .box{ color:red; }
Note: The value of the class attribute of the HTML tag cannot start with a number.
<!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)打盡”，人們?cè)诓恢挥X中已經(jīng)融入了互聯(lián)網(wǎng)生態(tài)，互聯(lián)網(wǎng)讓世界變成了“雞犬之聲相聞”的地球村。</p>
</body>
</html>(4) id selector
Description : Add style to the element with the specified id.
Note:
The value of the id attribute of the HTML tag in the web page must be unique.
Every HTML tag has a public attribute of id.
The id attribute is generally used for JS, not for you to add styles. The class attribute can only be used for CSS, not JS.
The name of the id selector must start with "#", followed by the value of the id attribute of the HTML tag.
<!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:blue;
background-color:#88ff99;
}
.NO1{
color:red;
background-color:#88ff66;
}
</style>
</head>
<body>
<h1 id="NO1">習(xí)近平心中的互聯(lián)網(wǎng)</h1>
<p class="NO1">互聯(lián)網(wǎng)是20世紀(jì)最偉大的發(fā)明，它正在將人類“一網(wǎng)打盡”，人們?cè)诓恢挥X中已經(jīng)融入了互聯(lián)網(wǎng)生態(tài)，互聯(lián)網(wǎng)讓世界變成了“雞犬之聲相聞”的地球村。</p>
</body>
</html>
