第一、CSS1选择器：
1、元素选择器（也叫标签选择器，是最基本的选择器）
<style>
html{background-color: red;}
div{background-color: yellow;}
</style>
2、ID选择器（id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。 id 选择器以 "#" 来定义）
<style>
#boxl{color:blue;}
</style>
2.1、结合元素的ID选择器：
<style> /*ID是box的div标签*/
div#box{
width: 100px;
height: 100px;
background: red;
border: 3px solid black;
}
</style>
<body>
<div id="box"></div>
</body>
注意：在实际开发中，浏览器并不会检测ID的唯一性，可以为相同元素的ID添加同一个样式。如下图:
3、类选择器（类选择器可以为class相同的 HTML 元素们指定特定的样式。类选择器以 "." 来定义）
<style>
.head{
width: 100px;
height: 100px;
background: red;
}
</style
3.1、结合元素的ID选择器：
<style>
/*class是head的div标签*/
div.head{
width: 100px;
height: 100px;
background: red;
}
</style>
<body>
<div class="head"></div>
</body>
注意：类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。
4、包含选择器（E F{}:选择所有被E元素包含的F元素）
<style>
/*三种选择器可以打乱顺序任意组合*/
body div{
border: 3px solid #000000;
}
#outer #inner{
width: 100px;
height: 100px;
background: yellowgreen;
}
.body .head{
width: 100px;
height: 100px;
background: deeppink;
}
</style>
<body class="body" id="outer">
<div id="inner"></div>
<div class="head"></div>
</body>
代码执行如下图：
5、分组选择器（E,F,G{}:选择所有被E元素和F元素以及G元素）
<style>
/*将要分组的选择器放在规则左边，并用逗号隔开。分组个数需要两个及以上*/
div,p{
border: 3px solid #000000;
}
#box,#font{
width: 100px;
height: 100px;
background: #66FFFF;
}
.div,.p{
width: 100px;
height: 100px;
}
</style>
<body>
<div id="box" class="div"></div>
<p id="font" class="p"></p>
</body>
代码运行效果如下图：
第二、CSS2选择器：
1、通配选择器（*{}:匹配所有元素）
<style>
*{color: red;}
</style>
运行效果如图:
2、通配选择器（*{}:匹配所有元素）
时间： 2024-08-05 11:23:17