练习一：
1、类选择器使用练习：
类选择器使用示例 .red { color:red; font-size:12px; } .blue { color:blue; font-size:20px; }无类选择器效果
类选择器red效果
类选择器blue效果
同一个类别选择器可以使用到另外的标记上
2、效果：
3、解释：
第一行效果：由于没有对标记P进行选择器定义，所以显示默认颜色和大小；
第二行效果：由于对标记P使用了red类选择器，所以字体显示为红色且12像素大小；
第三行效果：由于对标记P使用了bule类选择器，所以字体显示为蓝色且20像素大小；
第四行效果：这个想说明同一个类选择器可使用在不同的标记上，除了能
之外，还可以
；特别值得一提的是由于
使用了blue类选择器，所以内容显示为蓝色20像素大小之外，还体现出
标记本身的特性。关于这一点会在后面陆续涉及到。
标记本身的特性。关于这一点会在后面陆续涉及到。
练习二：
1、标记选择器和ID选择器练习：
标记选择器和ID选择器练习 /* * 标记选择器定义 */ p { color:blue; } /* * 交集复合选择器定义 */ p.special { color:red; } /* * ID选择器定义 */ #special { color:green; }普通段落文本
普通h3标记文本
指定了special类选择器的p段落文本
指定了special的ID选择器的h3标题文本
2、效果：
3、解释：
第一行效果：由于定义了标记选择器p，所以段落p中的内容将以蓝色显示；
第二行效果：由于没有定义标记选择器h3，所以标题h3中的内容将以默认黑色显示；
第三行效果：由于同时使用了标记选择器p和类选择器special，这正符合交集选择器的定义，所以其中的内容以交集选择器p.special定义的形式展示，所以显示为红色；
第四行效果：由于使用了ID选择器special同时使用了h3默认的处理，所以标题h3中的内容既使用了绿色，同时以h3定义的字体大小显示；
练习三：
1、并集选择器练习：
标记选择器和ID选择器练习 /* * 标记选择器定义 */ h1,h2,h3,p { color:purple; font-size:15px; } /* * 并集选择器定义 */ h2.special, .special, #one { text-decoration:underline; }示例文字h1
示例文字h2
示例文字h3
示例文字p1
示例文字h2
示例文字p3
</body
>
以上就是CSS选择器练习总结的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1608313.html
微信扫一扫 
支付宝扫一扫 
