CSS超级技巧大放送(3)

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

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

【 tulaoshi.com - Html 】

八.多重class定义

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

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

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

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

（本文来源于图老师网站，更多请访问https://www.tulaoshi.com/html/）九.使用子选择器(descendant selectors)

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

（本文来源于图老师网站，更多请访问https://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定义是：

（本文来源于图老师网站，更多请访问https://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 */ }

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

（本文来源于图老师网站，更多请访问https://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

样式定义是：

（本文来源于图老师网站，更多请访问https://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更加简洁、更加容易阅读。

来源:https://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...

Windows 功能互补技巧大放送

标签： windows 操作系统

经常看到有朋友在论坛上诉苦说需要释放内存，其实如果你安装了Windows 2003的话，那么并不需要寻求那些需要注册才能长久使用的第三方内存管理软件。因为Windows 2003已经自带了一个名为Empty.exe的小程序，它可以用来释放某些应用程序在占用大量内存时不能及时释放的那部分资源，与那些第三方软件内存管理软件不同的是， Empty.exe不会强迫...

查看更多精彩>>