• 规则结构

  每个规则都有两个基本部分组成:选择器和声明块。声明块由一个或多个声明组成,每个声明则是一个属性-值对。

  • 元素选择器
  • 声明和关键字
    • 关键字一般由空格隔开;有一种情况例外 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文档时是等价的。

    • 特定属性选择类型

      •  [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 权威指南笔记(四)选择器的更多相关文章

  1. css权威指南--笔记

    第1章 css和文档 1,元素:替换元素(img input),非替换元素(大多数span). 2,link:rel(代表关系:stylesheet,候选样式表:alternate styleshee ...

  2. css 权威指南笔记(一)

    零零散散接触css将近5年,俨然已经成为一个熟练工.如果不是换份工作,我不知道自己差的那么远:在qunar的转正review中我这种“知其然而不知其所以然” 的状况被标明,我才意识到我已停步不前近两年 ...

  3. css 权威指南笔记( 五)结构和层叠之三种样式来源

    CSS中的样式一共有三种来源:创作人员.读者和用户代理,来源的不同会影响到样式的层叠方式 首先,创作人员(author's+style)样式应该是我们最熟悉的,如果你是一个前端开发者,那么你写的那些样 ...

  4. css 权威指南笔记( 五)结构和层叠

    特殊性 重要性 !important; 继承 向上传播例外,应用到body元素的背景样式可以传递到html元素,相应对的可以定义其画布. 大多数框模型属性(包括外边距.内边距.背景.边框)都不能继承 ...

  5. css 权威指南笔记

    部分属性选择: 选择class 属性中包含warning的元素 [class~="warning"]{font-weight:bold} 子串匹配属性选择器: 在现代浏览器中得到支 ...

  6. css 权威指南笔记( 六)-基本视觉格式化

    块级元素 百分数:边框的宽度不能是百分数,只能是长度.基本原则是只使用百分数将无法创建完全灵活的元素布局(即所有属性都可设置). 合并垂直外边距 相邻外边距会沿着竖轴合并.两个外边距中较小的一个会被较 ...

  7. css 权威指南笔记(三)结合css和XHTML

    link rel stylesheet alternate stylesheet(候选样式表) title type media all screen print ..... 内联样式

  8. css 权威指南笔记(二)元素

    替换元素 用来替换元素内容的部分并非有文档内容直接表示. img input 非替换元素 其内容由用户代理(通常是一个浏览器)在元素本身生成的框中显示. 块级元素 块级元素生成一个 元素框,(默认)会 ...

  9. css权威指南读书笔记

    今天翻手机,翻到了许久之前看css权威指南时的笔记,遂移到博客中来. 1.属性选择器p.one class名为one的p元素p[class][name] 含有class和name属性的p元素p[cla ...

随机推荐

  1. 数据结构练习 00-自测5. Shuffling Machine (20)

    Shuffling is a procedure used to randomize a deck of playing cards. Because standard shuffling techn ...

  2. Hust 1231 Coin

    题目链接 题意: 亮亮有N个有瑕疵的硬币,有瑕疵意味着抛一枚硬币正面向上的概率 不等于 反面向上的概率 也即概率不等于0.5. 现在亮亮一次抛N个硬币 , 恰好有K个硬币正面向上 ,接着他又想抛一次 ...

  3. tyvj P1135 - 植物大战僵尸 最大权闭合图

    P1135 - 植物大战僵尸 From ytt    Normal (OI)总时限:10s    内存限制:128MB    代码长度限制:64KB 背景 Background 虽然这么多天了,,虽然 ...

  4. 在DJANGO的类视图中实现登陆要求和权限保护

    以前接触的是基于函数的保护,网上材料比较多. 但基于类视图的很少. 补上! Decorating class-based views 装饰类视图 对于类视图的扩展并不局限于使用mixin.你也可以使用 ...

  5. 【 UVALive - 4287】Proving Equivalences (SCC缩点)

    题意: 给出N个命题,要求你证明这N个命题的等价性 比如有4个命题a,b,c,d,我们证明a<->b, b<->c,c<->d,每次证明都是双向的,因此一共用了6次 ...

  6. truncate 空间不释放问题

    SQL> set linesize 200 SQL> select segment_name, sum(bytes / 1024 / 1024/1024) from dba_segment ...

  7. 【HDOJ】1814 Peaceful Commission

    2-SAT基础题目. /* 1814 */ #include <iostream> #include <vector> #include <algorithm> # ...

  8. bzoj1391

    很像最大权闭合子图的题目s向每个工作连边,流量为收益每个工序,由工作i向对应机器连边,流量为租用费每个机器向t连边,流量为购买费显然跑最小割,ans=总收益-mincut ; type node=re ...

  9. bzoj3209

    首先这道题目不难想到将答案转化为这种形式 2^s[2]*3*s[3]*…max*s[max] 这时候我们要分类讨论,设n的二进制位数为t 当1~n中二进制位数小于t时 我们可以直接用组合的知识,二进制 ...

  10. Apache HTTP Server suEXEC符号链接任意文件访问漏洞

    漏洞版本: Apache HTTP Server 2.2.22 漏洞描述: Apache HTTP Server是一款开源的WEB服务程序 Apache HTTP Server包含的suEXEC会不安 ...