css选择器
选择器的作用就是选择一些内容指定格式.
标签选择器
<!DOCTYPE html>
<html>
<head>
<!-- 标签选择器 -->
<style type="text/css">
p {color: blue; text-decoration: underline;}
</style>
<meta charset="UTF-8">
<title>Sample document</title>
</head>
<body>
<p>
<strong>C</strong>ascading <!-- strong是加粗-->
<strong>S</strong>tyle
<strong>S</strong>heets
</p>
</body>
</html>
把p标签的内容设置成蓝色加下画线.
id选择器
id是整个文档惟一的.下面代码定义2个id选择器.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#div1 {
width: 200px;
height: 200px;
border: solid 2px blue;
float: left;
margin: 4px;
background-color: green;
}
#div2 {
width: 200px;
height: 200px;
border: solid 2px blue;
float: left;
margin: 4px;
background-color: red;
}
</style>
<meta charset="UTF-8">
<title>Sample document</title>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
类选择器
<!DOCTYPE html>
<html>
<head>
<!-- id-->
<style type="text/css">
.red {
width: 200px;
height: 200px;
border: solid 2px blue;
float: left;
margin: 4px;
background-color: green
}
.green {
width: 200px;
height: 200px;
border: solid 2px blue;
float: left;
margin: 4px;
background-color: red
}
</style>
<meta charset="UTF-8">
<title>Sample document</title>
</head>
<body>
<div class="red"></div>
<div class="green"></div>
</body>
</html>
伪类选择器
<html>
<head>
<style type="text/css">
a:link {color: #FF0000} /*搜索引擎中经常有这种情况,访问过的链接和没有访问过的链接颜色不一样,*/
a:visited {color: #00FF00} /*link为没有访问过的颜色,visited为访问过的颜色*/
a:hover {color: #FF00FF} /*鼠标指向超链接的颜色*/
a:active {color: #0000FF} /*鼠标点击超链接的颜色*/
</style>
</head>
<body>
<a href="./c00.html">This is a link</a> <!-- 链接前面不要加http-->
</body>
</html>
子选择器
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
div>p{
background-color:yellow;
}
</style>
</head>
<body>
<div>
<p>子元素选择器</p> <!-- p是div的直接子元素,子选择器才有效-->
<span><p>后代选择器</p></span>
</div>
</body>
</html>
相邻选择器
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
li + li {font-weight:bold;}
</style>
</head>
<body>
<div>
<ul>
<li>List item 1</li> <!-- 第1个前面没有和它相同的元素,所以第1个没有粗体 -->
<li>List item 2</li>
<li>List item 3</li>
</ul>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
</div>
</body>
属性选择器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">/*为带有 title 属性的所有元素设置样式*/
[title]
{
color:red;
}
</style>
</head>
<body>
<h1>可以应用样式：</h1>
<h2 title="Hello world">Hello world</h2> <!-- title的作用是指向tile的内容时会显示tile里的内容 -->
<a title="W3School" href="http://w3school.com.cn">W3School</a>
<h1>无法应用样式：</h1>
<h2>Hello world</h2>
<a href="http://w3school.com.cn">W3School</a>
</body>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义