CSS选择器的类别
1.标签选择器
(1)基本格式
标签名 {
属性1:属性值1; 属性2:属性值2; 属性3:属性值3;
}
or
元素名{
属性1:属性值1; 属性2:属性值2; 属性3:属性值3;
}
(2)示例
h1{
font-size: 20px;
color: red;
font-weight: normal;
}
<h1>The violent delights have violent ends</h1>
2.类选择器
(1)基本格式
.类名{
属性1:属性值1; 属性2:属性值2; 属性3:属性值3;
}
类选择器最大的优势是可以为元素对象定义单独或相同的样式。 可以选择一个或者多个标签
注意: 1.长名称或词组可以使用中横线来为选择器命名。 2.不建议使用“_”下划线来命名CSS选择器。 3.不要纯数字、中文等命名, 尽量使用英文字母来表示。 |
(2)示例
<style>
.test{
font-size: 10px;
color: pink;
font-weight: bold;
}
</style>
<h2 class="test">The violent delights have violent ends</h2>
多类名可以叠加,如:
<h2 class="test test2">The violent delights have violent ends</h2>
3.id选择器
(1)基本格式
#id名{
属性1:属性值1; 属性2:属性值2; 属性3:属性值3;
}
元素的id值是唯一的,只能对应于文档中某一个具体的元素。
与类选择器相比,用法虽然相似,但是id选择器只能使用一次,不能多次重复,而类选择器则可以在多个表单控件上多次使用。
(2)示例
<style>
#test{
font-size: 30px;
color: green;
font-weight: bold;
}
</style>
<h2 id="test">The violent delights have violent ends</h2>
4.通配符选择器
(1)基本格式
所有选择器中作用范围最广的,能匹配页面中所有的元素。
* {
属性1:属性值1; 属性2:属性值2; 属性3:属性值3;
}
但是在真正的编程中比较少用。
(2)示例
<style>
*{
margin: 0; /* 定义外边距*/
padding: 0; /* 定义内边距*/
}
</style>
<h1>The violent delights have violent ends</h1>
<h2 class="test">The violent delights have violent ends</h2>
<h2 id="test">The violent delights have violent ends</h2>
<h2 >The violent delights have violent ends</h2>