CSS伪类选择器简单介绍

CSS伪类选择器链接伪类选择器 :link :visited :hover :active 注意：书写的时候尽量不要颠倒顺序，记忆顺序是 love hate 一般工作中经常使用的属性如下： <style> a{ fo...

CSS伪类选择器

链接伪类选择器

:link

:visited

:hover

:active

注意：书写的时候尽量不要颠倒顺序，记忆顺序是 love hate

一般工作中经常使用的属性如下：

<style>
   a{
     font-size: 14px;
     font-weight: bold;
     color: darkgray;
        }
  a:hover{
      color: red;
        }
</style>
</head>
<body>
    <a href="">首页</a>
</body>

结构伪类选择器（css3）

：first-child：选取父元素的首个子元素的指定选择器

：last-child：选取父元素的最后一个子元素的制定选择器

：nth-child（n）：匹配属于父元素的第N个子元素，不论元素的类型

：nth-last-child（n）：匹配从父元素最后一个子元素开始倒数的子元素

代码示例：

<style>
    li:first-child{ /*选择第一个子元素*/
        color: red;
    }
    li:last-child{ /*选择最后一个子元素*/
        color: blue;
    }
    li:nth-child(3){/*选择第三个子元素 n 代表第几个的意思*/
        color: orange;
    }
    </style>
</head>
<body>
<ul>
    <li>第一个子元素</li>
    <li>第二个子元素</li>
    <li>第三个子元素</li>
    <li>第四个子元素</li>
    <li>第五个子元素</li>
    <li>第六个子元素</li>
    <li>第七个子元素</li>
</ul>
</body>

更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。

程序员编程交流QQ群：805358732

如果你想用Python开辟副业赚钱，但不熟悉爬虫与反爬虫技术，没有接单途径，也缺乏兼职经验
关注下方微信公众号：Python编程学习圈，获取价值999元全套Python入门到进阶的学习资料以及教程，还有Python技术交流群一起交流学习哦。

发表于 2021-07-13 11:22
阅读 ( 608 )
分类：WEB前端开发

CSS伪类选择器简单介绍

你可能感兴趣的文章

相关问题

0 条评论

作家榜 »