html的几种选择器

一、并集选择器就是把两个选择器写在一起，用逗号隔开。例如：.pp1,.pp2{}<DOCTYPE! html><html><head><title>第九题</title><meta charset="utf-8"><style>.pp1,.pp2{color:red;font-size:50px;}.ss1{fon

朝去夜来

21790人浏览 · 2021-08-24 00:12:28

朝去夜来 · 2021-08-24 00:12:28 发布

一、并集选择器

就是把两个选择器写在一起，用逗号隔开。例如：.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>