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>