选择器

最新推荐文章于 2024-09-14 09:47:44 发布

wangqd97

最新推荐文章于 2024-09-14 09:47:44 发布

阅读量121

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/wangqd97/article/details/81225936

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.派生选择器
元素在其位置的上下文关系来定义样式

li strong{
    color: #ff000f;
}
strong{
    color: aquamarine;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="mycss.css">
</head>
<body>
<P><strong>p标签：hello</strong></P>
<ul>
    <li><strong>li标签：hello</strong></li>
</ul>
</body>
</html>

id选择器：
以“#”来定义，可以为标有ID的html元素指定特定的样式
用id选择器建立派生选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
<link rel="stylesheet" type="text/css" href="mycss.css">
</head>
<body>
<P id="pid"> hello css</P>
<div id="iddiv">
    这是一个div<a href="http://www.baidu.com">第一个</a>
</div>
</body>
</html>




#pid {
    color: red;
}
#iddiv a{
    color: darkcyan;
}

类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="mycss.css">
</head>
<body>
<P class="pclass"> 这是一个class<a href="http://www.baidu.com"> baidu</a></P>
<div class="divclass"> hello div
    <p>p tab</p>
</div>
</body>
</html>


.pclass {
    color: darkcyan;
}
.pclass a{
    color: bisque;
}
.divclass p{
    color: aquamarine;
}