如何使用CSS3中的目标伪类选择器控制元素显示

2026-03-06 05:09:46

1、第一步,双击打开HBuilderX工具,新建一个HTML5页面并修改title内容,如下图所示:

如何使用CSS3中的目标伪类选择器控制元素显示

2、第二步,在<body></body>标签内,插入多个div标签并设置class属性,如下图所示:

如何使用CSS3中的目标伪类选择器控制元素显示

3、第三步,使用类选择器main,设置外层div标签的背景色、字体属性和字体颜色等,如下图所示:

如何使用CSS3中的目标伪类选择器控制元素显示

4、第四步,使用后代选择器(类选择器并列),设置子代的div样式,如下图所示:

如何使用CSS3中的目标伪类选择器控制元素显示

5、第五步,再使用目标伪类选择器:target,设置span元素的样式,如下图所示:

如何使用CSS3中的目标伪类选择器控制元素显示

6、第六步,保存代码并打开浏览器预览页面,查看不同层次的元素的样式,如下图所示:

如何使用CSS3中的目标伪类选择器控制元素显示

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