美文网首页
无标题文章

无标题文章

作者: mimang | 来源:发表于2016-08-12 14:53 被阅读0次

    CSS选择器
    一常用选择器
    通用选择器:“*”
    元素选择器
    id选择器:前面有一个 # 号
    类选择器:前面加符号 .
    给一个元素加上多个类名
    指定某一特定的类

    1属性选择器
    E[att] :选择具有att属性的E元素。需要选择有某个属性的元 素,而不论属性值是什么,可以使用简单属性选择器。
    可以根据多个属性进行选择,只需将属性选择器链接在一起
    即可。 E[att="val"]:选择具有att属性且属性值等于val的
    E 元素。进一步缩小选择范围,(只选择有特定属性值的
    元素。)
    E[att~="val"]:选择具有att属性且属性值有多个,其中一个的 值等于val的E元素。
    E[att|="val"]:选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素。
    E[att^="val"]:选择具有att属性且属性值为以val开头的字符串的E元素。
    E[att$="val"]:选择具有att属性且属性值为以val结尾的字符串的E元素。
    E[att*="val"]:选择具有att属性且属性值为包含val的字符串的E元素。

    2关系选择器
    后代选择器(包含选择器)ul li{}:后代选择器又称为包含选择器。后代选择器可以选择作为某元素后代的元素。
    子元素选择器ul>li:与后代选择器相比,子元素选择器只能选择作为某元素子元素的元素,缩小了选择范围
    相邻选择符:E+F:选择紧贴在E元素之后F元素。
    兄弟选择器E~F:选择E元素所有兄弟元素F。(只可以选择到之后的元素)

    3伪元素选择器
    E:first-letter/E::first-letter 设置元素内的第一个字符的样式。
    E:first-line/E::first-line设置元素内的第一行的样式。
    E:before/E::before在每个 E元素的内容之前插入内容。用来和content属性一起使用
    E:after/E::after在每个E元素的内容之后插入内容。用来和content属性一起使用
    E::selection设置对象被选择时的颜色。

    4伪类选择器结构伪类选择器
    E:first-child 父元素的第一个子元素E。
    :root:选择文档的根元素。
    E:last-child:最后一个子元素E。
    E:only-child:仅有的一个子元素E。
    E:only-of-type:只有一种类型的子元素。
    E:nth-child(n):元素的第n个子元素E。
    可以直接用数值:比如2
    可以用奇数(odd)偶数(even)
    可以用公式3n
    E:nth-last-child(n):匹配父元素的倒数第n个子元素E。
    E:first-of-type :匹配同类型中的第一个同级元素E。
    E:last-of-type:匹配同类型中的最后一个同级元素E。
    E:nth-of-type(n):匹配同类型中的第n个同级兄弟元素E。
    E:nth-last-of-type(n):匹配同类型中的倒数第n个同级兄弟元素E。
    E:empty :匹配没有任何子元素(包括text节点)的元素E。
    5UI伪类及其他选择器
    E:active 向被激活的元素添加样式。
    E:hover 当鼠标悬浮在元素上方时,向元素添加样式。
    E:link 向未被访问的链接添加样式
    E:visited 向已被访问的链接添加样式。
    E:focus 向拥有键盘输入焦点的元素添加样式。
    E:lang向带有指定 lang 属性的元素添加样式。
    input:checked 选择每个被选中的input元素。
    input:disabled 选择每个禁用的input元素
    input:enabled 选择每个启用的input元素。
    input:disabled 选择每个禁用的input元素

    E:target 选择当前活动的元素(某个被链接的元素)。

    :not(E) 选择E元素之外的每个元素。

    相关文章

      网友评论

          本文标题:无标题文章

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