【css+div】CSS样式基础学习教程系列-选择器

林氏智造 于 2013-12-08 发布 2723 人已阅

【 选择器分类整合】
优先级别遵循:行内样式 >ID > Class >标记
基本选择器 标记选择器(eg:<p></p>)
类别选择器(eg:class)
 ID选择器
复合选择器 “交集”复合选择器(eg:p.menu{color:red}) 必须是标记+类别/ID组合
 “并集”复合选择器(eg:h1,h2,h3{color:red})
 “后代”复合选择器(eg: #menu .menulist{ ... })
 “子”  复合选择器(eg: #menu .menulist .selectit { ... })

【使用子选择器减少id和class的定义】
示例结构:
<div id="menu">
 <div class="menulist">
     <div class="selectit">content</div>
 </div>
</div>
示例CSS:
#menu { ... }
#menu .menulist { ... }
#menu .menulist .selectit { ... }
【使用组选择器为不同元素应用相同的样式】

如h1,h2,h3,div{font-size:16px;font-weight:bold},即h1,h2,h3 ,div 元素 的样式都为字体16像素、字体为粗体。

【 伪类和选择符的配合使用】

将伪类和类组合起来使用,可以在同一个页面中完成几组不同的链接效果。例如,定义一组链接为红色,访问后为蓝色;另一组为绿色,访问后为黄色。
a.red:link {color: #FF0000}
a.red:visited {color: #0000FF}
a.blue:link {color: #00FF00}
a.blue:visited {color: #FF00FF}
将定义应用在不同的链接上:
<a class="red" href="...">这是第一组链接</a>
<a class="blue" href="...">这是第二组链接</a>

标签

您可能感兴趣的文章

如何优雅的选择字体(font-family)

当前项目对字体要求很高,之前对font-family这个属性没怎么仔细去研究它,现在整理了一个通用方案适合大多数网站使用。

React+webpack 部署概要

React+webpack 组合已经成为开发react的经典搭配,把常用的webpack配置文件和一些react的常用代码规范记录下方便以后开发使用

gulp前端自动化部署方案

gulp 前端自动化代码,根据自己的项目需求编写,包括压缩合并css,压缩合并js,雪碧图,版本号插入等功能

纯CSS制作各种图形

用图片做图标会加大页面的大小,现在能用CSS写图标就用CSS写,维护起来也方便加载速度也快