1.导入方式
/*外部样式*/
h3{
color:yellow;
}
h4{
color:green;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h2{
color:blue;
}
@import url("css/style.css");
</style>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--优先级：就近原则-->
<!--行内样式：在标签元素中，编写一个style属性，编写样式即可-->
<h1 style="color:red">我的标题1</h1>
<h2>我的标题2</h2>
<h3>我的标题3</h3>
<h4>我的标题4</h4>
</body>
</html>
2.三种基本选择器
作用：选择页面上的某一个或者某一类元素
2.1基本选择器
1.标签选择器:选择一类标签 标签{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1{
color: #b5c1cd;
background:lavenderblush;
border-radius:24px;
/*border-radius表示圆角 */
}
p{
font-size:40px;
}
</style>
</head>
<body>
<h1>标签选择器</h1>
<h1>标签选择器</h1>
<h1>标签选择器</h1>
<p>标签选择器1</p>
<p>标签选择器2</p>
<p>标签选择器3</p>
</body>
</html>
2.类选择器 class: 选择所有class属性一致的标签，跨标签 .类名{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*类选择器的格式 以 .class的名称{}
好处：可以多个标签归类，是同一个class，可以复用*/
.xcl{
color:#3748ff;
}
.cl{
color:#a24fff;
}
</style>
</head>
<body>
<h1 class="xcl">类选择器1</h1>
<h1 class="cl">类选择器2</h1>
<h1>类选择器3</h1>
<p class="cl" style=" font-size: 40px">p标签</p>
</body>
</html>
3.id选择器： 全局唯一！#id名{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>id选择器</title>
/* id选择器
#id名称{}
id选择器不能复用，class选择器可以复用
优先规则：id选择器>类选择器>标签选择器
*/
<style>
#xcl{
color:indianred;
}
#cl{
color:#b5c1cd;
}
</style>
</head>
<body>
<h1 id="xcl">id选择器</h1>
<h1>id选择器</h1>
<h1 id="cl">id选择器</h1>
<h1>id选择器</h1>
</body>
</html>
2.2层次选择器
1.后代选择器：在某个元素的后面 （祖爷爷 爷爷 爸爸 你）
body p{
background: #cf64ec;
}
2.子选择器 （只有一代，儿子）
body>p{
background: lavenderblush;
border-radius:30px;
}
3.相邻兄弟选择器 （同辈）
运行结果只有p2变色，相邻选择器只针对于同级别的相邻的后者
<style>
.active+p{
color:red;
}
</style>
</head>
<body>
<p >p0</p>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
4.通用选择器: 通用兄弟选择器，当前选中元素向下所有的兄弟元素(与兄弟选择器的不同点是一个是向下一个兄弟，一个是向下所有兄弟)
.active~p{
background: aliceblue;
}
</style>
</head>
<body>
<p >p0</p>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
2.3结构伪类选择器
<style>
/*ul的第一个元素*/
ul li:first-child{
background: #3748ff;
}
/*ul的最后一个子类*/
ul li:last-child{
background: #a24fff;
}
</style>
<!DOCTYPE html>标签：color,Day02,选择器,ul,background,标签,id From： https://www.cnblogs.com/xclxcl/p/16754889.html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>层次选择器</title>
<style>
/*ul的第一个元素*/
ul li:first-child{
background: #3748ff;
}
/*ul的最后一个子类*/
ul li:last-child{
background: #a24fff;
}
/*选择当前p元素的父级元素，选中父级元素的一个，并且是当前元素才生效（选父级元素中的低n个子元素，n由括号里的数决定）*/
p:nth-child(2){
background: #91889b;
}
/*选中父级下的p元素的第二n*/
h1:nth-of-type(2){
background: indianred;
}
/*特效标签hover*/
a:hover{
background: black;
}
</style>
</head>
<body>
<!--用了h1会影响p:nth-fist(){}标签的实现
<h1>h1</h1>-->
<a href="">1231223</a>
<h1>11111</h1>
<h1>11111</h1>
<p >p0</p>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>
<p>li1</p>
</li>
<li>
<p>li2</p>
</li>
<li>
<p>li3 </p>
</li>
</ul>
</body>
</html>