css的三种引用方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="mycss.css"> # line引用 href后写css的文件名字
<style> # 卸载style 中
p {
color: skyblue;
}
</style>
</head>
<body>
<p>加油啊</p>
<p style="color: red">加油啊</p> # 直接写在内部
</body>
</html>
css的基本选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
基本选择器
标签选择器 直接写标签名
<style>
p {
color: skyblue;
}
</style>
****** 类选择器 点+类名
<style>
.c1 {
color: aqua;
}
</style>
******* id 选择器 # + id 值
<style>
#d1 {
color: aliceblue;
}
</style>
通用/全局选择器
<style>
* {
color: yellow;
}
</style>
</head>
<body>
<div>鸡哥好 我是9527号技师 你好吗 </div>
<p id="d1" class="c1">老子天下无敌</p>
<div>鸡哥好 我是9527号技师 你很棒啊 </div>
<p id="d2" class="c1">老子天下无敌</p>
<span>无敌你妹夫</span>
<span class="c1">无敌你妹夫</span>
</body>
</html>
css组合选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
后代选择器
div span /*找div里面的所有div里面的后代 (看包含关系)*/{
color: red;
}
</style>
儿子(毗邻)选择器:下面一个紧挨着下面的一个
<style>
div>span{
color: yellow;
}
</style>
弟弟选择器
<style>
div~span {
color: blue;
}
</style>
</head>
<body>
<span>div上面的第一个span</span>
<span>div上面的第一个span</span>
<div>div
<span>div里面的第一个span</span>
<p>div里面的第一个p
<span>div里面的第一个p里面的span</span>
</p>
<span>div里面最后一个span</span>
</div>
<span>div下面的第一个span</span>
<span>div线面的第二个span</span>
<span>div线面的第三个span</span>
</body>
</html>
属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
1 具有某个属性名
2 具有某个属性名及属性值
3 具有某个属性名及属性值某个标签
*/
/*[hobby] {*/
/* background-color: red;*/
/* color: blue;*/
/*}*/
/*[hobby="加多宝"] {*/
/* background-color: pink;*/
/*}*/
/* 找input 具有属性名是hobby并且值是加多宝的input标签*/
/*input[hobby='加多宝'] {*/
/* background-color: yellow;*/
/*}*/
</style>
</head>
<body>
<input type="text" name="username" hobby="加多宝">
<input type="text">
<span hobby="加多宝">span</span>
</body>
</html>
分组与嵌套
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*p {*/
/* color: yellow;*/
/*}*/
/*div {*/
/* color: yellow;*/
/*}*/
/*span {*/
/* color: yellow;*/
/*}*/
/* 分组 中间逗号隔开 不能省略 否则意义完全不一样*/
/* p,div,span {*/
/* color: red;*/
/* }*/
/* 嵌套 多个不同的选择器可以组合使用 */
#d1,.c1,span {
color: blue;
}
</style>
</head>
<body>
<p id="d1">p</p>
<div class="c1">div</div>
<span>span</span>
</body>
</html>
伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*连接态*/
a:link {
color: pink;
}
/*鼠标悬浮态*/
a:hover {
color: red;
}
/*点击态*/
a:active {
color: purple;
}
/*访问过后状态*/
a:visited {
color: yellow;
}
/*input 被点击的状态 称之为获取焦点状态*/
input:focus {
background-color: orange;
}
/* 悬浮态 */
input:hover {
background-color: pink;
}
</style>
</head>
<body>
<a href="https://www.chouti.com">点我呀!</a>
<input type="text" value="账号">
</body>
</html>
伪元素选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*p:first-letter {*/
/* font-size: 48px;*/
/* color: gold;*/
/*}*/
p:before {
content: '#';
color: gold;
}
p:after {
content: '?';
color: red;
}
</style>
</head>
<body>
<p>666666666666666666666666</p>
<p>666666666666666666666666</p>
<p>666666666666666666666666</p>
<p>666666666666666666666666</p>
</body>
</html>
选择器的优先级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
1 选择器相同的情况下 就近原则
2 选择器不同的情况下
行内 > id选择器 > 类选择器 > 标签选择器
*/
p {
color:red;
}
</style>
</head>
<body>
<p id="d1" class="c1" style="color: orange">坚持一会哇</p>
</body>
</html>