The id selector uses the id attribute of an HTML element to select a specific element.
id selector is used to select one unique element!
Front
1,ID 选择器前面有一个 # 号 - 也称为棋盘号或井号
2,*#intro {font-weight:bold;}#intro {font-weight:bold;}效果将是一样的
3,实际 ID 选择器的例子:
<p id="intro">This is a paragraph of introduction.</p>
4,#mostImportant {color:red;background:yellow;}
这个规则会与以下各个元素匹配(这些元素不能在同一个文档中同时出现,因为它们都有相同的 ID 值):
<h1 id="mostImportant">This is important!</h1>
<em id="mostImportant">This is important!</em>
<ul id="mostImportant">This is important!</ul>
5,<html>
<head>
<style type="text/css">
#mostImportant {color:red; background:yellow;}
</style>
</head>
<body>
<h1 id="mostImportant">This is important!</h1>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>...</p>
</body>
</html>
Back
all <p> elements will be center-aligned, with a red text color
Front
p {
color: red;
text-align: center;
}
Back
如果您希望把包含标题(title)的所有元素变为红色,可以写作:
Front
*[title] {color:red;}
Back
CSS selector
Front
Back
css基本语法
Front
selector {
property: value;
}
Back
all <p> elements will be center-aligned, with a red text color):
Front
p {
text-align: center;
color: red;
}
Back
background-color 属性
Front
body {
background-color: lightblue;
}
Back
CSS comments
Front
/I'm a comment!/
Back
Hex-colors
Front
#p1 {background-color: #ff0000;} / red /
#p2 {background-color: #00ff00;} / green /
#p3 {background-color: #0000ff;} / blue /
Back
RGB Colors
Front
red, green, blue
#p1 {background-color: rgb(255, 0, 0);} / red /
#p2 {background-color: rgb(0, 255, 0);} / green/
#p3 {background-color: rgb(0, 0, 255);} / blue /
Back
Front
a valid color name - like "red"
a HEX value - like "#ff0000"
an RGB value - like "rgb(255,0,0)"