CSS-选择器,id 选择器、元素标签选择器、类选择器、多类选择器、属性选择器
1.id 选择器
id 选择器以 “#” 来定义。
id 属性只能在每个 HTML 文档中出现一次。
<html>
<head>
<style>
#idp{
color: red;
}
</style>
</head>
<body>
<div>
<p id="idp">id 选择器</p>
</div>
</body>
</html>
2.元素标签选择器
html的元素就是最基本的选择器。
<html>
<head>
<style>
p{
color: red;
}
</style>
</head>
<body>
<div>
<p>元素标签选择器</p>
<p>元素标签选择器2</p>
<p>元素标签选择器3</p>
</div>
</body>
</html>
3.类选择器
选择器的样式与元素关联，必须将class指定为一个适当的值,类名前有一个点号（.）
<html>
<head>
<style>
.p1{
color: red;
}
.p2{
color:blueviolet;
}
.p3{
color:blue;
}
</style>
</head>
<body>
<div>
<p class="p1">类选择器</p>
<p class="p2">类选择器2</p>
<p class="p3">类选择器3</p>
</div>
</body>
</html>
4.多类选择器
一个class值中可能包含多个关联选择器，各个词之间用空格分隔。各个词顺序无关紧要。
<html>
<head>
<style>
.p1{
color: red;
}
.p2{
font-size:20px;
}
</style>
</head>
<body>
<div>
<p class="p1 p2">多类选择器</p>
</div>
</body>
</html>
5.属性选择器
根据元素的属性(title、href、alt等)及属性值来选择元素
<html>
<head>
<style>
[title]{
color: red;
}
[href]{
color: blue;
}
[href="http://xxxxxxxxxx.com"]{
color: red;
}
</style>
</head>
<body>
<div>
<h2 title="属性选择器">属性选择器</h2>
<a href="http://xxxxx.com">地址</a>
<a href="http://xxxxxxxxxx.com">地址1,属性及属性值</a>
</div>
</body>
</html>
