CSS伪元素与伪类 - 语折

CSS伪元素与伪类 - 语折,第1张

伪类与伪元素

伪类:在特殊性中占据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

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

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

  :nth-of-type(n)

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

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

p 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相反

欢迎分享,转载请注明来源:内存溢出

原文地址: http://www.outofmemory.cn/zaji/389192.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2018-05-31
下一篇 2018-05-31

发表评论

登录后才能评论

评论列表(0条)

保存