CSS层叠样式选择器归纳
2017-06-03 15:04
405 查看
常用选择器
1.1 类型选择器:用来寻找特定类型的元素 标签 { 声明 }
p { color:black; } h1 { font-weight:bold; }
1.2 后代选择器: 选择一个元素的所有后代,中间使用空格
标签 1 标签 2 {声明}
<body> <article> <h1>Contextual selectors are <em>very</em> selective</h1> <p>This example shows how to target a <em>specific</em> tag.</p> </article> <aside> <p>Contextual selectors are <em>very</em> useful!</p> </aside> </body>
article p {font-weight:bold;}
article后代的 p元素才会应用字体加粗的样式
1.3 class选择器 标识具有相同特征的元素 .class名 { }
<h2 class="moreInfo"> You Click Look More Infomation......</h2>
.moreInfo { color:red; }
1.4 ID选择器 页面中唯一地标识一个元素
<nav id="mainMenu"> <ul> <li><a href="#">Yin</a></li> <li><a href="#">Yang</a></li> </ul> </nav>
#mainmenu a {color:orange;}
伪类与伪元素选择器
单冒号(:)称为伪类,伪类与类相似,不同在于并没有类会附加到标记中的标签上
双冒号(::)称为伪元素。伪类与伪元素官网,下图源自【CSS进阶】伪元素的妙用--单标签之美】
通用选择器
* { margin:0; padding:0; }
使用以上规则删除每个元素上默认的浏览器内边距与外边距,项目开发中不建议这么写!!
高级选择器 【子选择器与相邻同胞选择器】
1.1 子选择器 > 只选择元素的直接后代
<ul id="mainNav"> <li><a href="/Home/">Home</a></li> <li> <a href="/services/">Services</a> <ul> <li><a href="/services/design/">Design</a></li> <li><a href="/services/devlopment/">Devlopment</a></li> <li><a href="/services/consultancy/">Consultancy</a></li> </ul> </li> <li><a href="/Home/">Home</a></li> <li><a href="/concact/">Concact</a></li> </ul>
只选择元素的ul#mainNav 直接后代li标签,而嵌套的li不受影响
#mainNav>li { padding-left: 20px; }
1.2 相邻同胞选择器 X+Y { 声明 } Y必须紧贴在X之后
<h2>You Click Look More Infomation......update....update....</h2> <p>This paragraph simply takes on the browser's default paragraph style.</p>
h2相邻p标签应用样式
h2 + p { font-size: 1.4em; font-weight: bold; color: #777; }
1.3 属性选择器 X[title]属性选择器 它只会选择有title属性的锚标签
<a title="noflollow" href="#none">有rel属性设定</a> <a href="#none">无rel属性</a>
只会选择有title属性的锚标签应用样式
a[title="noflollow"] { color: red; }
更多选择符说明英文版 "The 30 CSS Selectors you Must Memorize"
中文翻译版 “30个你必须记住的CSS选择符”
作者:Avenstar
出处:http://www.cnblogs.com/zjf-1992/p/6261468.html
关于作者:专注于WEB前端开发
本文版权归作者所有,转载请标明原文链接。
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我不断的迭代!
支付宝
微信
【资料参考】
精通CSS高级web标准解决方案(第二版)
CSS设计指南 (第二版)
相关文章推荐
- jq选择器归纳
- Android 时间选择器,如何让日期和时间显示成滚动样式
- 根据你的目的和意图来选择按钮样式
- WPF:自定义ListBox的选择样式
- RecyclerView的Item多种类型的选择和不同样式展示之利用框架方法实现
- 屏蔽选择的样式定义:-moz-user-select
- css学习之路(3)--css如何选择样式(优先级)
- 简单强大的选择状态管理器,批量改变View样式 SelectStateManager - android
- (转)基于MVC4+EasyUI的Web开发框架经验总结(14)--自动生成图标样式文件和图标的选择操作
- 七日掌握版面设计基础:一,选择样式
- CSS---属性选择器:对带有指定属性的Html元素设置样式
- Android中的动画,选择器,样式和主题的使用
- Photoshop 样式的角度/高度选择器控件
- 【iOS开发-15】UITextField常用属性归纳:文本框样式、文字样式、键盘样式、左右视图样式、清除按钮设置等
- jQuery编程基础精华02(属性、表单过滤器,元素的each,表单选择器,子元素过滤器(*),追加方法,节点,样式操作)
- 选择导航样式背景变换
- 星座运势-选择下拉列表选项不同,内容的样式不同
- 自定义WPF ListBox的选择样式
- CSS_样式、选择器、继承_tag
- 黄页前台联动菜单修改时不能显示,要重新选择|没样式