属性选择器&子元素的伪类&兄弟元素选择器

最新推荐文章于 2022-10-19 13:50:29 发布

逻辑鬼才不太聪明

最新推荐文章于 2022-10-19 13:50:29 发布

阅读量550

点赞数

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

本文链接：https://blog.csdn.net/qq_42919799/article/details/105956686

版权

HTML&CSS 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

属性选择器&子元素的伪类&兄弟元素选择器&否定伪类

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        /* 
        属性选择器
        作用：可以根据元素中的属性值来选取指定元素
        语法：
            [属性名] 选取含有指定属性的元素
        例：
        p[title]{
            background-color；yellow;
        }
        语法：
            [属性名="属性值"] 选取含有指定属性的元素
        p[title="hello"]{
            background-color；yellow;
        }
        语法：
            [属性名^="属性值"] 选取以指定内容开头的元素
        p[title^="a"]{
            background-color；yellow;
        }
        语法：
            [属性名$="属性值"] 选取以指定内容结尾的元素
        p[title$="a"]{
            background-color；yellow;
        }
        语法：
            [属性名*="属性值"] 选取包含指定内容的元素
        p[title*="a"]{
            background-color；yellow;
        }
         */
    </style>
</head>

<body>
    <!-- title属性，这个属性可以给任何标签指定
        当鼠标移入到元素上时，元素中的title属性的值将会作为提示文字展示
        -->
    <p title="hello">我是一个段落</p>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
</body>

</html>

子元素的伪类

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 
        ：first-child 可以选中第一个子元素
        ：last-child 表示选中最后一个子元素
        :nth-child 标识可以选中任意位置的子元素
            该选择器后面可以指定一个参数，指定要选中第几个子元素
            even 表示偶数位置的子元素
            odd 表示奇数位置的子元素
         */
        
        p:last-child {
            background-color: green;
        }
        
        p:nth-child(3) {
            background-color: red;
        }
    </style>
</head>

<body>
    <p>我是p标签</p>
    <p>我是p标签</p>
    <p>我是p标签</p>
    <p>我是p标签</p>
    <p>我是p标签</p>
</body>

</html>

兄弟元素选择器

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 
        作用：可以选中一个元素后紧挨着的指定的兄弟元素
        语法：前一个 + 后一个
         */
        
        span + p {
            background-color: green;
        }
        /* 
        选中后面所有的兄弟元素
        语法：前一个~后面所有元素
         */
        span~p {
            background-color: red;
        }
    </style>
</head>

<body>
    <p>这是一个p标签</p>
    <p>这是一个p标签</p>
    <span>我是一个span标签</span>
    <p>这是一个p标签</p>
    <p>这是一个p标签</p>
    <p>这是一个p标签</p>
</body>

</html>

否定伪类

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 
        为所有的p元素设置一个背景颜色为黄色，除class值为hello 的

        否定伪类：
        作用：可以从已选中的元素中剔除某些元素
        语法：
            ：not(选择器)
         */
        
        p:not(.hello) {
            background-color: yellow;
        }
    </style>
</head>

<body>
    <p>我是一个p标签</p>
    <p class="hello">我是一个p标签</p>
    <p>我是一个p标签</p>
</body>

</html>