css 选择器

更多选择器示例参考：https://www.w3school.com.cn/cssref/css_selectors.asp

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css选择器</title>
    <!--
        1.样式可以规定在单个的 HTML 元素中
            <b style="color: blueviolet; background-color: blue">样式在单个的html元素中</b>
        2.在 HTML 页的头元素中(本例)
        3.在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表
            1.link方式导入外部css文件
                <link type="text/css" rel="stylesheet" href="css/my.css">
            2.import导入(不推荐)
              <style type="text/css">
                  @import url("css/my.css");
              </style>

    -->

    <style type="text/css">
        /*通配符选择器*/
        * {
            color: cadetblue;
        }

        /*id选择器*/
        /*(选择 id="Id_1" 的标签)*/
        #Id_1 {
            color: blue;
        }

        /*(选择 id="Id_1" 或 id="Id_2" 的标签)*/
        #Id_1, #Id_2 {
            background-color: green;
        }

        /*----------------(元素/类型)选择器------------------*/
        strong {
            color: green;
        }

        big, small {
            color: red;
        }

        /*--------------------类选择器--------------------*/
        /*所有包含class5的*/
        .class5 {
            background-color: blueviolet;
        }

        /*包含class2 或 class3*/
        .class2, .class3 {
            color: blue;
        }

        /*同时包含class4和class5*/
        .class4.class5 {
            color: red;
        }

        /*em元素包含class6的*/
        em.class6 {
            background-color: green;
        }

        /*---------------------属性选择器---------------
        [attribute]    用于选取带有指定属性的元素。
        [attribute=value]    用于选取带有指定属性和值的元素。
        [attribute~=value]    用于选取属性值中包含指定词汇的元素。
        [attribute|=value]    用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
        [attribute^=value]    匹配属性值以指定值开头的每个元素。
        [attribute$=value]    匹配属性值以指定值结尾的每个元素。
        [attribute*=value]    匹配属性值中包含指定值的每个元素。
        */
        b[title="abc"] {
            color: cadetblue;
        }

        /*--------------------后代选择器------------------------*/
        /*所有后代*/
        ul ol {
            list-style-type: decimal;
        }

        /*所有后代*/
        ul li {
            background-color: green;
            width: 50px;
        }

        /*直接后代*/
        ul > li {
            color: blue;
        }

    </style>
</head>
<body>

<b style="color: blueviolet; background-color: blue">样式在单个的html元素中</b>
<hr/>

<p>通配符选择器测试1</p>
<p>通配符选择器测试2</p>
<hr/>

<pre id="Id_1">Id_1选择器</pre>
<b id="Id_2">Id_2选择器</b>
<hr/>


<strong>strong元素选择器</strong><br/>
<big>big元素选择器</big><br/>
<small>small元素选择器</small><br/>
<hr/>

<b class="class1 class2">类选择器class1 class2</b><br/>
<b class="class2 class3 ">类选择器class2 class3</b><br/>
<b class="class4 class5">类选择器class4 class5</b><br/>
<em class="class6">类选择器class6</em>
<hr/>

<b title="abc">属性选择器</b><br/>
<hr/>

<ul>
    <li title="hb">河北</li>
    <ol>
        <li title="bd">保定</li>
        <li title="cd">承德</li>
        <li title="cz">沧州</li>
    </ol>
    <li title="hn">河南</li>
    <ol>
        <li title="zz">郑州</li>
        <li title="ny">南阳</li>
    </ol>
    <li title="ln">辽宁</li>
</ul>

</body>
</html>
复制代码

 

posted @   花开如梦  阅读(5)  评论(0)  编辑  收藏  举报
相关博文：
· html标签
· JavaScript jQuery 比对示例，ajax示例
· CSS 选择器
· 20220824 第七小组 王茜
· CSS样式之基础选择器
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 单线程的Redis速度为什么快？
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 展开说说关于C#中ORM框架的用法！
点击右上角即可分享
微信分享提示