CSS3伪类选择器

最新推荐文章于 2023-08-12 17:13:28 发布

浩哥学习编程之路

最新推荐文章于 2023-08-12 17:13:28 发布

阅读量262

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/m0_46978034/article/details/115035426

版权

css 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

文章目录

一.结构伪类选择器

伪类选择器都是以：开头的伪类表示元素的一些特殊状态或者位置
在这里插入图片描述

E:ont()	否定伪类，表示除了括号里面得类其余得都可以选中
E:empty	是指匹配空元素里面什么都没有包括空格和换行

代码演示：
E:empty

 <style>
        .box1,
        .box2 {
            width: 100px;
            height: 100px;
            border: 1px solid #ccc;
        }
        /* :empty是匹配空元素 是指什么都没有 包括换行和空格 */
        
        div:empty {
            background-color: red;
        }
    </style>
</head>

<body>
    <div>
        <div class="box1">
            <p>元素</p>
        </div>
        <div class="box2"></div>
    </div>
</body>

E:not()

<style>
        /* 否定伪类，表示除了括号里面的类其余得都可以被选中 */
        
        p:not(.p1) {
            color: red;
        }
    </style>
</head>

<body>
    <p>我是p</p>
    <p class="p1">我是p</p>
    <p>我是p</p>
    <p>我是p</p>
    <p>我是p</p>
    <p>我是p</p>

</body>

注意：
类选择器、属性选择器、伪类选择器，权重为 10

n可以是数字，关键字和公式
n如果是数字，就是选择第n个
常见的关键词 even 偶数 odd 奇数
常见的公式如下 ( 如果n是公式，则从0开始计算）
但是第0个元素或者超出了元素的个数会被忽略 )

在这里插入图片描述

二.a得伪类

a:link	主要用来设置没有访问过的链接样式
a:visited	访问过的超链接（由于隐私问题只能修改颜色)
a:hover	鼠标经过的状态不仅仅适用于超链接
a:active	鼠标按下的状态不仅仅适用于超链接

代码演示

 <style>
        a:link {
            /* 正常的超链接(带有href的a标签)
            主要用来设置没有访问过的链接样式
             */
            color: red;
        }
        
        a:visited {
            /* 访问过的超链接（由于隐私问题只能修改颜色） */
            color: yellow;
        }
        
        a:hover {
            /* 鼠标经过的状态 不仅仅适用于超链接 */
            color: teal;
        }
        
        a:active {
            /* 鼠标按下的状态 不仅仅适用于超链接 */
            color: violet;
        }
    </style>
</head>

<body>
    <a href="https://www.baidu.com">百度</a>
    <a href="https://www.baidu.com">百度</a>
</body>

三.属性选择器

属性选择器根据元素的属性来选中元素
在这里插入图片描述
代码演示

  <style>
         div[class] {
            color: red;
        } 
        
         div[class='good'] {
            color: red;
        } 
        
        div[class^='g'] {
            color: red;
        } 
        
        div[class$='d'] {
            color: red;
        } 
        
        div[class*='O' i] {
            /* 这里加上 i 的意思是不区分大小写 */
            color: red;
        }
    </style>
</head>

<body>
    <div class="good">我是div</div>
    <div class="good">我是div</div>
    <div>我是div</div>
</body>

四.伪元素选择器

伪元素表示一些特殊的元素

::before	在元素内部前面插入内容
::after	在元素内部后面插入内容
::first-letter	表示首字母
::first-line	表示设置首行
::selection	选中的内容

注意：

before 和 after 必须有 content 属性
before 在内容的前面，after 在内容的后面
before 和 after 创建一个元素，但是属于行内元素。
因为在 dom 里面看不见刚才创建的元素，所以我们称为伪元素
伪元素和标签选择器一样，权重为 1

代码演示


    <style>
        .box1::before {
            /* before在元素的前面添加内容  但是必须通过content来设置 别忘记冒号了*/
            content: 'hello';
            color: red;
        }
        
        .box2::after {
            /* after在元素的后面添加内容  但是必须通过content来设置 别忘记冒号了*/
            content: 'hello';
            color: red;
        }
        
        p::first-letter {
            /* first-letter表示首字母 */
            font-size: 25px;
            color: #000;
        }
        
        .box3::first-line {
            /* first-line表示设置首行 */
            background-color: red;
        }
        
        .box3::selection {
            /* 选中的内容 */
            color: yellow;
        }
    </style>

</head>

<body>
    <div class="box1">我是div</div>
    <div class="box2">我是div</div>
    <p>首字母大写</p>
    <p class="box3">我们的征程是星辰大海</p>
</body>

在这里插入图片描述

浩哥学习编程之路

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS3伪类选择器

文章目录一.结构伪类选择器二.伪元素选择器一.结构伪类选择器注意：类选择器、属性选择器、伪类选择器，权重为 10n可以是数字，关键字和公式n如果是数字，就是选择第n个常见的关键词 even 偶数 odd 奇数常见的公式如下 ( 如果n是公式，则从0开始计算）但是第0个元素或者超出了元素的个数会被忽略 )二.伪元素选择器...
复制链接

扫一扫