CSS3的常用属性(一)

前端外刊评论 2018-02-01

选择器

属性选择器(通过标签属性来选择)

  • 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: 结合锚点进行使用,出于当前锚点的元素会被选中
  • 其他不常用伪类选择器如: :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;      
      }<br />.ao{<br />text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;<br />}

盒模型

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

相关推荐