CSS进阶

CSS进阶

CSS权重

概念

当不同的选择器匹配到同一个标签并对其同一个CSS属性同时进行设置时(即层叠)，CSS提供了一套权重机制解决属性的最终归属问题，根据权重大小来决定CSS属性的最终归属。

权重计算方式

比较权值

给每一种基础的选择器(id、class、标签、伪类)设置为不同的权值，权重的数值即为选择器的权值之和。其中id选择器：100、class选择器和伪类选择器：10、标签选择器：1。

例如：

html:
<ul id="list" class='list'></ul>
css:
/* 权值为1+10+1=12 */
body .list li {
    color:red;
}
/* 权值为100+1 =101 最终颜色以此为准*/
#list li {
    color:green;
}

比较数量

按行内样式->id选择器->class选择器->标签选择器的顺序比较数量，数量多的权重更高。

例如：

html:
<ul id="list" class='list'></ul>
css:
/* 数量依次为(0,0,1,2) */
body .list li {
    color:red;
}
/* 数量依次为(0,1,0,1) 最终颜色以此为准*/
#list li {
    color:green;
}

CSS继承

部分CSS属性可由父标签传递给子标签。

自动继承的CSS属性

• 以font开头的系列
• text-align
• line-height
• color
• cursor
• list-style
• opacity

手动继承

css属性名:inherit;

可以通过继承减少代码量。

伪元素

概念

CSS伪元素是用于设置元素指定部分的样式。可以理解为特殊的CSS选择器。可以实现给首行、首个字母设置样式、针对用户选择的文字设置样式、在元素的内容之前或之后插入内容。

语法

• ::first-line：给第一行文字设置样式，支持块级标签：div 、p 、h1 。

  p::first-line{
      color:red;
  }
  

• ::first-letter：给标签内容的第一个字符设置样式。

  p::first-letter{
      color:blue;
  }
  

• ::selection：给用户选中的内容设置样式。

  ::selection{
      color:green;
  }
  

• ::before：在标签内容之前插入一段内容

  ::after：在标签内容之后插入一段内容

  ::before{
      content:""
  }
  
  ::after{
      content:""
  }
  

  • content：是::before 和::after 才能使用的CSS属性，指需要添加什么内容，可以是文本或图片。

  • 无论是::before或者是::after，生成的内容都以行内元素来进行排列。但我们可以对伪元素设置定位、用display来改变伪元素的显示模式。

  • 应用：可实现如下标签效果

    

    div{
        width: 200px;
        height: 30px;
        background-color: red;
        margin-left: 200px;
        position: relative;
    }
    div::after{
        content: " ";
        display: block;
        width: 0px;
        height: 0px;
        position: absolute;
        top: 0;
        right: -30px;
        border:15px solid transparent;
        border-left:15px solid green;
    }/* 相当于只留左边框 */
    div::before{
        content: " ";
        display: block;
        width: 0px;
        height: 0px;
        position: absolute;
        top: 15px;
        left: -15px;
        border:15px solid transparent;
        border-right:15px solid black;
        z-index: -1;
    }/* 相当于只留右边框 */
    

CSS兼容性

浏览器内核

不同浏览器厂商对HTML和css的解析是不一样的，这是厂商所设计出来的浏览器内核不一致的缘故。

五大主流浏览器

• IE：94年出世，一出世就开启第一场浏览器大战，和网景公司的navigator浏览器争夺市场，IE大获全胜。IE捆绑在windows系统上。IE8在08年出来，第一次采用了HTML和css的标准。从IE8开始，兼容性问题都得到了改善。目前就时浏览器兼容，到IE8即可。trident内核。
• Chrome：08年由谷歌出品，由其强大的后台，以及高性能，迅速占领市场。到现在应该国内是40%。webkit-借鉴了苹果浏览器的内核，自己更新换代，目前是blink内核。
• Firefox：前身就时网景公司的navigator浏览器，第一次浏览器大战失败之后，网景公司被收购，2003年有一些前网景员工成立了基金会，研发了火狐浏览器，经历了第二次浏览器大战后，成为了五大主流浏览器之一。
• Opera：目前最惨浏览器官方。在一开始占领了浏览器20%以上，到7.0版本是巅峰时期，但后来opera是抛弃了自己的浏览器内核，采用了跟谷歌一起研发的内核，导致自己这边用户体验不好，用户群体一直在丢失，目前全球占有率不到1%。
• Safari：2003年出来的苹果浏览器，并且引发了第二次浏览器大战，但状况是百家争艳。Safari是mac专用，所以份额不低。webkit内核。
• 目前国内没有优秀的自研浏览器内核，用的都是国外的，比如IE和谷歌的内核。

CSS Hack

概念

为了在不同浏览器中呈现效果一致，针对不同浏览器书写CSS兼容代码的过程就叫CSS Hack。

书写方式

• CSS属性前缀法：可以通过只有某些浏览器才能识别的特殊符号，其他浏览器会忽略，以此来达到hack的目的。

  color\0:red;  \0 ie8+能识别
  
  -webkit-opacity: 0.5;  /*Chrome和早期Safari能识别，针对老旧版本，新版本则不用*/
  -ms-opacity:  /*针对IE低版本*/
  -moz-opacity:/*Firefox低版本*/
  -o-opacity:/* 针对Firefox低版本以及Opera低版本*/
  

• CSS选择器前缀法：利用特殊的只能被某些浏览器识别的CSS选择器来达到hack的目的

  @media \0 screen{
      div{
          color:red;
      }
  }/*只有IE8能识别*/
  

• 条件注释：针对IE各版本，利用特殊的注释，能够实现css文件只能是某些IE版本能够正确识别并加载CSS文件

  <!--[if ie 8]>
     只有ie8才能看到里面的代码并执行
     <link href="ie8.css">
  <![endif]-->
  
  <!--[if lte ie 9]>
    只有ie9及以下才能看到里面的代码并执行
     <link href="ie8.css">
  <![endif]-->
  
  <!--[if gte ie 10]>
  只有ie10及以上才能看到里面的代码并执行
  <link href="ie10.css" />
  <![endif]-->
  

  • lte：指的是小于或等于
  • gte:指的是大于或等于
  • lt指的是小于
  • gt:指的是大于

兼容性查询

可在该网站查询最新的兼容性：www.caniuse.com。