CSS选择器_组合_伪类

最新推荐文章于 2023-09-21 14:47:23 发布

aaa_dai

最新推荐文章于 2023-09-21 14:47:23 发布

阅读量324

点赞数

FrontEnd 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

定义

MSN文档: CSS_Selectors

        /*
        简单选择器
        
        类型选择器 div, img, p...
        选择与给定节点名称匹配的所有元素。
        document.querySelectorAll('p')

        类选择器 .classname
        选择具有给定class属性的所有元素。
        document.querySelectorAll('.box')

        ID选择器 #idname
        根据其id属性的值选择元素。文档中应该只有一个具有给定ID的元素。 
        document.querySelectorAll('#container')

        通用选择器 命名空间仅应用于XML格式
        选择所有元素。可选地，它可以限于特定命名空间或所有命名空间。 
        document.querySelectorAll('*')

        属性选择器
        根据给定属性的值选择元素。
        语法：[attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value] [autoplay]autoplay        
        document.querySelectorAll('[class=box]')
        */
        body {
            height: 300px;
            width: 600px;
        }

        .box {
            height: 80px;
            width: 80px;
        }

        /* 组合 */
        /* Space: 后代标签, 选择所有的后代p标签*/
        div#container p {
            font-weight: bold;
        }

        /* >: 直接后代标签, 选中所有的直接后代, 不会选中直接后代的后代*/
        div#container>p {
            border: 1px solid black;
        }

        /* +: 紧邻兄弟标签, 选中"直接"跟在div标签后的p标签*/
        div+p {
            color: blue;
        }

        /* ~: 一般兄弟标签, 选中"所有"跟在div标签后的p标签*/
        div~p {
            background-color: yellow;
        }

        /* 
        伪类: 伪类允许基于未包含在文档树中的状态信息来选择元素
        :empty css伪类表示没有子元素的任何元素
        :not() css伪类表示与选择器列表不匹配的元素
        伪元素: 伪元素表示未包含在HTML中的实体
        早期的W3C不区分伪类与伪元素
        p::first-letter: 所有p标签的首字符
        */
        .box:empty {
            background: lime;
        }

        .box:not(:empty) {
            background: pink;
        }

        p::first-letter {
            text-decoration: underline
        }

Html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS Selectors</title>

    <style type="text/css">
        /*
        简单选择器
        
        类型选择器 div, img, p...
        选择与给定节点名称匹配的所有元素。
        document.querySelectorAll('p')

        类选择器 .classname
        选择具有给定class属性的所有元素。
        document.querySelectorAll('.box')

        ID选择器 #idname
        根据其id属性的值选择元素。文档中应该只有一个具有给定ID的元素。 
        document.querySelectorAll('#container')

        通用选择器 命名空间仅应用于XML格式
        选择所有元素。可选地，它可以限于特定命名空间或所有命名空间。 
        document.querySelectorAll('*')

        属性选择器
        根据给定属性的值选择元素。
        语法：[attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value] [autoplay]autoplay        
        document.querySelectorAll('[class=box]')
        */
        body {
            height: 300px;
            width: 600px;
        }

        .box {
            height: 80px;
            width: 80px;
        }

        /* 组合 */
        /* Space: 后代标签, 选择所有的后代p标签*/
        div#container p {
            font-weight: bold;
        }

        /* >: 直接后代标签, 选中所有的直接后代, 不会选中直接后代的后代*/
        div#container>p {
            border: 1px solid black;
        }

        /* +: 紧邻兄弟标签, 选中"直接"跟在div标签后的p标签*/
        div+p {
            color: blue;
        }

        /* ~: 一般兄弟标签, 选中"所有"跟在div标签后的p标签*/
        div~p {
            background-color: yellow;
        }

        /* 
        伪类: 伪类允许基于未包含在文档树中的状态信息来选择元素
        :empty css伪类表示没有子元素的任何元素
        :not() css伪类表示与选择器列表不匹配的元素
        伪元素: 伪元素表示未包含在HTML中的实体
        早期的W3C不区分伪类与伪元素
        p::first-letter: 所有p标签的首字符
        */
        .box:empty {
            background: lime;
        }

        .box:not(:empty) {
            background: pink;
        }

        p::first-letter {
            text-decoration: underline
        }
    </style>
</head>

<body>
    <div id="container">
        <p>First</p>
        <div class="box">
            <p>Child Paragraph</p>
        </div>
        <p>Second</p>
        <p>Third</p>
    </div>
    <div class="box"></div>
    <p>Four</p>
</body>

</html>

aaa_dai

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS选择器_组合_伪类

定义MSN文档: CSS_Selectors /* 简单选择器类型选择器 div, img, p... 选择与给定节点名称匹配的所有元素。 document.querySelectorAll('p') 类选择器 .classname 选择具有给定class属性的所...
复制链接

扫一扫