CSS注意事项（二）

选择器

标签选择器(学会灵活应用)

单个标签 直接使用标签名 
多个标签 复杂选择器 
div p 选择div内部的全部p元素 
div > p 父元素为div的全部p元素 
li + li 紧接在li以后的li元素 
p ~ ul 选择前面有p元素的每一个ul元素

好比对多个li添加下划线 
可直接使用

ul li+li{

border-top:1px solid #ccc;

}

id/class选择器 略过

属性选择器

• 属性名选择 img[title]含有title属性的img标签
• 属性名+属性值的选择器 好比 

• input[type='text']{ 
  }

   

伪类和伪元素

伪类

• UI 伪类

• a:link 
  a:hover 
  a:activted 
  a:visited

   

a标签的四个伪类排列顺序和缘由

link指有连接属性时 visited 连接地址已经被访问过 active 被用户激活 hover鼠标悬停

根据使用情景肯定a状态

• 未被操做时 具有link属性
• 鼠标通过时 hover和link两个属性
• 鼠标点击时 具备link hover active
• 访问完成 具备link visted hover 三种状态 
  区分hover visited 以及link三种样式便可 
  四者样式顺序：link visited hover active

  缘由：link和visited为静态常态，但一旦被访问应该覆盖原样式 
  在鼠标操做时，a标签同时具有hover 和active 状态 因此active必须放在hover以后

• 结构化伪类 
  好比：

• table tr:nth-child(even){} 
  table tr:nth-child(odd){} 
  table tr:first-child{} 
  table tr:last-child{} 
  table tr:nth-child(2n+1)

   

伪元素

:before 和 ：after很是经常使用 
例如：

<style>

span:before{

content:'你好,'

}

span:after{

content:'!'

}

</style>

<span>Shirly</span>

选择器优先级

使用注意：

• 尽可能对外层添加class, 内层使用多级选择器，下降初步布局样式的优先级以便js处理

首先明确选择器表达式的重要程度。 
公式: I-C-E 

I–id —–C-class —— E-element 

遇到一个id就往特指度数值中加100，遇到一个class就往特指度数值中加10，遇到一个element就往特指度数值中加1
还有一个重点要注意：!important优先级最高，高于上面一切。* 选择器最低，低于一切。

盒子模型

• 盒子宽度包括：padding+margin+boeder+内容
  • div默认为block 内容宽度会由于 padding或margin 宽度变化而变化
• 包裹内容(自己不定义宽度) 盒子宽度=内容宽度+padding+margin
  • div display:table 
    咱们设定的宽度为盒子内容宽度，怎么解决问题？ 
    建议要领：给div添加下面的属性便可实现设定的宽度即为盒子宽度。

box-sizing:border-box;

纵向margin重叠问题

纵向的margin会重叠，值较大的覆盖掉较小的。

利用div的boder画小三角

div{

border:10 solid;

border-color:#444 transparent transparent transparent ;

width:0;

}