CSS选择器（1）基本选择器
2022-01-07 本文已影响0人
这样你就找不到我了
选择器
基本选择器
- 标签选择器 标签{}
p1{
color: #00FFFF;
}
- 类选择器 .类名{}
.c2{
color: #FF0000;
}
- id选择器 id唯一 #id名{}
#i3{
color: #FF0000;
}
- 通配符选择器 选择全部
*{}
高级选择器
层次选择器
- 后代选择器
body p{
color: #00FFFF;
}
- 子选择器 只选择一代
body>p{
color: #FF0000;
}
- 下相邻兄弟选择器 只选择向下的一个兄弟
.active + p{
color: aquamarine;
}
- 通用选择器 选中当前元素向下的所有兄弟元素
.active ~ p{
color: blue;
}
结构伪类选择器
/* 选中第一个子元素 */
ul li:first-child{
color: #0000FF;
}
/* 选中最后一个子元素 */
ul li:last-child p{
color: #0000FF;
}
/* 选中当前标签的父标签对应的第1（n）个子标签，且该子标签与当前标签同类 */
ul li:nth-child(1){
background: #7FFFD4;
}
/* 选中当前标签的父标签对应的 同类元素的 第1（n）个子标签*/
ul li:nth-of-type(2){
background: #00FFFF;
}
demo代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css选择器</title>
<style>
/* 基本选择器 */
p{
color: #00FFFF;
}
.c2{
color: #FF0000;
}
#i3{
color: #FF0000;
}
/* 层次选择器 */
/* 后代选择器 选中body内的所有p标签*/
body p{
color: #00FFFF;
}
/* 子选择器 仅选中body内第一层p标签 对li中的P标签不起作用*/
body>p{
color: #FF0000;
}
/* 下相邻兄弟选择器 选择 被选中标签的 下相邻的第一个同层P标签
不包括它自己
*/
.active + p{
color: aquamarine;
}
/* 通用选择器 选择 被选中标签的 下相邻的所有同层p标签 */
不包括它自己
.active ~ p{
color: blue;
}
/* 结构 伪类选择器 */
/* 选中第一个子元素 */
ul li:first-child{
color: #0000FF;
}
/* 选中最后一个子元素 */
ul li:last-child p{
color: #0000FF;
}
/* 选中当前标签的父标签对应的第1（n）个子标签，且该子标签与当前标签同类 */
ul li:nth-child(1){
background: #7FFFD4;
}
/* 选中当前标签的父标签对应的 同类元素的 第1（n）个子标签*/
ul li:nth-of-type(2){
background: #00FFFF;
}
</style>
</head>
<body>
<!-- 基本选择器 -->
<p class='c1' id='i1'>这是p1标签</p>
<p class='c2' id='i2'>这是p2标签</p>
<p class='c3' id='i3'>这是p3标签</p>
<br>
<!-- 层次选择器 -->
<p>这是p4标签</p>
<p class='active'>这是p5标签</p>
<p>这是p6标签</p>
<ul>
<li>这是p7.1标签</li>
<li><p>这是p7.2标签</p></li>
<li><p>这是p7.3标签</p></li>
</ul>
<p>这是p8标签</p>
</body>
</html>
