CSS3中的选择器

作者: 假行僧396741 | 来源:发表于2016-12-13 23:53 被阅读23次
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属性且属性值为以value开头并用连接符"-"分隔的字符串的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;}

相关文章

  • 初级了解css3伪类选择器

    在 CSS3 中,选择器是一种模式,用于选择需要添加样式的元素。 先来了解一下css3选择器的分类 css3选择器...

  • CSS 3 选择器

    CSS3追加的选择器 在CSS3中,追加了三个属性选择器分别为 这样使得选择器有了通配符的概念。 结构性伪类选择器...

  • CSS3

    CSS3 新增选择器 CSS3 中,相对于 CSS2.1 版本的 7 个选择器,增加了更多其他的选择器,实现了更多...

  • 第2章 CSS3选择器-1

    第2章 CSS3选择器 W3C在CSS3的工作草案中把选择器独立出来成为一个模块。实际上,选择器是CSS只是中的重...

  • 4-14 序选择器

    CSS3中新增的选择器最具代表性的就是序选择器

  • CSS3属性选择器

    CSS3中属性选着器增加了3个 结构性伪类选择器 CSS3结构性伪类选择器 CSS3选择器详解二 第二部分小节 、...

  • CSS3选择器 属性选择器

    CSS3选择器 属性选择器 :root根选择器 就相当于html :not 选择器称为否定选择器,和jQuery中...

  • 第2章 CSS3选择器-4

    2.9 否定伪类选择器 否定伪类选择器":not()"是CSS3的新选择器,类似jQuery中的":not()"选...

  • CSS3知识概要总结之选择器篇(二)

    是的,从这里开始我们就开始学习CSS3的选择器了,学习资源CSS3选择器 属性选择器 属性选择器 发现属性选择器真...

  • HTML5和CSS3新增内容

    CSS3选择器有哪些? 属性选择器、伪类选择器、伪元素选择器。 CSS3新特性有哪些? 颜色:新增RGBA,HSL...

网友评论

    本文标题:CSS3中的选择器

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