标签选择器：直接选择某一种标签，然后全部进行修改样式。
格式：
p{
属性名称：属性值 ；
}
id选择器：给标签设置id属性，然后在css中，对定义了相同id属性的标签进行修饰
格式；
#id值{
属性名称：属性值；
}
注意点：
1.每个HTML标签都有一个属性叫做id属性，每个标签都可以设置id属性
2.在同一个界面中，id属性的值是不能重复的
3.在编写id选择器时，一定要在id名称前面加上#
4.id的名称是有一定规范的，只能由字母和下划线和数字构成，开头不能有数字
5.id名称是不能用html标签的名称，比如不能用<img><p><hr>....
class（类）选择器：给标签设置class属性，然后在css中，对设定了class属性的标签进行修饰
格式：
.class值{
属性名称：属性值；
}
注意点：
1.每个HTML标签都有一个属性叫做class，也就是说每个标签都可以设置类名
2.在同一个页面中，class的名称是可以重复的
3.在编写class选择器时一定要在class名称前面加上
.(点)
4.类名的命名规范跟id名称的命名规范是一样的
5.类名就是专门用来给某些特定的标签设置样式的
6.在HTML每个标签可以同时绑定多个类名，例如：<p class="aa bb">这就给
<p>标签定义了两个类名，分别是aa和bb，用空格隔开
错误写法
<p class="aa" class="bb">
当实际应用时，适当更改写代码的方式，会增加可用性，实例如下：
当需要给三段文字交叉添加三种不同的属性
<sytle>
.para1{
color:red;
font-size:30px;
}
.para2{
text-decoration:underline;
font-size:30px;
}
.para2{
text-decoration:underline;
color:red;
}
</style>
<body>
<p class="para1">第一段文字</p>
<p class="para2">第一段文字</p>
<p class="para3">第一段文字</p>
</body>
观察这段代码会发现，此代码不易维护，当代码行数很多的时候，不利于修改，可以将
color:red;,
text-decoration:,
font-size:30px，这三个属性值分别作为类，然后让<p>标签带两种类即可，操作如下：
<style>
.colorR{
color:red;
}
.line{
text-decoration:underline;
}
.size30{
font-size:30px;
}
</style>
<body>
<p class=".coloR size30">第一段文字</p>
<p class="line size30">第一段文字</p>
<p class="line coloR">第一段文字</p>
</body>
此时，消去了多余代码，更容易通过更改属性值来更改段落样式
后代选择器：后代选择器很简单，就是父级在前中间空格后代在后。
格式：
父 子{
属性名称：属性值；
}
例如：
<style>
div
p{
color:red;
}
</style>
<body>
<div>
<p>我是段落</p>
</div>
</body>
在后代选择中，class和id也是可以互用的，例如给上面的代码添加class和id。
<style>
.aaq
#bb2{
color:red;
}
</style>
<body>
<div class="
aa1">
<p id="
bb1">我是段落</p>
</div>
</body>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
