CSS层叠样式选择器归纳
常用选择器
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选择符”
如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我不断的迭代！
支付宝
微信
【资料参考】
精通CSS高级web标准解决方案（第二版）
CSS设计指南 （第二版）
CSS层叠样式选择器归纳的更多相关文章
- css层叠样式优先级总结
虽然学前端最刚开始就是html+css,一直因为这些看起来太简单就没有什么总结,不过看似很简单的东西,研究起来也深不可测,问起来js可能回答的头头是道,css这么简单的东西,其中一个优先级的问题就能难 ...
- css笔记06：层叠样式选择器
1. (1)HTML文件 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ...
- css层叠样式初学
一.css简介 1.层叠样式表:叠加效果,不同css对同一html修饰,冲突部分,优先级高作用,不冲突部分,共同作用 2.css作用 (1)修饰html (2)替代了标签自身的颜色,字号等属性,提高复 ...
- CSS层叠样式
为了让网页元素的样式更加丰富,也为了让网页的内容和样式能拆分开,CSS由此思想而诞生,CSS是 Cascading Style Sheets 的首字母缩写,意思是层叠样式表.有了CSS,html中大部 ...
- 学习前端第二天之css层叠样式
一.设置样式公式 选择器 {属性:值:} 二.font 设置四大操作 font-size:字体大小 (以像素为单位) font-weight:字体粗细 font-family:字体 ( 可直接跟 ...
- CSS 层叠及样式表来源
Web标准化运动的口号——分离.分离.分离. 在2003年的 SXSW 会议中, Steve Champeon 和 Nick Finck 做了一个名为“面向未来的全方位 Web 设计”的演讲,揭示了这 ...
- CSS 基础知识点 样式 选择器 伪类
CSS 基础知识点汇集 版权声明:这篇博客是别人写的,大神博客地址 : https://www.cnblogs.com/Mtime/p/5184685.html 1.CSS 简介 CSS 指层叠样式表 ...
- CSS语法、选择器、继承、层叠
行内样式(内联样式) <h1 style="color:red;font-size:20px;">css行内样式</h1> 内部样式表(嵌入样式) < ...
- CSS样式的引入&区别&权重&CSS层叠性&CSS样式的来源
CSS样式的引入: 内部样式: 内部样式:写在当前页面style标签中的样式 内联样式:写在style属性中的样式 外部样式: link标签引入的CSS文件 @import引入的CSS文件,需要写在c ...
随机推荐
- SSH应该使用密钥还是密码？
关于SSH,几乎每个人都同意密钥要优于密码,更安全,并且更先进,但我并不同意这个观点. 虽然密钥的确可以更好,但它有着还没被意识到的严重风险,并且我认为比得到妥善管理的密码更不安全. 通常密钥更好的理 ...
- PHP session过期时间
如何设置一个严格30分钟过期的Session 今天在我的微博(Laruence)上发出一个问题: 我在面试的时候, 经常会问一个问题: “如何设置一个30分钟过期的Session?”, 大家不要觉得看 ...
- puppet&mcollective客户端安装
一.环境: 1.客户端: fedora 19 2.DnsServer: 192.168.0.160 3.server1.xxx.com(10.8.1.201):运行以下服 ...
- linux0.11文件分析
在kernel包中有几个重要的文件夹和文件,他们各司其职,处理着有关内核的一些功能操作.其中文件夹有三个:blk_drv(块设备驱动),chr_drv(字符设备驱动),math(数学协处理器) 文件 ...
- tyvj1161聚会的名单（trie树）
背景 Background 明天就是candy的生日,candy又会邀请自己的一大堆好友来聚会了!哎!又要累坏飘飘乎居士了!! 描述 Description 明天就是candy的生日.晚上,c ...
- Linux中的文件特殊权限
linux中除了常见的读(r).写(w).执行(x)权限以外,还有3个特殊的权限,分别是setuid.setgid和stick bit 1.setuid.setgid 先看个实例,查看你的/usr/b ...
- linux下nagios的安装与部署
一.Nagios简介 Nagios是一款开源的电脑系统和网络监视工具,能有效监控Windows.Linux和Unix的主机状态,交换机路由器等网络设置,打印机等.在系统或服务状态异常时发出邮件或短信报 ...
- 如何编写Linux设备驱动程序
一.Linux device driver 的概念 系统调用是操作系统内核和应用程序之间的接口,设备驱动程序是操作系统内核和机器硬件之间的接口.设备驱动程序为应用程序屏蔽了硬件的细节,这样在应用程序看 ...
- （转载）【C++】new A和new A()的区别详解
(转载)http://blog.csdn.net/xiajun07061225/article/details/8796257 我们在C++程序中经常看到两种new的使用方式:new A以及new A ...
- 常用ping服务列表
以下是收集的ping服务器. ping是基于XML_RPC标准协议的更新通告服务,是用于blog在内容更新时通知博客搜索引擎及时进行抓取.更新的方式.博客搜索引擎在成功接受到ping以后,会立刻进行抓 ...