CSS3中的选择器及使用

1. 关系选择器：

        div>p 选择所有作为div元素的子元素p

        div+p 选择紧贴在div元素之后p元素

        div~p 选择div元素后面的所有兄弟元素p

    2. 属性选择器：

        [attribute]选择具有attribute属性的元素。

        [attribute=value]选择具有attribute属性且属性值等于value的元素。

        [attribute~=value]选择具有attribute属性且属性值为一用空格分隔的字词列表，其中一个等于value的元素。 

        [attribute|=value]选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素。

        [attibute^=value]匹配具有attribute属性、且值以valule开头的E元素

        [attribute$=value]匹配具有attribute属性、且值以value结尾的E元素

        [attribute*=value]匹配具有attribute属性、且值中含有value的E元素 

    3. 结构性伪类选择器：

        ::first-letter设置对象内的第一个字符的样式。 

        ::first-line设置对象内的第一行的样式。 

        :before设置在对象前（依据对象树的逻辑结构）发生的内容。

        :after设置在对象后（依据对象树的逻辑结构）发生的内容。

        :lang(language)匹配使用特殊语言的E元素。 

        :element1~element2:

        :first-of-type匹配同类型中的第一个同级兄弟元素

        :last-of-type匹配同类型中的最后一个同级兄弟元素

        :only-of-type匹配同类型中的唯一的一个同级兄弟元素

        :only-child匹配父元素仅有的一个子元素

        :nth-child(n)匹配父元素的第n个子元素

        :nth-last-child(n)匹配同类型中的倒数第n个同级兄弟元素

        :last-child()匹配父元素的最后一个子元素

        :root匹配元素在文档的根元素。在HTML中，根元素永远是HTML 

        :empty匹配没有任何子元素（包括text节点）的元素

    4. *状态伪类选择器

        :link 设置超链接a在未被访问前的样式。

        :visited 设置超链接a在其链接地址已被访问过时的样式

        :active     设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式

       *:hover    设置元素在其鼠标悬停时的样式

       *:focus    设置元素在其获取焦点时的样式

        :target    匹配相关URL指向的E元素

        :enabled   匹配用户界面上处于可用状态的元素

        :disabled   匹配用户界面上处于禁用状态的元素

        :checked   匹配用户界面上处于选中状态的元素

        :not(selector)匹配不含有selector选择符的元素

        ::selection  设置对象被选择时的样式

    5. 其他伪类选择器

        E:not(s) ： {attribute}

        匹配所有不匹配简单选择符s的元素E

        p:not(.bg) {background-color:#00FF00;}

 

 

 

欢迎转载，转载需注明地址： http://www.luowebs.com/Skill_desc/97/265.html

很赞哦！ (0)