一、基础选择器
下列语法都以内部样式表为例~
1、标签选择器
语法:
<style>
标签名{
样式声明;
}
</style>
特点:
能够快速选择同一类型的标签,但是不能差异化选择。
举例:
2、类选择器
语法:
<style>
.类名{
样式声明;
}
</style>
特点:
可以差异化表示不同的标签~
举例:
注意:
(1)类名前有个点.
(2)通过标签的class属性来调用对应的标签;
(3)一个类可以被多个标签使用,一个标签也可以有多个类名,这样可以把多个标签的共性提取出来,达到简化代码的效果;
(4)类名如果比较长,可以用-来分割;
(5)不要使用纯数字、中文、标签名来命名类名。
3、id选择器
语法:
<style>
#id{
样式声明;
}
</style>
和类选择器使用方式类似,但一个html文件中的id必须都是唯一的。
特点:每次选择一个标签~
举例:
注意:
(1)id选择器是#开头,而类选择器是.开头;
(2)一个html中的id必须是唯一的,不能被多个标签使用。
4、通配符选择器
语法:
<style>
*{
样式声明;
}
</style>
特点:选择所有的标签~
举例:
5、总结
二、复合选择器
1、后代选择器
又叫包含选择器,可以选择某个父元素中的后代元素(子元素、孙子元素……)~
语法:
<style>
父标签子标签{
样式声明;
}
</style>
举例:修改ol中的li不影响ul中的li
举例:修改ol的孙子标签h3,不影响ol的儿子标签
注意:标签也可以换成类名或id名。
2、子选择器
和后代选择器类似,但是只能选择亲儿子标签~
语法:
<style>
父标签>子标签{
样式声明;
}
</style>
举例:修改div中的儿子标签a
反例:修改div中的孙子标签b,此时不会产生任何效果。
注意:子选择器只能选择子标签,无法选择孙子及其后代标签。
3、并集选择器
用于选择多组标签~
语法:
<style>
元素1,元素2,元素3{
样式声明;
}
</style>
注意:
(1)用逗号分割多个元素;
(2)任何基础选择器都可以使用并集选择器;
(3)并集选择器建议竖着写,每个选择器占一行。
举例:把div,ol,ul中的内容都改为tomato色
4、伪类选择器
语法:
标签名:link选择未被访问过的链接
标签名:visited选择已经被访问过的链接
标签名:hover选择鼠标指针悬停上的链接
标签名:active选择活动链接(鼠标点击链接但是并未松开鼠标)
举例:
①正常情况:
②鼠标放在“周公瑾”上面:
③鼠标点击“周公瑾”:
CSS常用元素属性参考:CSS参考手册(w3school.com.cn)