首页 > 其他分享 >万象更新 Html5 - css: selector 选择器: 基础,通配符选择器,元素选择器,id 选择器,类选择器

万象更新 Html5 - css: selector 选择器: 基础,通配符选择器,元素选择器,id 选择器,类选择器

时间:2024-09-24 10:38:14浏览次数:8  
标签:color 万象更新 选择器 c3 selector id size

源码 https://github.com/webabcd/Html5
作者 webabcd

万象更新 Html5 - css: selector 选择器: 基础,通配符选择器,元素选择器,id 选择器,类选择器

示例如下:

css\src\selector\demo1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基础,通配符选择器,元素选择器,id 选择器,类选择器</title>
    <!-- 引用外部样式表
    <link rel="stylesheet" type="text/css" href="style.css" />
    -->
    <style>
        /* 通配符选择器(universal selector) */
        * {
            margin: 0;
            padding: 0;
        }

        /* 元素选择器(element selector),又称为类型选择器(type selector) */
        h1 {
            font-size: 14px;
            color: red;
        }

        /* id 选择器(id selector),“*” 可以省略 */
        *#h2 {
            font-size: 16px;
            color: blue;
        }

        /* 类选择器(class selector),“*” 可以省略 */
        *.h3 {
            font-size: 18px;
            color: green;
        }

        /* 通过“,”分隔可同时定义多个选择器 */
        h1, #h2, .h3 {
            color: orange;
        }

        /* class 选择器可以同时指定多个,使用时用空格分开,参见后面的示例 */
        .c1 {
            font-size: 20px;
        }
        .c2 {
            color: red;
        }

        /* 匹配的是 h5 内的 .c3 的元素 */
        h5.c3 {
            font-size: 22px;
        }

        /* 匹配的是同时存在 .c3 和 .c4 的元素 */
        .c3.c4 {
            color: green;
        }

    </style>
</head>
<body>

<h1>h1</h1>
<h2 id="h2">h2</h2>
<h3 class="h3">h3</h3>
<h4 class="c1 c2">h4(c1 c2)</h4>
<h5 class="c3 c4">h5(c3 c4)</h5>
<h6 class="c3">h6(c3)</h6>
<h6 class="c4">h6(c4)</h6>
<h6 class="c3 c4">h6(c3 c4)</h6>

<div>
    <div>子会继承父的样式</div>
    <div>同选择器,后面定义的会覆盖前面定义的</div>
    <div>
        不同选择器,权值如下:
        <br />
        内联样式 - 1000
        <br />
        id 选择器 - 100
        <br />
        类选择器 - 10
        <br />
        伪类 - 10
        <br />
        伪元素 - 1
        <br />
        标签选择器 - 1
    </div>
</div>

</body>
</html>

源码 https://github.com/webabcd/Html5
作者 webabcd

标签:color,万象更新,选择器,c3,selector,id,size
From: https://www.cnblogs.com/webabcd/p/18428590/html5_css_src_selector_demo1

相关文章