你的位置:首页 > 网页设计

[网页设计]CSS——伪元素与伪类


伪类与伪元素

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

  :link

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

  :visited

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

  :hover

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

  :foucs

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

  :active

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

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

  :nth-child(n)

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

<body>  <div>    <p>p1</p>    <p>p2</p>    <span>span1</span>    <span>span2</span>  </div></body>

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