本文已参与「新人创作礼」活动，一起开启掘金创作之路。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网站测试</title>
    <link rel="stylesheet" href="mycss1.css">

<!--    按tap啊link 各种格式就会展开-->
    <style>
        span{
            color: aqua;

        }
        #aaa{
            color: aqua;
        }
        li{
            color: orangered;
            /*border: 1px solid chocolate;*/
        /*    标签选择器*/
        }
        .lei{
            color: black;
        }
        span,li{
           /*选择器分组，可以添加属性 */
            background: blanchedalmond;
        }
        ul > ol > ool{
            list-style: -moz-element();
            border: 1px solid pink;
        /*后代选择器，相当于在后代添加属性，把>改为空格就是后代全部修改属性*/
        }
        h1 + h2{
            color: pink;
        }
        a[target='_blank']{
            color: mediumvioletred;
            background: aliceblue;
            border: 1px solid red;

        }

    </style>
<!--css选择器-->
</head>
<body>
<div style="width: 200px;height: 200px;border: 1px solid orangered">编辑内容:</div>
<ul>
    <li id="aaa">标签选择</li>
    <li>id比li优先级高啊 看颜色</li>
    <li class="lei">通过类来选择</li>
    <span class="lei">看优先级还是类高</span>

<!--span 标记属性-->
    <span>style的属性转移到span来了</span>
    <ol>
        <li>11111</li>
        <li>22222</li>
        <li>33333</li>
        <li>44444</li>
        <ool style="width: 100px;height: 200px;border: 1px solid darkolivegreen">后代选择器</ool>

    </ol>
    <okl>css读入</okl>

</ul>


<h>第一行</h>
<h1>相邻选择器</h1>
<h2>修改颜色的一行</h2>

<a href="https://pic.netbian.com/uploads/allimg/200405/171302-15860779827765.jpg" target="_blank"> blank</a>
<a href="https://pic.netbian.com/uploads/allimg/200410/213246-1586525566c099.jpg" target="_self">self</a>
<a href="https://pic.netbian.com/uploads/allimg/220820/091439-16609580791547.jpg">无属性</a>
</body>
</html>

python运行之后效果如下：

背景：

HTML 标签原本被设计为用于定义文档内容。即通过使用这样的标签，来表达“这是标题”、“这是段落”、“这是表格”之类的信息。’

浏览器样式

浏览器使用级联和继承来确定在显示元素时要用于属性的值。每个元素都有一些 CSS 属性。对于每个属性，浏览器需要遍历所有样式的源。你已经看到了三种不同的方式来定义样式 CSS组合器阐明了两个选择器之间的关系，而CSS中的选择器用于选择样式内容。

可以 CSS选择器中有多个简单选择器，在这些选择器之间，我们可以包含一个组合器。组合器将选择器组合在一起，为它们提供有用的关系和内容在文档中的位置。

CSS 中有四种类型的组合器列出如下：

通用同级选择器（〜）相邻的同级选择器（+）子选择器（>）后代选择器（空格）

css选择器举例讲解

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

背景：

浏览器样式