美文网首页
css--不同类型的选择器(二)

css--不同类型的选择器(二)

作者: 缺月楼 | 来源:发表于2019-01-03 23:43 被阅读7次

    该选择器不是选择元素,而是元素的某些部分,或仅在某些特定上下文中存在的元素。它们有两种主要类型 :伪类和伪元素。

    伪类(Pseudo-class)

    一个 CSS 伪类(pseudo-class) 是一个以冒号(:)作为前缀,被添加到一个选择器末尾的关键字,当你希望样式在特定状态下才被呈现到指定的元素时,你可以往元素的选择器后面加上对应的伪类(pseudo-class)。你可能希望某个元素在处于某种状态下呈现另一种样式,例如当鼠标悬停在元素上面时,或者当一个复选框被禁用或被勾选时,又或者当一个元素是它在 DOM 树中父元素的第一个子元素时。

    伪类选择器有还多.......

    选择器 示例 示例说明
    :checked input:checked 选择所有选中的表单元素
    :disabled input:disabled 选择所有禁用的表单元素
    :empty p:empty 选择所有没有子元素的p元素
    :enabled input:enabled 选择所有启用的表单元素
    :first-of-type p:first-of-type 选择每个父元素是p元素的第一个p子元素
    :in-range input:in-range 选择元素指定范围内的值
    :invalid input:invalid 选择所有无效的元素
    :last-child p:last-child 选择所有p元素的最后一个子元素
    :last-of-type p:last-of-type 选择每个p元素是其母元素的最后一个p元素
    :not(selector) :not(p) 选择所有p以外的元素
    :nth-child(n) p:nth-child(2) 选择所有 p 元素的父元素的第二个子元素
    :nth-last-child(n) p:nth-last-child(2) 选择所有p元素倒数的第二个子元素
    :nth-last-of-type(n) p:nth-last-of-type(2) 选择所有p元素倒数的第二个为p的子元素
    :nth-of-type(n) p:nth-of-type(2) 选择所有p元素第二个为p的子元素
    :only-of-type p:only-of-type 选择所有仅有一个子元素为p的元素
    :only-child p:only-child 选择所有仅有一个子元素的p元素
    :optional input:optional 选择没有"required"的元素属性
    :out-of-range input:out-of-range 选择指定范围以外的值的元素属性
    :read-only input:read-only 选择只读属性的元素属性
    :read-write input:read-write 选择没有只读属性的元素属性
    :required input:required 选择有"required"属性指定的元素属性
    :root root 选择文档的根元素
    :target #news:target 选择当前活动#news元素(点击URL包含锚的名字)
    :valid input:valid 选择所有有效值的属性
    :link a:link 选择所有未访问链接
    :visited a:visited 选择所有访问过的链接
    :active a:active 选择正在活动链接
    :hover a:hover 把鼠标放在链接上的状态
    :focus input:focus 选择元素输入后具有焦点
    :first-letter p:first-letter 选择每个<p> 元素的第一个字母
    :first-line p:first-line 选择每个<p> 元素的第一行
    :first-child p:first-child 选择器匹配属于任意元素的第一个子元素的 <p> 元素
    :before p:before 在每个<p>元素之前插入内容
    :after p:after 在每个<p>元素之后插入内容
    :lang(language) p:lang(it) 为<p>元素的lang属性选择一个开始值

    伪元素(Pseudo-element)

    跟伪类很像,但它们又有不同的地方。都是关键字,但伪元素前缀是两个冒号 (::) , 同样是添加到选择器后面去选择某个元素的某个部分。

    只在某些特定环境下会用到这些选择器

    选择器 说明
    :first-line 伪元素 "first-line" 伪元素用于向文本的首行设置特殊样式。
    :first-letter 伪元素 "first-letter" 伪元素用于向文本的首字母设置特殊样式
    CSS - :before 伪元素 ":before" 伪元素可以在元素的内容前面插入新内容。
    CSS - :after 伪元素 ":after" 伪元素可以在元素的内容之后插入新内容。
    :selection :selection 应用于文档中被用户高亮的部分(比如鼠标选中的部分)

    相关文章

      网友评论

          本文标题:css--不同类型的选择器(二)

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