码迷,mamicode.com
首页 > Web开发 > 详细

css3新增属性02

时间:2017-08-04 15:21:26      阅读:180      评论:0      收藏:0      [点我收藏+]

标签:checked   水平   类型   界面   字母   动态   empty   基础   第一个   

CSS3 选择器

基础选择器

  • 通配符选择器 *
  • ID选择器 #Id
  • class选择器 .classname
  • 元素选择器 tagName
  • 群组选择器 slecter,selecter

层次选择器

  • 后代选择器 selecter selecter
  • 子元素选择器 selcter>selecter
  • 相邻兄弟选择器 selecter+selecter
  • 通配兄弟选择器 selecter~selecter

属性选择器

  • selecter[attr] 包含attr属性的元素
  • selecter[attr=val] attr属性值是val的元素
  • seldcter[attr^=val] attr属性值是以val开头的元素
  • selecter[attr$=val] attr属性值是以val结束的元素呢
  • selecter[attr~=val] attr属性值val 或 包含val(两个值以空格隔开,其中一个是val)
  • selecter[*=val] attr属性值中包含val的元素
  • selecter[|=val] attr属性值是val或值是 val=*

伪类选择器

  • 动态伪类选择器

    • :hover
    • :link
    • :visited
    • :active
    • :focus
  • 目标伪类选择器

    • :target
  • 语言伪类选择器

    • :lang(ch)
  • UI元素伪类选择器

    • :enabled 匹配用户界面上处于可用状态的表单元素
    • :diabled 匹配用户界面上处于禁止状态的表单元素
    • E:checked 匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)
  • 结构伪类选择器

    • :root 根元素选择器。在HTML中,根元素 永远是HTML
    • E:first-child 匹配父元素的第一个子元素
    • :last-child 匹配父元素的最后一个子元素
    • nth-child(n) 匹配父元素的第N个子元素E,假设该子元素不是E,则选择符无效
    • nth-last-child(n) 匹配父元素的倒数第N个子元素E,假设该子元素不是E,则选择符无效
    • only-child 匹配父元素仅有一个子元素E
    • first-of-type 匹配同类型中的第一个同级兄弟元素
    • last-of-type 匹配同类型中的最后一个同级兄弟元素
    • nth-of-type(n) 匹配同类型中第n个同级兄弟元素
    • nth-last-of-type() 匹配同类型中倒数第n个同级兄弟元素
    • only-of-type() 匹配同类型中唯一一个同级兄弟元素
    • empty 匹配空的元素(不能有子元素也不能有内容)
  • 否定伪类选择器

    • not(selecter)

伪元素选择器

  • :first-letter / ::first-letter 第一个字母
  • :first-line / ::first-line 第一行
  • : before / ::before 设置在对象前发生的内容,用来和content属性一起使用,content后面可跟文字或图片。一般默认加入的内容为行内元素
  • : after / ::after 设置在对象后发生的内容,
  • ::placeholder 设置对象文字占位符的样式
  • ::selection 设置对象被选择时的样式

CSS新增边框属性

圆角

  • border-radius设置或检索对象使用圆角边框。提供2个参数,2个参数以“/”分隔,每个参数允许设置1~4个参数值,第1个参数表示水平半径,第2个参数表示垂直半径,如第2个参数省略,则默认等于第1个参数 水平半径:如果提供全部四个参数值,将按上左(top-left)、上右(top-right)、下右(bottom-right)、下左(bottom-left)的顺序作用于四个角。 如果只提供一个,将用于全部的于四个角。 如果提供两个,第一个用于上左(top-left)、下右(bottom-right),第二个用于上右(top-right)、下左(bottom-left)。 如果提供三个,第一个用于上左(top-left),第二个用于上右(top-right)、下左(bottom-left),第三个用于下右(bottom-right)。 垂直半径也遵循以上4点。 对应的脚本特性为borderRadius。

  • border-top-left-radius

  • border-top-right-radius
  • border-bottom-left-radius
  • border-bottom-right-radius

盒子阴影

  • box-shadow:length1,length2,length3,length4,color ,inset
  • length1:用来设置对象的阴影水平 偏移值,可以为负值
  • length2:用来设置对象的阴影竖直 偏移值,可以为负值
  • length3:用来设置对象的阴影模糊值,不可以为负值
  • length3:用来设置对象的阴影外延值(阴影宽度),不可以为负值
  • color:用来设置阴影颜色
  • inset设置对象的阴影对象为外阴影。该值为空时,则对象的阴影类型为外阴影

css3新增属性02

标签:checked   水平   类型   界面   字母   动态   empty   基础   第一个   

原文地址:http://www.cnblogs.com/zgh929/p/7284951.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!