CSS之后代选择器与多类选择器

php中文网
发布: 2016-08-04 08:53:13
原创
1794人浏览过

一、后代选择器

  说起CSS的后代选择器。它属于派生选择器中的一种,两者附属关系如下:

-->派生选择器

 ----CSS 后代选择器

立即学习前端免费学习笔记(深入)”;

 

 ----CSS 子元素选择器

 ----CSS 相邻兄弟选择器

  那么问题来了,什么时候需要用到后代选择器嘞?假设你需要为p元素中的span元素(.A类)设置特殊样式,可以用后代选择器选择该元素:

<span style="color: #800000;">/*方式1*/<br />p span</span>{<span style="color: #ff0000;">...</span>}<br />/*方式2*/<br />p .A{...}
登录后复制

     注意,上述代码的两个选择器间以空格空格空格分隔。另外,后代选择器使用起来灰常自由。这么说吧,上述例子中p元素不一定必须是span的老爸,只要是span的直系长辈比如爷爷都可以。换句话说,在p元素包含span元素的情况下,后代选择器就可以发挥作用了。

 

二、多类选择器

  接下来,来说说多类选择器。举个例子:

<span style="color: #800000;">.funny</span>{<span style="color: #ff0000;">...</span>}<span style="color: #800000;">
.handsome</span>{<span style="color: #ff0000;">...</span>}<span style="color: #800000;">
.funny.handsome</span>{<span style="color: #ff0000;">...</span>}
登录后复制

     注意,上述代码的两个选择器间没有没有没有空格分隔。好的,现在有.funny和.handsome这两个类,显然“我是个有趣并且帅的boy,两者缺一都不是我”是一个真命题,所以只有“.funny.handsome”这个多类选择器才可以选择我。但是单独的“.funny”不能选择我,原因见前文提到的真命题,“.handsome”选择器同理。

     好吧不闹了,多类选择器的用处挺多的,比如要设置“1、被点击(.selected);2、按钮的样式”,就可以用:

<span style="color: #800000;">button.selected</span>{<span style="color: #ff0000;">...</span>}
登录后复制

     这是我在博客园写下的第一篇博文,XD。完毕。

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号