css伪类选择器

最新推荐文章于 2024-10-05 17:04:37 发布

学习最大

最新推荐文章于 2024-10-05 17:04:37 发布

阅读量346

点赞数 5

文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/m0_62583212/article/details/135654656

版权

本文详细介绍了CSS中的动态伪类（:link,:visited,:hover,:active,:focus）以及结构伪类（:first-child,:last-child,:nth-child,:first-of-type,:last-of-type,:nth-of-type）的用法和示例，帮助开发者更好地理解和应用这些选择器来控制网页样式。

摘要由CSDN通过智能技术生成

1.动态伪类

:link 超链接未被访问的状态。
:visited 超链接被访问后的状态。
:hover 鼠标悬停在元素上的状态。
:active 元素激活的状态。
激活：按下鼠标不松开。注意：lvha顺序原则。
:focus 获取焦点的元素。

代码示例：

<body>
    <a href="http://www.baidu.com">去百度</a>
    <a href="http://www.jd.com">去京东</a>
    <br>
    <input type="text">
</body>

<style>
        /* 选中的是未访问过得a元素 */
        a:link{
            color: coral;
        }
       /* 选中的是访问过得a元素 */
        a:visited{
            color: darkgray;
        }
        /* 选中的是鼠标悬浮的a元素 */
        a:hover{
            color: darkred;
        }
        /* 选中的是激活中的a元素 */
        a:active{
            color:darksalmon;
        }
        input:focus{
            color: orange;
            background-color: green;
        }
    </style>

效果图：

2.结构伪类

1. :first-child 所有兄弟元素中的第一个

div>p:first-child{
            color: red;
        }

2. :last-child 所有兄弟元素中的最后一个

 div>p:last-child{
            color: red;
        }

3. :nth-child 所有兄弟元素中的第n个

 div>p:nth-child(3){
            color: red;
        }

只显示偶数个

 div>p:nth-child(2n){
            color: red;
        }

只显示奇数个

 div>p:nth-child(2n+1){
            color: red;
        }

显示前n个（例子数字5）

 div>p:nth-child(-n+5){
            color: red;
        }

4. :first-of-type 所有同类型兄弟元素中的第一个。

 div>p:first-of-type{
            color: red;
        }

5. :last-of-type 所有同类型兄弟元素中的最后一个。

div>p:last-of-type{
            color: red;
        }

5. :nth-of-type 所有同类型兄弟元素中的第n个。

  div>p:nth-of-type(2){
             color: aquamarine;
        }

html

  <div>
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
        <p>6</p>
        <p>7</p>
        <p>8</p>
        <p>9</p>
        <p>10</p>
    </div>