CSS伪元素与伪类 - 语折

php中文网
发布: 2016-05-20 16:50:22
原创
1583人浏览过

伪类与伪元素

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

  :link

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

  :visited

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

  :hover

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

  :foucs

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

  :active

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

立即学习前端免费学习笔记(深入)”;

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

  :nth-child(n)

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

<span style="color: #800000;"><body>
    <div>
        <p>p1</p>
        <p>p2</p>
        <span>span1</span>
        <span>span2</span>
    </div>
</body></span>
登录后复制

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应用样式

NovelAI
NovelAI

AI 辅助写作、讲故事,基于你自己的作品创造出类似人类的写作。

NovelAI 236
查看详情 NovelAI

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

 

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号