CSS 嵌入，及其选择器
作者：@herry1995
本文为作者原创，转载请注明出处：https://www.cnblogs.com/Kernel001/p/CSS.html
目录
1. CSS样式表的几种使用方式
2. CSS 选择器
CSS
1. CSS样式表的几种使用方式
1.元素内嵌
<p style="font-size"></p>
2.内部文档内嵌
<style type="text/css">
p{
font-family:Consolas;
font-size:24px;
}
</style>
<p> 这是个段落 </p>
这样<p>标签就会表现出内部文档内嵌样式表的样式
3.外部文档内嵌
<link rel="stylesheet" type="text/css" herf="css/test.css">
4.导入式
<style type="text/css">
// 导入式
@import “css/test.css”
</style>
注：
调用优先级别： 元素内嵌样式 > 内部文档内嵌 > 外部文档内嵌
2. CSS 选择器
- 选择所有元素
<!--style元素-->
<style type="text/css">
*{
}
</style>
- 根据类型选择元素
<!--style元素-->
<style type="text/css">
a{
}
p{
}
</style>
<!--body 元素-->
<body>
<a> test </a>
<p> Test </p>
</body>
- 根据类选择元素
<!--style 元素：-->
<style type="text/css">
.class1{
}
</style>
<!--body 元素：-->
<body>
<p class="class1"＞Test </p>
</body>
- 根据ID 选择元素
<!--style 元素：-->
<style type="text/css">
#id1{
}
</style>
<!--body 元素：-->
<body>
<p id="id1"> Test </p>
</body>
- 根据属性选择元素
<!--style 元素：-->
<style type="text/css">
[href]{
}
</style>
<!--body 元素：-->
<body>
<a herf="test.html"> Test </a>
</body>
- ：选择器动作
<!--style 元素：-->
<style type="text/css">
a:hover{
}
</style>
<!--body 元素：-->
<body>
<a> Test </a>
</body>
【推荐】还在用 ECharts 开发大屏？试试这款永久免费的开源 BI 工具！
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步