CSS选择器介绍-CFANZ编程社区

1、三种基本选择器

优先级：id选择器>类选择器>标签选择器

/*
 标签选择器 ，可以作用于HTML里面的所有这种标签
 */
h1{
	color: red;
	background-color: aquamarine;
	border-radius: 5px;
}
p{
	font-size: 38px;
}
/*
 类选择器，.class类名，可以多个标签归类
*/

.xuexi{
	color: blue;
	background-color: beige;
	font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
/*
id选择器，#id名称，全局唯一
*/
#one{
	color:green;
	background-color:white;
	border-radius: 10px;
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="../css/t01.css"/>
	</head>
	<body>
		<h1>我在学习</h1>
		<h1>html 和css</h1>
		<p>还要学习javascrip</p>
		<h2 class="xuexi">学完了前端，还要学习后端</h2>
		<p class="xuexi">还要学习框架，比如springboot</p>
		<h3 id="one">有点想学Vue</h3>
		
	</body>
</html>

2、层次选择器

/*
后代选择器，中间用空格隔开，body标签里面的所有p标签都在作用范围内
*/
/*
body p{
	background-color: aqua;
}
*/
/*
子选择器，中间用大于号连接，只有body标签里面的直接从属于body的p标签在作用范围内
*/
/*
body>p{
	background-color: blue;
}
*/
/*
相邻兄弟选择器，中间用+号连接，只会作用于类名为root的标签的下面一个同类标签
*/
/*
.root +p{
	background-color: red;
}
*/
/*
通用兄弟选择器，中间用波浪号~连接，会作用于类名为root的标签下面的所有同类标签
*/
.root ~p{
	background-color: brown;
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="../css/t02.css"/>
	</head>
	<body>
		<p>p1</p>
		<p>p2</p>
		<p class="root">p3</p>
		<p>p4</p>
		<ul>
			<li>
				<p>p5</p>
			</li>
			<li>
				<p>p6</p>
			</li>
			<li>
				<p>p7</p>
			</li>
		</ul>
		<p class="root">p8</p>
		<p>p9</p>
	</body>
</html>

3、结构伪类选择器

/*
选择 ul 下面的第一个li，其他结构类似
*/
/*
ul li:first-child{
	background-color: aqua;
}
*/
/*
选择 ul下面的最后一个li
*/
/*
ul li:last-child{
	background-color: antiquewhite;
}
*/
/*
下面两个认识就行
*/
p:nth-child(2){
	background-color: black;
}

p:nth-of-type(2){
	background-color: coral;
}
/*
当鼠标放到a标签上时，会起作用
*/
a:hover{
	background-color: black;
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="../css/t03.css"/>
	</head>
	<body>
		<p>p1</p>
		<p>p2</p>
		<p>p3</p>
		<p>p4</p>
		<ul>
			<li>
				<p>p5</p>
			</li>
			<li>
				<p>p6</p>
			</li>
			<li>
				<p>p7</p>
			</li>
		</ul>
		<p>p8</p>
		<p>p9</p>
		<a href="https://www.baidu.com">百度</a>
	</body>
</html>

4、属性选择器

/*
有 id 属性的标签都在作用范围内
*/
/*
a[id]{
	background-color: aqua;
}
*/
/*
指定 id 为root的标签
*/
/*
a[id="root"]{
	background-color: blue;
}
*/
/*
选择 class 中有css的标签，用 星等号，表示包含它
*/
/*
a[class*="css"]{
	background-color: green;
}
*/
/*
选择href属性里以 https开头的标签
*/
a[href^="https"]{
	background-color: crimson;
}
/*
选择href属性里以 jpg结尾的标签
*/
a[href$="jpg"]{
	background-color: darkmagenta;
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="../css/t04.css"/>
	</head>
	<body>
		<a href="https://www.baidu.com" class="js" id="root">百度</a>
		<a href="http://www.atguigu.com" class="html css">尚硅谷</a>
		<a href="hello.jpg" id="app">谷歌</a>
	</body>
</html>