CSS选择器的用法说明

2025-11-24 06:32:47

1、第一种是标签选择器,html中的<html>、<body>、<h1>、、<img>等标签元素都是的,用法如图代码所示。

CSS选择器的用法说明

2、第二种是类选择器,使用方法是在标签元素中定义一个类名,在css中使用“.”+类名来调用,用法如图代码所示。

CSS选择器的用法说明

3、第三种是id选择器,使用方法是在标签元素中定义一个id名,在css中使用“#”+id名来调用,用法如图代码所示。

关于id选择器和类选择器的区别在其他篇章有过讲解,这里不赘述。

CSS选择器的用法说明

4、第四种是子选择器,子选择器是用来选择指定标签元素的第一代子元素。使用“>”来调用,注意如图代码已经用红框标注出来了作用范围,可以更好的理解第一代子元素的概念。

CSS选择器的用法说明

5、第五种是包含(后代)选择器,用于选择指定标签元素下所有的后辈元素,使用“ ”空格符号来调用,注意查看代码效果的区别。

CSS选择器的用法说明

6、第六种是通用选择器,使用“*”表示,它可以自动匹配html中所有标签元素。

CSS选择器的用法说明

7、第七种伪类选择器,这里只介绍a:hover,其他伪类选择器兼容性不好不推荐使用。

CSS选择器的用法说明

8、第八种是分组选择器,它使用“,”逗号来为多个标签同时设置css样式。

CSS选择器的用法说明

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢