目录

一、基础选择器

1、标签选择器

2、类选择器

3、id选择器

4、通配符选择器

5、总结

二、复合选择器

1、后代选择器

2、子选择器

3、并集选择器

4、伪类选择器


一、基础选择器

下列语法都以内部样式表为例~

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、总结

选择器作用特点
标签选择器可以选出所有的同种标签不能差异化选择
类选择器可以选出一个或者多个标签可以差异化选择,最灵活、最常用的基础选择器
id选择器可以选出一个标签可以选择一个指定的标签,同一个html中每个id都是唯一的
通配符选择器可以选择所有标签特殊情况使用

二、复合选择器

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)

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐