CSS超级技巧大放送(3)

2016-01-29 12:11 4 1 收藏

CSS超级技巧大放送(3),CSS超级技巧大放送(3)

【 tulaoshi.com - Html 】

八.多重class定义

一个标签可以同时定义多个class。例如：我们先定义两个样式，第一个样式背景为#666；第二个样式有10 px的边框。

（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/html/）.one{width:200px;background:#666;}
.two{border:10px solid #F00;}

在页面代码中，我们可以这样调用

这样最终的显示效果是这个div既有#666的背景，也有10px的边框。是的，这样做是可以的，你可以尝试一下。

九.使用子选择器(descendant selectors)

CSS初学者不知道使用子选择器是影响他们效率的原因之一。子选择器可以帮助你节约大量的class定义。我们来看下面这段代码：

（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/html/）<div id=subnav
<ul
<li class=subnavitem <a href=# class=subnavitemItem 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定义是：

（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/html/）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 */ }

你可以用下面的方法替代上面的代码

（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/html/）<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

样式定义是：

（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/html/）#subnav { /* Some styling */ }
#subnav li { /* Some styling */ }
#subnav a { /* Some styling */ }
#subnav .sel { /* Some styling */ }
#subnav .sel a { /* Some styling */ }

用子选择器可以使你的代码和CSS更加简洁、更加容易阅读。

来源:http://www.tulaoshi.com/n/20160129/1485002.html

上一篇：如何用Jsp读取Mysql数据库
下一篇： PSV《讨鬼传极》坏魂金碎棒讨伐耀摇者2分23视频

看过《CSS超级技巧大放送(3)》的人还看了以下文章更多>>

美食拍摄技巧大放送

标签：摄影人像摄影静物摄影

美食拍摄技巧大放送一天三顿饭，重复了很多年。大家在吃饭的时候，可曾想过把饭桌上的食品用相机拍摄下来?尤其是当我们去某些比较有特色的餐厅就餐的时候，看到一些精美的食物，拍摄下来给自己留下一个美好的回忆，也是满幸福的。网友山羊是一名摄影爱好者，使用理光GX8数码相机。据山羊讲，他自打有了理光GX8，就几乎机不离...

Windows桌面应用技巧大放送

标签： windows 操作系统

想玩转Windows桌面，其实有很多小技巧。本文为您介绍了10个windows桌面方面的技巧。拥有多个桌面你是否很羡慕拥有双头显示卡的高级玩家呢？其实如果你使用的是GPU核心的nVidia显示卡，那么一样可以享受多桌面显示的乐趣，而且桌面的数量不是两个，是32个！这些桌面可以互相切换，彼此之间的内容互不干扰...

韩国男士化妆技巧大放送

标签：化妆

男人化妆早就很平常了，男人的帅气的脸才能真正成为焦点。别再傻乎乎的素面朝天满街乱走了。人靠衣装，脸靠化妆。男人化妆的主要目的是使自己看上去更精神，五官更立体，切忌不要太夸张，自然才是男妆的王道!今天小编就来教大家韩式男士化妆技巧，素人也是可以变身韩式花美男! 男士化妆技巧 1、韩国花美男裸妆大放送男士化妆技巧一：...

Windows 8应用技巧大放送

标签：电脑入门

1) 关机这个问题单拿出来有点搞笑，但确实有些朋友不知道，Windows 8中将开始菜单更换为metro界面，关机按钮也同样消失了，我们可以用一下几种方法实现关机： A. Alt+F4：快捷键，Windows界面下按Alt+F4即可弹出关机菜单 B. Win+I：打开设置，选择电源按钮关机、睡眠等 C. 桌面建立快捷方式，桌面右键新建-快捷方式，关机输入shutdown...

灭火菜肴大放送

标签：上火饮食养生

灭火菜肴大放送降火大作战 5款美味降火菜肴大放送 1、清热解毒蒲公英汤食材：蒲公英100g，猪肉100g，盐、姜适量步骤: step1:把蒲公英摘好洗干净; step2:猪肉切块姜拍碎; step3:把猪肉与姜放入锅里注入半锅水煮; step4:汤煮沸之后浮起来的泡沫用隔油勺子隔掉; step5:中火十五分钟把猪肉煮出味...

查看更多精彩>>