CSS超级技巧大放送(3)
时间： 2021-07-31 作者：daque
八.多重class设置 一个标签不妨同声设置多个class。比方：咱们先设置两个款式，第一个款式后台为#666；第二个款式有10 px的边框。
.one{width:200px;background:#666;}.two{border:10px solid #f00;}
在页面代码中，咱们不妨如许挪用
<div class=one two></div>
如许最后的表露功效是这个div既有#666的后台，也有10px的边框。是的，如许做是不妨的，你不妨试验一下。
九.运用子采用器(descendant selectors) css入门者不领会运用子采用器是感化她们功效的因为之一。子采用器不妨扶助你俭朴洪量的class设置。咱们来看底下这段代码：
<div id=subnav> <ul> <li class=subnavitem> <a href=# class=subnavitem>item 1</a></li>> <li class=subnavitemselected> <a href=# class=subnavitemselected> item 1</a> </li> <li class=subnavitem> <a href=# class=subnavitem> item 1</a> </li></ul> </div>
这段代码的css设置是：
div#subnav ul { /* some styling */ } div#subnav ul li.subnavitem { /* some styling */ } div#subnav ul li.subnavitem a.subnavitem { /* some styling */ } div#subnav ul li.subnavitemselected { /* some styling */ } div#subnav ul li.subnavitemselected a.subnavitemselected { /* some styling */ }
你不妨用底下的本领代替上头的代码
<ul id=subnav> <li> <a href=#> item 1</a> </li> <li class=sel> <a href=#> item 1</a> </li> <li> <a href=#> item 1</a> </li> </ul>
款式设置是：
#subnav { /* some styling */ } #subnav li { /* some styling */ } #subnav a { /* some styling */ } #subnav .sel { /* some styling */ } #subnav .sel a { /* some styling */ }
用子采用器不妨使你的代码和css越发简略、越发简单观赏。
相关推荐
推荐下载
热门阅览
最新排行
- 1 手机如何装windows系统，手机装windows系统教程
- 2 微信公众号重大调整 新公注册公众号将没有留言功能
- 3 烧杯app最剧烈的反应有哪些？ 烧杯app攻略
- 4 微信小程序怎么用 微信小程序使用教程
- 5 360快剪辑怎么使用？360快剪辑图文视频教程
- 6 八分音符外挂神器：绝望中的战斗机
- 7 2017热门微信小程序排行榜 微信小程序二维码大全
- 8 微信聊天记录导出到电脑 怎么在电脑上查看微信聊天记录
- 9 在U递上赚钱和省钱教程 教你在U递上怎么赚钱何省钱
- 10 u递邀请码申请教程 u递邀请码领取方法
- 11 如何解决爱奇艺账号登陆验证 跳过爱奇艺账号手机登录验证方法分享 亲测好用
- 12 手机申请无限制申请QQ靓号 手机怎样无限申请Q号