html中css选择器

最新推荐文章于 2024-04-24 10:57:13 发布

y15518325965

最新推荐文章于 2024-04-24 10:57:13 发布

阅读量520

点赞数

本文链接：https://blog.csdn.net/y15518325965/article/details/79463828

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css选择器</title>
    <style>
        /*style标签内部是用来设置css选择器的*/
        #page-next{
            font-size: 40px;
        }
        /*定位class包含two这个值的所有标签*/
        .two{
            color:red;
        }
        /*通过属性定位标签*/
        input[name='username']{
            color: yellow;
        }
        input[type='text']{
            color: blue;
        }
        /*标签选择器：直接以标签作为选择器*/
        a{
            color: green;
            font-size: 20px;
        }
        /*父子选择器：选择器>选择器*/
        div>p{
            font-size: 30px;
        }
        .one_div>p{
            font-size: 40px;
        }
        /*后代选择器：可以选取子节点的子节点 语法格式：选择器 选择器*/
        div P{
            color: blue;
        }
        /*交集选择器:同时满足两个选择器*/
        a#page-next{
            color: blue;
        }
    </style>
        </head>
<body>
    <!--第一种选择器：id，id属性值在HTML页面中是唯一的，不会出现两个相同的
id属性值-->
    <a href="https://www.baidu.com" id="page-next">百度一下</a>
    <!--第二种：class属性值在多个标签中是可以重复用的，而且一个class属性值
可以包含多个-->
    <a href="#" class="one two">第一名</a>
    <a href="#" class="two">第二名</a>
    <a href="#" class="first third two">第三名</a>
    <!--第三种：name属性-->
    <input type="text" name="username" placeholder="请输入用户名">
    <div class="one">
        <p>第一个p标签</p>
        <section>
            <p>第二个p标签</p>
        </section>
        <p>第三个p标签</p>
    </div>

</body>
</html>

<!-- html(纯标记) + css(给标签设置样式) + js(给网页增加一些动态功能) -->

y15518325965

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html中css选择器

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;css选择器&lt;/title&gt; &lt;style&gt; /*style标签内部是用来设置css选择器的*/
复制链接

扫一扫