css伪类选择器

学习最大

已于 2024-01-19 17:19:45 修改

阅读量547

点赞数 20

分类专栏： css选择器文章标签：前端 javascript html

于 2024-01-19 16:05:13 首次发布

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

版权

css选择器专栏收录该内容

4 篇文章 0 订阅

订阅专栏

3.否定伪类

作用：排除满足括号中条件的元素。

语法：:not（选择器）

代码示例：

 div>p:not(.fail){
            color: red;
        }

<body>
   <div>
    <p>小红 95分</p>
    <p>小明 95分</p>
    <p>小丽 85分</p>
    <p>小余 88分</p>
    <p class="fail">小七 56分</p>
    <p class="fail">小吴 24分</p>
   </div>
</body>

效果：

4.UI伪类

作用：

:checked 被选中的复选框或者单选按钮。
:enabled 可用的表单元素（没有disabled属性）。
:disabled 不可用的表单元素（有disabled属性）。

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input:checked{
            width: 100px;
            height: 100px;
        }
        input:enabled{
            background-color: green;
        }
        input:disabled{
            background-color: grey;
        }
    </style>
</head>
<body>
    <input type="checkbox">
    <input type="radio" name="sex">
    <input type="radio" name="sex">
    <input type="text">
    <input type="text" disabled>
</body>
</html>

效果：

5.目标伪类

作用：选中锚点所指向的元素。

语法：:target

代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            height: 300px;
            background-color: grey;
        }
        div:target{
            background-color: green;
        }
    </style>
</head>

<body>
    <a href="#one">去看第一个</a>
    <a href="#two">去看第二个</a>
    <a href="#three">去看第三个</a>
    <a href="#four">去看第四个</a>
    <a href="#five">去看第五个</a>
    <a href="#six">去看第六个</a>
    <br>
    <div id="one">第一个</div>
    <br>
    <div id="two">第二个</div>
    <br>
    <div id="three">第三个</div>
    <br>
    <div id="four">第四个</div>
    <br>
    <div id="five">第五个</div>
    <br>
    <div id="six">第六个</div>
</body>

</html>

6.语言伪类

作用：根据指定的语言选择元素。（本质是看lang属性的值）

语法::lang()

代码示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div:lang(en){
            color: green;
        }
        :lang(zh-CN){
            color: red;
        }
    </style>
</head>
<body>
    <div>你好</div>
    <div lang="en">ricky</div>
    <p>细心</p>
    <span>哈哈</span>
</body>
</html>

效果：