CSS基础-22选择器-选择器详解(1)

zhaihaohao1

于 2015-08-02 16:08:06 发布

阅读量319

点赞数

CC 4.0 BY-SA版权

分类专栏： css基础

本文链接：https://blog.youkuaiyun.com/zhaihaohao1/article/details/47208151

css基础专栏收录该内容

38 篇文章

订阅专栏

本文详细解析了HTML中常用元素如<p>、<h1>、<h2>、<div>、<a>的使用，并展示了CSS样式在不同元素上的应用，包括基本样式设置、元素分组样式、通配符样式以及类选择器的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<!--选择器-选择器详解(1)-->
<html>
<head lang="en">
    <meta charset="UTF-8">
    <link href="css01.css" type="text/css" rel="stylesheet">
    <title></title>
</head>
<body>
<p>人的生命是有限的</p>

<h1>标题1</h1>

<h2>标题2</h2>
<div class="iclass">我要测试div</div>
<a class="iclass">我要测试a.iclass</a>


<p class="p1">我的p1</p>
<p class="p2">我的p2</p>
<p class="p1 p2">我的p3</p>

</body>
</html>
css:
/*1元素选择器*/
p{
    font-size: 45px;
    color: #b3d4fc;
}
/*2选择器的分组*/
h1,h2{
    font-size: 45px;
}
/*3通配符,没有指定的，都由通配符指定*/
*{
    color: blueviolet;
    padding: 0px;
    margin: 0px;

}
/*类选择器,class值可以重复。id不能重复*/
.iclass{
   color: #ffff00;

}
/*类选择器,结合元素使用*/
a.iclass{
    font-size: 50px;
    color: brown;
}
.p1{
    font-size: 30px;
}
.p2{
    color: #cccccc;
}
/*多类选择器，既有p1,p2的效果，也有自己的效果*/
.p1.p2{
    font-style: inherit;
}