CSS3的常用属性（一）

选择器

属性选择器（通过标签属性来选择）

• E[attr]： 表示只要元素<E>存在属性attr就能被选中  如： div[class]
• E[attr=val]： 表示元素<E>存在属性attr的值等于val，即可被选中  如： div[class="val"]
• E[attr*=val]： 表示元素<E>存在属性attr的值包含val，且在任意位置  如： div[class*="text_val"]
• E[attr^=val]： 表示元素<E>存在属性attr的值包含val，且在开始位置  如： div[class^="val_one"]
• E[attr$=val]： 表示元素<E>存在属性attr的值包含val，且在结束位置  如： div[class$="two_val"]

伪类选择器

• E:first-child： 选择所有元素的第一个子元素<E>（该伪类很容易让人误解，且是在CSS2中定义）
  • p:first-child  表示选择器匹配任何元素的第一个子元素<p>
  • p>i:first-child  表示选择器匹配所有<p>元素的第一个子元素<i>
  • p:first-child i  表示选择器匹配任何元素的第一个子元素<p>中的所有<i>元素
• E:last-child： 选择元素的最后一个子元素（与E:first-child相似）
• E:nth-child(n)： 选择所有元素的子元素<E>，且<E>元素是符合n制定的规则的
  • E:nth-child(3)： 选中第3个子元素<E>
  • E:nth-child(n)： 选中全部的子元素<E>，因为n遵循线性变化，从0，1，2，3，4…… 当n<=0时，选取无效
  • E:nth-child(2n-1)： 选中所有的奇数的<E>
  • E:nth-child(-n+5)： 选中前5个<E>   注意： E:nth-child(5-n) 这样写是没有作用的
  • E:nth-last-child(-n+5)： 选中后5个<E>
  • E:nth-child(even)： 选中所有的偶数的子元素<E>  补充： E:nth-child(odd)  所有的奇数
• E:empty： 选中没有任何内容的<E>元素，包括空格
• E:target： 结合锚点进行使用，出于当前锚点的元素会被选中
• E:not(selector)： 除selector（任意选择器）外的元素都会被选中
• 其他不常用伪类选择器如： :nth-of-type()，:nth-last-of-type()，:first-of-type，:last-of-type，:only-child，:only-of-type等

伪元素选择器

• E::before，E::after： <E>元素内部的开始和结束创建一个元素，该元素是行内元素，且需结合content属性使用
  特别说明： 这两个选择器在旧版本当中是伪类选择器（不存在伪元素的概念），新版本下E:before，E:after会被自动识别为E::befote，E::after

• E::first-letter： 文本的第一个字母或文字
• E::first-line： 文本第一行
• E::selection： 选中文本的样式

颜色

• rgba(0,0,0,0.1)： 色彩空间，一种新的颜色的表示方式，其中R（red），G（green），B（blue），A（alpha，不透明度）
• hsla(200,%10,%10,1)： H（hue，色调， 取值范围0~360，其中0/360表示红色，120表示绿色，240表示蓝色），S（saturation，饱和度，取值范围0%~100%），L（lightness，亮度，取值范围0%~100%），A（alpha，不透明度，取值范围0~1）
  补充： opacity（不透明度）只能针对整个盒子设置，子盒子及其内容会继承父盒子的不透明度，而rgba，hsla可应用于任何设置颜色的地方，且不具有继承性

文本阴影

• text-shadow： 可分别设置偏移量，模糊度，颜色（可设透明度）
  • 水平偏移量：正值向右，负值向左
  • 垂直偏移量：正值向下，负值向上
  • 模糊度不能为负值
    举例说明：
    

    文字凸起：
    .tu{
    text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;      
    }
    .ao{
    text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
    }

盒模型

• box-sizing： css中通过box-sizing来指定盒子模型；box-sizing有两个值；分别是：
  • content-box： 盒子的实际宽度等于width值加上border值加上padding值，是默认值
  • border-box： 盒子的实际宽度等于设置的width值，即使定义了border和padding，也不会改变盒子的实际宽度