• 技术文章 >web前端 >html教程

    CSS伪元素与伪类 - 语折

    2016-05-20 16:50:22原创603

    伪类与伪元素

    伪类:在特殊性中占据0,0,1,0

      :link

        向未访问的链接添加特殊的样式。也就是说,链接所指的 URI 尚未出现在用户代理的历史中。这种状态与 :visited状态是互斥的。

      :visited

        对已访问的链接添加样式。

      :hover

        对鼠标悬停时的链接应用样式

      :foucs

        对鼠标聚焦的链接应用样式

      :active

        向激活(在鼠标点击与释放之间发生的事件)的元素添加特殊的样式。

      对于上述伪类,要遵循顺序书写!!

      :nth-child(n)

        从父元素匹配索引为n的子元素,设置样式,n从1开始 nth-child(1)与first-child相同

    
        

    p1

    p2

    span1 span2

    div p:nth-child(1)时 为第一个p元素应用样式

    div span:nth-child(1)时 匹配不到任何元素,以为span为div的第三个子元素

      :nth-of-type(n)

        从父元素匹配第n个指定元素的子元素 nth-of-type(1)与first-of-type相同

    div p:nth-of-type(1)时 为p1应用样式

    div span:nth-of-type(1)时 为span1应用样式

      :target

        在涉及的uri被使用的时候,把样式应用到指定元素上。

      :empty

        选择没有子元素(包括文本节点)的元素。

      :root 

        选择文档树中的第一个元素 在html中 root永远指定html元素,主要是为了提高权重。

      :not

        E:not(F){},选择父元素E中除了F的所有元素 应用样式。

      :checked

        选择被选中的元素应用样式,多用于表单的单选,复选框。

      :disabled/:enable

        选择禁止输入/允许输入的元素应用样式,多用于input中

    伪元素:所有的伪元素都必须放在所有选择器之后,其特殊性为0,0,0,1

      ::first-letter

        设置首字母样式

      ::first-line

        设置第一行样式

      ::before

        E::before{content:"";color:red;}

        对E元素之前添加一个行内元素,其内容为content中的内容,可自行设置样式

      ::after

        与::before相反

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:CSS——伪元素与伪类 - 语折
    上一篇:响应式框架中,table表头自动换行的解决办法 - 飛火流星 下一篇:CSS选择器的一些记录 - jerrylsxu
    大前端线上培训班

    相关文章推荐

    • html怎么设置元素不可见• html怎么设置表格标题• html怎么去掉input边框• html图片的透明度怎么设置• html div怎么设置大小

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网