html的几种选择器

XGundam05 · 发表于 2022-6-26 22:16

目录
一、并集选择器
二、后代选择器
三、子元素选择器
四、相邻元素选择器
五、交集选择器
六、通用兄弟选择器
七、序选择器
同级别：
同类型：
八、属性选择器
九、通用选择器

一、并集选择器

就是把两个选择器写在一起，用逗号隔开。例如：.pp1,.pp2{}

<DOCTYPE! html>
<html>
<head>
<title>第九题</title>
<meta charset="utf-8">
<style>
.pp1,.pp2{color:red;font-size:50px;}
.ss1{font-weight:bolder;}
</style>
</head>
<body>
<p class="pp1 ss1">我是标题</p>
<p class="pp2">我是段落</p>
</body>
</html>

复制代码

二、后代选择器

标签之间有先后顺序，中间用空格隔开，选择器1 选择器2 选择器3{}。例如：div ul li{}

<DOCTYPE! html>
<html>
<head>
<title>第五题</title>
<meta charset="utf-8">
<style>
body div p{
text-indent:1em;
}
body div h2{
color:blue;
font:italic bolder 30px "黑体";
text-indent:2em;}
}
</style>
</head>
<body>
<h1>正能量故事五：用人之道</h1>
<p>去过庙的人都知道，一进庙门，首先是弥陀佛，笑脸迎客，而在他的北面，则是黑口黑脸的韦陀。但相传在很久以前，他们并不在同一个庙里，而是分别掌管不同的庙。</p>
<div>
<p>1.为什么弥乐佛来的人非常多，依然入不敷出？</p>
<h2>弥乐佛热情快乐，所以来的人非常多，但他什么都不在乎，丢三拉四，没有好好的管理账务，所以依然入不敷出。</h2>
<p>2.为什么韦陀管账是一把好手，最后却香火断绝？</p>
<h2>而韦陀虽然管账是一把好手，但成天阴着个脸，太过严肃，搞得人越来越少，最后香火断绝。</h2>
<p>3.为什么在大师的眼里，没有废人？</p>
<h2>佛祖在查香火的时候发现了这个问题，就将他们俩放在同一个庙里，由弥乐佛负责公关，笑迎八方客，于是香火大旺。而韦陀铁面无私，锱珠必较，则让他负责财务，严格把关。在两人的分工合作中，庙里一派欣欣向荣景象。</h2>
<p>4.我们在这个故事里面得到的启示是什么？</p>
<h2>其实在用人大师的眼里，没有废人，正如武功高手，不需名贵宝剑，摘花飞叶即可伤人，关键看如何运用。 </h2>
</div>
</body>
</html>

复制代码

三、子元素选择器

选择器1>选择器2>选择器3{}
四、相邻元素选择器

<!DOCTYPE html>
<html lang="en">
<head>
<title>子选择器的综合使用</title>
<meta charset="utf-8">
<style>
body h1+p{color:yellow;}
body div h2+p{color:green;}
body div div p{color:red;}
body div div p+p{color:pink;}
body div div+p{color:purple;}
body p{color:blue;}
</style>
</head>
<body>
<h1>Headline</h1>
<p>paragraph 1</p>
<div class="main">
<h2>Headline 2</h2>
<p>paragraph 2</p>
<div>
<p>paragraph 3</p>
<p>paragraph 4</p>
</div>
<p>paragraph 5<p>
</div>
<p >paragraph 6</p>
</body>
</html>

复制代码

五、交集选择器

就是两个不同的选择器一起用。#ss1.cc1{}

<DOCTYPE! html>
<html>
<head>
<title>第七题</title>
<meta charset="utf-8">
<style>
#s1.c1{font-size:30px;color:green;text-align:right;}
#s2.c1{font-size:30px;color:green;text-align:right;}
</style>
</head>
<body>
<h1>成功法则</h1>
<p>迟到毁一生</p>
<p id="s1" class="c1">早退穷三代</p>
<p id="s2" class="c1">按时上下课</p>
<p>必成高富帅</p>
</body>
</html>

复制代码

六、通用兄弟选择器

h1~p       h1后面的p全部选中
a~p       a后面的p全部选中
七、序选择器

只识别div，可以和其他选择器结合
同级别：

first-child       同级别第一个
last-child       同级别最后一个
nth-child(n)       (n)为同级别中的第n个标签
nth-last-child(n)       (n)为同级别中倒数的第n个标签
only-child       唯一标签
nth-child(odd)       同级别中的奇数标签
nth-child(even)       同级别中的偶数标签
同类型：

first-of-type       同类型第一个
last-of-type       同类型最后一个
nth-of-type(n)       (n)为同类型中的第n个标签
nth-last-of-type(n)       (n)为同类型中倒数的第n个标签
only-of-type       唯一标签，可识别div外的内容
nth-of-type(n+1)       选中第n个标签后所有的标签

<!DOCTYPE HTML>
<head>
<title>序选择器的使用3</title>
<meta charset="utf-8">
<style type="text/css">
p:nth-of-type(n){
color:green;
font:italic bold 30px "华文新魏";
text-decoration:line-through;
text-align:center;
}
</style>
</head>
<body>
<h1>我是标题1</h1>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<h1>我是标题2</h1>
<p>我是段落5</p>
<p>我是段落6</p>
<p>我是段落7</p>
<p>我是段落8</p>
</body>
</html>

复制代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>序选择器的使用2</title>
<style type="text/css">
p:nth-of-type(3n+1){
color:red;
font:30px "华文新魏";
text-decoration:underline;
text-align:center;
}
p:nth-of-type(3n+2){
color:blue;
font:30px "微软雅黑";
text-decoration:overline;
}
</style>
</head>
<body>
<h1>我是标题</h1>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>
<p>我是段落6</p>
<p>我是段落7</p>
<p>我是段落8</p>
</body>
</html>

复制代码

八、属性选择器

模板：标签[属性]{}
p[id]{} 所有p标签内的id标签都统一更改，class也可以
p[class=pp1]{} 只修改class=pp1的内容

<!DOCTYPE HTML>
<head>
<title>属性选择器的综合应用</title>
<meta charset="utf-8">
<style>
h1[class=aa]{
text-align:center;
}
p[class=bb]{
text-align:center;
color:red;
font-size:30px;
}
p[class=cc]{
text-align:center;
color:green;
font-size:30px;
}
</style>
</head>
<body>
<h1 class="aa">成功法则</h1>
<p class="bb">迟到毁一生</p>
<p class="cc">早退穷三代</p>
<p class="bb">按时上下课</p>
<p class="cc">必成高富帅</p>
</body>
</html>

复制代码

九、通用选择器

*{} 这个可以修改body内的所有内容

*{
font:30px "隶书";
}

复制代码

设置所有字体为隶书，大小为30px

		自动登录	找回密码
密码			立即注册

html的几种选择器

本帖子中包含更多资源