css 权威指南笔记(四)选择器
- 规则结构
每个规则都有两个基本部分组成:选择器和声明块。声明块由一个或多个声明组成,每个声明则是一个属性-值对。
- 元素选择器
- 声明和关键字
- 关键字一般由空格隔开;有一种情况例外 font属性中的 斜线(/)分割 元素的字体大小和行高两个关键字。
- 分组
- 选择器分组
- 通配选择器 (*)css2引入
- 声明分组
- 各个声明最后使用分号;
- 类选择器和ID选择器
- 类选择器
- 多类选择器
- 各个词之间用空格分隔
- 不同平台的Internet Explorer 处理不同
- 多类选择器
- ID选择器
- 属性选择器
- 简单属性选择器 h1[class]{color:silver;}
- 根据具体属性值选择
- h1#page-title和 h1[id="page-title"]的差别
- 根据部分属性值选择
- p[class~="warning"]{font-weight:bold;}
- p.warning 和 p[class~="warning"] 应用到HTML文档时是等价的。
- p[class~="warning"]{font-weight:bold;}
- 特定属性选择类型
- [att|="val"]
- *[lang|="en"]{color:white;} 这个规则会选择lang属性等于en或者以en-开头的所有元素。
- 使用文档结构
- 后代选择器(包含选择器或上下文选择器)
- 选择器之间的空格是一种结合符
- 从右向左读
- 选择子元素 子结合符(>)
- 选择相邻兄弟元素 (+)
windows平台的 Internet Explorer 在IE6 之前不支持子选择器和相邻兄弟选择器。IE7对两者则提供了支持
- 伪类和伪元素
- 伪类选择器 (:)把某种幻想类关联到与伪类相关的元素
- 链接伪类 :link 、:visited
- 动态伪类 :focus、:hover 、:active
- 伪类的顺序 link-visited-focus-hover-active
- windows 平台的Internet Explorer在ie6 之前只允许动态伪类选择超链接,而不允许选择其他元素。IE7支持对所有元素都能应用:hover,但是不支持对表单元素应用:foucs 样式
- 动态样式的实际问题
- 重绘文档
- 选择第一个子元素
- 使用另一个静态伪类 :first-child来选择元素的第一个桌子元素
- windows 平台的Internet Explorer在ie6 之前不支持 :first-child,不过ie7支持
- 根据语言选择
- :lang() 伪类(从对应模式上来讲 像是 |=属性选择器)
- 结合伪类
- a:hover:link :long(de)
- windows 平台的Internet Explorer在ie6 之前不能正确识别这种组合伪类 只会注意到组合伪类中的最后一个伪类;IE7不存在这种限制,它会正确处理这些组合伪类
- 伪元素选择器()
- 设置首字母样式 :first-letter
- 设置第一行样式 :first-line
css2 中 :first-letter 和 :first-line 只能引用于标记或段落之类的块级元素,而不能引用于超链接等的行内元素
css2.1 中 :first-letter可应用于所有元素
- 设置之前和之后元素的样式
- :before h2:before{content:"}}";color:silver;}
- :after
- 设置之前和之后元素的样式
css 权威指南笔记(四)选择器的更多相关文章
- css权威指南--笔记
第1章 css和文档 1,元素:替换元素(img input),非替换元素(大多数span). 2,link:rel(代表关系:stylesheet,候选样式表:alternate styleshee ...
- css 权威指南笔记(一)
零零散散接触css将近5年,俨然已经成为一个熟练工.如果不是换份工作,我不知道自己差的那么远:在qunar的转正review中我这种“知其然而不知其所以然” 的状况被标明,我才意识到我已停步不前近两年 ...
- css 权威指南笔记( 五)结构和层叠之三种样式来源
CSS中的样式一共有三种来源:创作人员.读者和用户代理,来源的不同会影响到样式的层叠方式 首先,创作人员(author's+style)样式应该是我们最熟悉的,如果你是一个前端开发者,那么你写的那些样 ...
- css 权威指南笔记( 五)结构和层叠
特殊性 重要性 !important; 继承 向上传播例外,应用到body元素的背景样式可以传递到html元素,相应对的可以定义其画布. 大多数框模型属性(包括外边距.内边距.背景.边框)都不能继承 ...
- css 权威指南笔记
部分属性选择: 选择class 属性中包含warning的元素 [class~="warning"]{font-weight:bold} 子串匹配属性选择器: 在现代浏览器中得到支 ...
- css 权威指南笔记( 六)-基本视觉格式化
块级元素 百分数:边框的宽度不能是百分数,只能是长度.基本原则是只使用百分数将无法创建完全灵活的元素布局(即所有属性都可设置). 合并垂直外边距 相邻外边距会沿着竖轴合并.两个外边距中较小的一个会被较 ...
- css 权威指南笔记(三)结合css和XHTML
link rel stylesheet alternate stylesheet(候选样式表) title type media all screen print ..... 内联样式
- css 权威指南笔记(二)元素
替换元素 用来替换元素内容的部分并非有文档内容直接表示. img input 非替换元素 其内容由用户代理(通常是一个浏览器)在元素本身生成的框中显示. 块级元素 块级元素生成一个 元素框,(默认)会 ...
- css权威指南读书笔记
今天翻手机,翻到了许久之前看css权威指南时的笔记,遂移到博客中来. 1.属性选择器p.one class名为one的p元素p[class][name] 含有class和name属性的p元素p[cla ...
随机推荐
- 数据结构练习 00-自测5. Shuffling Machine (20)
Shuffling is a procedure used to randomize a deck of playing cards. Because standard shuffling techn ...
- Hust 1231 Coin
题目链接 题意: 亮亮有N个有瑕疵的硬币,有瑕疵意味着抛一枚硬币正面向上的概率 不等于 反面向上的概率 也即概率不等于0.5. 现在亮亮一次抛N个硬币 , 恰好有K个硬币正面向上 ,接着他又想抛一次 ...
- tyvj P1135 - 植物大战僵尸 最大权闭合图
P1135 - 植物大战僵尸 From ytt Normal (OI)总时限:10s 内存限制:128MB 代码长度限制:64KB 背景 Background 虽然这么多天了,,虽然 ...
- 在DJANGO的类视图中实现登陆要求和权限保护
以前接触的是基于函数的保护,网上材料比较多. 但基于类视图的很少. 补上! Decorating class-based views 装饰类视图 对于类视图的扩展并不局限于使用mixin.你也可以使用 ...
- 【 UVALive - 4287】Proving Equivalences (SCC缩点)
题意: 给出N个命题,要求你证明这N个命题的等价性 比如有4个命题a,b,c,d,我们证明a<->b, b<->c,c<->d,每次证明都是双向的,因此一共用了6次 ...
- truncate 空间不释放问题
SQL> set linesize 200 SQL> select segment_name, sum(bytes / 1024 / 1024/1024) from dba_segment ...
- 【HDOJ】1814 Peaceful Commission
2-SAT基础题目. /* 1814 */ #include <iostream> #include <vector> #include <algorithm> # ...
- bzoj1391
很像最大权闭合子图的题目s向每个工作连边,流量为收益每个工序,由工作i向对应机器连边,流量为租用费每个机器向t连边,流量为购买费显然跑最小割,ans=总收益-mincut ; type node=re ...
- bzoj3209
首先这道题目不难想到将答案转化为这种形式 2^s[2]*3*s[3]*…max*s[max] 这时候我们要分类讨论,设n的二进制位数为t 当1~n中二进制位数小于t时 我们可以直接用组合的知识,二进制 ...
- Apache HTTP Server suEXEC符号链接任意文件访问漏洞
漏洞版本: Apache HTTP Server 2.2.22 漏洞描述: Apache HTTP Server是一款开源的WEB服务程序 Apache HTTP Server包含的suEXEC会不安 ...