精通CSS version2笔记之⒈选择器
1.常用的选择器:
①元素选择器 指定希望应用样式的元素.比如:p {color:#fff;}
②后代选择器 寻找特定元素或者元素的后代. 比如:body p{color:#ccc;} 这个选择器和子选择器body>p的区别是:body>p是指body下作为子元素的所有节点P,而后代选择 是body下面所有的节点P,可以说子元素选择器是一种特殊的后代选择器。
③类选择器 指定特定的类应用样式比如.a{color:#ccc;} 类选择器命名最好根据它用作什么而不是表现什么来命名。如果在文档中添加了许多不必要 的类,那么这可能是文档结 构不合理的信号。最好根据祖先选择器的后代选择器来选定。
④伪类选择器根据文档结构之外的其他条件对元素应用样式 比如:a:hover{color:red}, :link :visited称为链接伪类,只能用于锚元素,而:hover :active :focus称为动态伪 类,理论上可以应用于任何元素,这些伪类可以层叠,创建更复杂的行为
⑤通用选择器匹配所有可用元素应用样式(相当于全选),由一个*表示,它可以用来对某个元素的所有后代应用样式,或者跳过一级的后代。
⑥高级选择器之子选择器:如前文 略。
⑦相邻同胞选择器 选取同一个父元素下某个元素之后的第一个同级兄弟元素。可以认为是和JS中的:after选择一个效果
比如 p+div{color:#00f;}就可以实现应用样式
⑧属性选择器可以根据属性的值来寻找元素 比如acronym[title='practise']{bgc:blue;}寻找拥有title属性且值为practised元素应用样式
ps:为了避免样式过分混乱,尽量保持一般样式非常一般,特殊样式非常特殊
继承是指应用样式的元素的后代会继承样式的某些属性,可以通过设置父元素的一般样式来避免子元素标签的过分使用。
现在样式表最常见的是链接样式,这样方法比导入方法快,使用结构良好的单一CSS文件可以显著提高下载速度,但是可以根据实际情况,尽量使代码美观不混乱。
代码的结构设计(!important)
为了便于维护,最好将样式分块
1.一般样式
⑴主体样式
⑵reset样式
⑶链接
⑷标题
⑸其他元素
2.辅助样式
⑴表单
⑵通知和错误
⑶一致的条目
3.页面结构
⑴标题、页脚、导航
⑵布局
⑶其他页面结构元素
4.页面组件
各个页面
5.覆盖样式
在需要的地方加上注释是一种良好的习惯
精通CSS version2笔记之⒈选择器的更多相关文章
- 精通CSS version2笔记2.小知识
添加背景:background-img:url(URL)+属性; 圆角框:选择器{border-radius:单位;}创建X单位的圆角框在元素周围 投影:box-shadow:垂直和水平偏移.投影的宽 ...
- 朝花夕拾《精通CSS》二、选择器 & 层叠
一.背景 翻出我4年前看的<精通CSS>一书,可惜当初没有整理读书笔记的习惯,最近又很少写前端,遂很多东西.知识点遗忘了,恰且现在 css 也有些变化和进步,遂一起打包整理,输出成几篇 b ...
- CSS学习笔记之选择器
目录 1.元素选择器 2.继承 3.选择器分组 4.声明分组 5.后代选择器 6.子元素选择器 7.相邻兄弟选择器 8.类选择器 9.ID 选择器 10.属性选择器 11.伪类 12.伪元素 1.元素 ...
- 【精通css读书笔记】 第八章 布局
学习了css布局的基础后又来翻阅<精通css>这本经典书籍,对布局有了进一步的认识. 基于浮动的布局 两列的布局仍然是使用一个元素向左浮动,一个元素向右浮动,值得注意的是要加入displa ...
- CSS学习笔记(1):选择器
一.元素选择器 HTML文档元素就是最基本的选择器 如: <!DOCTYPE html> <html lang="en"> <head> < ...
- CSS 小结笔记之选择器
Css选择器主要分为以下几类 类选择器 ID选择器 通配符选择器 标签选择器 伪类选择器 复合选择器 1.类选择器:通过.classname 来选择 例如 .color2 { color: rebec ...
- 《精通css》笔记
第2章 选择器,注释 1.要知道常用选择器(id选择器,类选择器,类型选择器,后代选择器,伪类选择器(文档结构之外)) 通用选择器(*{ }) 高级选择器(子选择器,相邻同胞选择器,属性选 ...
- CSS学习笔记之基本介绍
1.简介 层叠样式表(Cascading Style Sheets,CSS)允许我们把样式设置存储在文件中,从而将内容与表现分离 当同一个 HTML 元素被不只一个样式定义时,最终的样式确定顺序如下( ...
- 《精通CSS:高级Web标准解决方案》学习笔记(上)
鉴于国产CSS书籍基本都是辣鸡的现状,我在半年前动用某工作室的购书资金采购了一些技术书籍,这本广受好评的<精通CSS>也在其中.但是在阅读过后我深深的感觉到,如果说CSS本来已经是一种很琐 ...
随机推荐
- SharePoint 2010 系统账户没完全控制权限了
网上下载了一个试用版的wsp包,安装部署后感觉不好就卸载掉了.坑爹的事情发生了,系统账户登录网站集竟然没完全控制权限了.连添加列表项的权限都没有了. 去管理中心查看,网站集管理员,没发现问题. 更坑爹 ...
- 如何找回Oracle中system,sys用户的密码[转]
Oracle中如果不知道system,sys用户的密码后可用如下方法找回: 首先以一个普通用户等入数据库: 在SQL*Plus中执行如下命令: SQL>connect/as sysdba (也可 ...
- 奇葩问题:This file could not be checked in because the original version of the file on the server was moved or deleted. A new version of this file has been saved to the server, but your check-in comments were not saved
"This file could not be checked in because the original version of the file on the server was m ...
- Sharepoint学习笔记—习题系列--70-576习题解析 -(Q21-Q24)
Question 21 An application will be deployed in a SharePoint 2010 server farm that is managed by depa ...
- System.Web.HttpException: 无法序列化会话状态。在“StateServer”或“SQLServer”模式下,ASP.NET 将序列化会话状态对象,因此不允许使用无法序列化的对象或 MarshalByRef 对象。如果自定义会话状态存储在“Custom”模式下执行了类似的序列化,则适用同样的限制。 ---> System.Runtime.Serialization.Seria
序列化问题:查询度娘各种答案不一 多为修改web.config找到SessionState节,将Mode 设置为 InProc ,还有舍弃Session用cookie存储,多经试验觉得还是写一个 ...
- iOS之属性修饰符 retain、strong和copy区别测试
时不时会有点迷惑属性修饰符retain.strong.copy三者之间的区别,还是把测试过程记录下来好一点! 1.属性修饰符结论 2.给retain.strong.copy修饰的字符串属性赋值指针变化 ...
- Android JNI简介
JNI简介 JNI (Java Native Interface),Java的本地接口 JNI是Java众多开发技术中的一门,意在利用本地代码,为Java程序提供 更高效,更灵活的拓展.应用场景包括: ...
- android MediaPlayer API大全已经方法详解(转载)
通过这张图,我们可以知道一个MediaPlayer对象有以下的状态: 1)当一个MediaPlayer对象被刚刚用new操作符创建或是调用了reset()方法后,它就处于Idle状态.当调用了rele ...
- 【Android】中兴ZTE sdcard路径的问题
测试机: ZTE U950 现象: 用Environment.getExternalStorageDirectory()取到的路径是/mnt/sdcard 真相: /mnt/sdcard/是一个空文件 ...
- Java 引用
Java 对象的引用方式有如下四种,这四种方式主要是为了给垃圾回收提供更灵活的操作: 1.强引用,最常见的引用方式,当一个对象被一个或一个以上的引用变量引用时,它处于可达状态,这时不会被垃圾回收器回收 ...