Css进阶

作者: 饥人谷_Pizza | 来源:发表于2015-12-02 18:48 被阅读144次

Css选择器

  • 基础选择器
    1."#" ID选择器
    2."." 类(Class)选择器
    3."Element" 元素选择器

  • 组合选择器
    1.E,F 并列选择器
    2.E F 后代选择器
    3.E>F 直接后代选择器/子元素选择器
    4.E+F 直接相邻选择器(匹配E元素之后的相邻同级元素F)
    5.E~F 普通相邻选择器(匹配E元素之后的所有元素F 无论相邻与否)

  • 属性选择器
    1.E[attr]: 匹配所有具有属性attr的元素 例如 div[id]就能选取所有具有id属性的div
    2.E[attr = value] 匹配属性attr值为value的元素,例如div[id=test],匹配id=test的div
    3.E[attr ~= value] 匹配所有属性attr具有多个空格分隔、其中一个值等于value的元素
    4.E[attr ^= value] 匹配属性attr的值以value开头的元素
    5.E[attr $= value] 匹配属性attr的值以value结尾的元素
    6.E[attr *= value] 匹配属性attr的值包含value的元素

  • 伪类选择器
    1.E:hover 匹配鼠标悬停的元素E
    2.E:link 匹配未被点击的链接
    3.E:visited 匹配被点击的链接

  • 伪元素选择器
    1.E::first-line 匹配E元素内容的第一行
    2.E::first-letter 匹配E元素内容的第一个字母
    3.E::before 在E元素之前插入生成的内容
    4.E::after 在E元素之后插入生成的内容
    before和after常跟content连用

Css的优先级

1.在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式

2.作为style属性写在元素标签上的内联样式

3.id选择器

4.类选择器

5.伪类选择器

6.属性选择器

7.标签选择器

8.通配符选择器

9.浏览器自定义

对齐

  • 块元素的对齐
    `div{
    margin: 0px auto;
    }
    p.s. 需要设置div的宽度才可奏效,上下margin可以不设置。
  • 文本对齐
    1.设置行高line-height等于外层容器的height
    2.设置上下padding相等
    `

相关文章

网友评论

      本文标题:Css进阶

      本文链接:https://www.haomeiwen.com/subject/ewyjhttx.html