CSS样式写的位置
- 行内样式 例如
<div style="color: red;">aaa</div>
直接写在标签内的样式为行内样式
- 内部样式
<style>
@import url('CSS文件所在位置');
</style>
- 外部样式
<link rel="stylesheet" href="css文件所在位置">
常用外部样式引入
引入方式优先级(就近原则):行内>内部>外部
选择器
3种基本的选择器
- class选择器
<style>
.menu {
color: red;
}
</style>
<body>
<div class="menu">我是div标签</div>
</body>
class对应的是“.”
- id选择器
<style>
#menu {
color: red;
}
</style>
<body>
<div id="menu"></div>
</body>
注意:一个id名只能对应一个标签
- 标签选择器
<style>
div {
color: red;
}
</style>
<body>
<div id="menu"></div>
</body>
3种基本选择器的优先级:id>class>标签选择器(重点)
子代选择器
父元素>子元素(中间用“>”连接)
后代选择器
祖先元素 后代元素(中间用“空格”连接)
并集选择器
选择器1,选择器2,选择器3{ }(并集选择器中间用“,”隔开)
交集选择器
选择器1选择器2选择器3{ }(交集选择器,选择器与选择器中间不写任何东西)
其他伪类选择器
<style>
p::before{
content: "我是添加的内容";
}
</style>
<style>
p::after{
content: "我是添加的内容";
}
</style>
before和after伪类选择器一般结合content来使用
高级选择器
<style>
div p:first-of-type{
color: red;
}
</style>
选择div下面的第一个p 并设置字体颜色为红色
<style>
div p:last-of-type{
color: red;
}
</style>
选择div下面的最后一个p 并设置字体颜色为红色
<style>
div p:nth-of-type(括号里写第几个,第三个就写3){
color: red;
}
</style>
选择div下面的第n个p 并设置字体颜色为红色
通用选择器
*{ }用于修改很多个相同设置的标签(通常用于全局修改)
否定选择器
<style>
div p:not(括号里写不需要的标签){
color: red;
}
</style>
否定选择器还可以配合伪类选择器来使用
<style>
div p:not(:first-of-type):after{
content: "|";
}
</style>
意为:在div下面的p标签中,除了第一个p标签,其他p标签后面都加上|
a标签的伪类
a:link{} 未访问样式 L
O
a:visited{} 访问后的样式(只生效颜色) V
E
a:hover{} 鼠标悬浮时的样式 h
a:active{} 鼠标点击未松开的样式 a
t
方便记忆的方法:记住love 和 hat 两个单词 a标签的伪类顺序就能记住