html伪类选择器

最新推荐文章于 2022-10-30 19:15:26 发布

mariner_zp

最新推荐文章于 2022-10-30 19:15:26 发布

阅读量1.8k

点赞数 3

分类专栏： HTML/CSS 文章标签： css html

本文链接：https://blog.csdn.net/weixin_41174502/article/details/105086190

版权

HTML/CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

什么是伪类选择器？
CSS伪类（pseudo-class）是一个以冒号(:)作为前缀，被添加到一个选择器末尾的关键字
当你希望样式在特定状态下才被呈现到指定的元素时，你可以往元素的选择器后面加上对应的伪类。
伪类选择器有哪些？
一：伪类选择器之状态类
:checked该伪类表示表单元素被选中的状态，可以用于单选按钮，复选框等元素上。
:hover 该伪类表示鼠标箭头放在被选中的元素上的状态，可以用于任意元素上，用来设置鼠标悬停样式
:active 该伪类表示表单元素、链接等元素被激活的状态，此处被激活的概念比较特殊（对于输入框而言，是鼠标左键按下且未抬起的时候；对于a元素，也是鼠标左键按下且未抬起的时候）
:focus 该伪类表示当用户点击,触摸,通过键盘的 “tab” 键选择表单元素、链接等元素时会被触发
示例代码：

 <style>
        .exp1:checked+span{
           color: red;
        }
        /*单选按钮被选中的时候男变成红色*/
        .exp2:focus{
            background-color: sienna;
        }
        /*向文本框内输入字体的时候背景颜色改变*/
        a{
            font-size: 18px;
        }
        a:link{
            color:black ;
        }
        /*链接未被访问的时候是黑色*/
        a:visited{
            color: gray;
        }
        /* 链接被访问过后变成灰色 */
        a:hover{
            color: blue;
        }
        /* 鼠标悬停的时候是蓝色 */
        a:active{
            color:red ;
        }
        /* 链接被激活的时候是红色 */
</style>

<body>
    <form action="">
        <input type="radio"class="exp1" name="check"><span>男</span>
        <input type="radio" name="check">女
        <input type="text" class="exp2">
    </form>
    <a href="http://www.baidu.com">百度一下，你就知道</a>
</body>

/*单选按钮被选中的时候男变成红色*/

/*向文本框内输入字体的时候背景颜色改变*/

/*链接未被访问的时候是黑色*/

/* 鼠标悬停的时候是蓝色 */

/* 链接被激活的时候是红色 */

/* 链接被访问过后变成灰色 */

注意：a标签的样式顺序，不可颠倒。可简记为l v h a （love and hate）
二：伪类选择器之结构类
:nth-child(n) 选择器匹配父元素的第n个元素，元素类型没有限制
示例代码：

<style>
        div:nth-child(2n){
            color: red;
        }
        /* 选中偶数标签，将其颜色变为红色 */
</style>

<body>
    <div>1</div>
    <p>2</p>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</body>

结果

因为第二个是p标签所以不变色

:nth-of-type(n) 选中匹配伪类选择器前标签的第n个元素，其他标签不占位

示例：

 <style>
        div:nth-of-type(2n){
            color: red;
        }
        /* 选中div的偶数标签，将其颜色变为红色 */
</style>
<body>
    <div>1</div>
    <p>2</p>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</body>

:nth-last-child(n)匹配父元素的倒数第n个元素

示例：

 <style>
        div:nth-last-child(2){
            color: red;
        }
        /* 选中倒数第二个标签且要是div，将其颜色变为红色 */
</style>
<body>
    <div>1</div>
    <p>3</p>
    <div>2</div>
    <div>4</div>
    <p>5</p>
    <div>6</div>
</body>

:nth-last-of-type(n) 选中匹配伪类选择器前标签的倒数第n个元素，其他标签不占位

示例：

 <style>
        div:nth-last-of-type(2){
            color: red;
        }
        /* 选中倒数第二个div标签，将其颜色变为红色 */
</style>

<body>
    <div>1</div>
    <p>3</p>
    <div>2</div>
    <div>3</div>
    <p>4</p>
    <div>5</div>
</body>

其他诸如:first-child、:first-of-type、:last-child、:last-of-type等等
三：伪类选择器之属性类
该选择器选择伪类前选择器所选中的元素中间包含attr属性的元素(attr属性名称)
[attr=val]:选择attr属性值被赋值为val的所有元素（相等）
[attr~=val]:选择attr属性中包含值为val的所有元素（包含）
[attr^=val]:选择attr属性的值以val开头的元素

[attr$=val]:选择attr属性值以val结尾的元素

[attr*=val]:选择attr属性值中包含字符val的所有元素

示例代码：

<style>
        div[class="box1"]{
            color: red;
        }
        /* div[class~="box1"]{
            color: blue;
        } */
</style>

<body>
    <div class="box1 box2">box1 box2</div>
    <div class="box2">box2</div>
    <div class="box3">box3</div>
    <div class="box4">box4</div>
</body>

结果：

=符号要属性名全部等于指定名称所以没有变色

对比：

<style>
      /* div[class="box1"]{
            color: red;
        } */
        div[class~="box1"]{
            color: blue;
        }
</style>

<body>
    <div class="box1 box2">box1 box2</div>
    <div class="box2">box2</div>
    <div class="box3">box3</div>
    <div class="box4">box4</div>
</body>