CSS基础选择器

最新推荐文章于 2022-11-18 21:39:05 发布

YWF331

最新推荐文章于 2022-11-18 21:39:05 发布

阅读量186

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/YWF331/article/details/79259996

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

派生选择器

index.html

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="mycss.css" type="text/css">
    </head>
    <body>
        <p><strong>我是黑色，因为我不在列表当中，所以这个规则对我不起作用</strong></p>
        <u1>
            <li><strong>我是红色，这是因为 strong 元素位于 li 元素内。</strong></li>
        </u1>
    </body>
</html>

mycss.css

li strong{
    color: red;
}

id选择器
id 选择器以“#”来定义

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link  href="MyCss.css" type="text/css" rel="stylesheet">
    </head>
    <body>
        <p id="pid">hello css<a href="www.shiyanlou.com">shiyanlou</a></p>
        <div id="divid">this is a div</div>

    </body>
</html>

#pid a{
    color:#00755f;
}
#divid {
    color: red;
    }

类选择器
在 CSS 中，类选择器以一个点号显示：

.divclass {
    color: red;
}

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link  href="MyCss.css" type="text/css" rel="stylesheet">
    </head>
    <body>
    <!--p 标签中嵌套了一个 a 标签，在下面的 css 引用过程中我们可以看到的.pclass a 即为 class 被用作派生选择器-->
        <p class="pclass">这是一个 class 显示效果<a href="http://www.shiyanlou.com">效果</a></p>
        <div class="divclass">hello div</div>
    </body>
</html>

.pclass a{
    color: green;
}
.divclass {
    color: red;
}

属性选择器

带有 title 属性、属性和值选择器 title=”te” 的所有元素设置样式

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            [title]{
                color: #00ff14;
            }
            [title=te]{
                color: red;
            }

        </style>    
    </head>
    <body>
       <p title=>属性选择器</p>
        <p title="te">属性和值选择器</p>
    </body>
</html>