网站开发：HTML + CSS - CSS选择器
1. 前言
CSS（Cascading Style Sheets，层叠样式表）是一种用于控制 HTML 文档样式和布局的语言。它为 Web 页面提供了许多功能，使开发者能够创建美观且功能丰富的用户界面。
提供了丰富的功能来控制网页的外观和布局，增强用户体验，并支持现代 Web 开发的最佳实践。通过合理使用 CSS，可以创建视觉上引人入胜、功能丰富、易于维护的 Web 应用。
2. 在HTML中使用CSS
2.1 行内样式
行内样式将CSS代码直接添加进HTML文件中，可以很简单的对单个元素定义样式
<p style="font-size:10px;text-decoration:underline;">行内样式</p>2.2 内嵌样式
内嵌样式并未将CSS代码与XTML代码完全分离，存在于<head></head>之间，可以设置一些比较简单且需要统一样式的页面
<html>
<head>
<style type='text/css'>
p
{
font-size=10px;
color=red;
}
</style>
</head>
<body>
<p>哈哈哈哈哈哈哈哈</p>
</body>
</html>2.3 链接样式
使用频率最高，也是最实用的方法。很好的将“页面内容”与“样式风格”很好的进行分离成多个文件，使得前期制作与后期维护都十分便捷。
在html文件中通过<link>标签链接外部css文件
html文件进行连接：
<html>
<head>
<link rel='stylesheet' type='text/css' href='相对路径/绝对路径'>
</head>
<body>
<h1>CSS学习</h1>
<p>我不想学</p>
</body>
</html>css文件进行修饰：
h1{text-align:center;}
p{font-weight:29px;font-style:italic;}2.4 导入模式
与链接模式类似，同样为外部文件。但是HTML文件运行时CSS进行导入文件内，类似于内嵌效果。
html文件进行连接：
<html>
<head>
<style type="text/css">
@import "绝对路径/相对路径"
</style>
</head>
<body>
<h1>CSS学习</h1>
<p>我不想学</p>
</body>
</html>css文件进行修饰：
h1{text-align:center;}
p{font-weight:29px;font-style:italic;}2.5 优先级
行内>内嵌>链接>导入
3. 选择器声明
3.1 CSS选择器
选择器不仅仅是针对于HTML文件中的元素标记，也还可以是类(Class)，ID(元素中的唯一特殊名称)或是元素中的某种属性
3.1.1 标记选择器
选择所有的h1,h2,p标签
body,p,td,th,div,blockquote,dl,ul,ol {
font-family:Tahoma,Verdana,Arial,Helvectica,sans-serif;
font-size:lem;
color:#000000;
}通过声明具体的标签，将文档中这个标记出现过的每一个地方应用样式定义
h1,h2,p
{
color:red;
font-size:20px
}3.1.2 类选择器
类选择器用来为一系列标记相同的呈现方式
.ClassValue{property:value}classvalue是指标签类的名称，对于相同类，同时作用样式定义
.a{color='red'}
<p class='a'>OKOKO</p>3.1.3 ID选择器
ID选择器与类选择器类似，但ID选择器只针对于某一个特定的ID标签
#IdValue{property:value;}Eg：
#study /*选择所有id值为study的标签*/
{
color:red;
}
<p id='study'>ID选择器</p> <!-- ID选择器只能定义一个 -->3.1.4 全局选择器
若想要对一个页面中所有的HTML标记使用同一个样式，可以使用全局选择器
*{property:value;}3.1.5 多重嵌套声明
选择标签内部中的标签
p a{color:red; font-size:30px;}针对于：
<p>haha<a href=''>测试</a></p>3.1.6 组合选择器
将多种选择器进行搭配，可以构成一种复合选择器。
组合选择器是一种组合形式，而不是真正的选择器。
tagName.classValue{property:value;}3.1.7 继承选择器
子标记在没有任何定义的情况下所有的样式都是继承父标记的
h1{color:red;}
h1 span{color:blue;}
</style>
</head>
<body>
<h1>OKOKO<span>yes</span></h1>
</body>3.1.8 伪类
伪类定义的CSS样式不是作用在标记上，而是作用在标记的状态上
伪类选择器定义的样式常作用于标记<a>上，表示超链接的4种不同样式
a:link {color:red;} /*未访问的链接*/
a:visited {color:green;} /* 已经访问的链接*/
a:hover {color:blue;} /* 鼠标移动到链接上*/
a:active {color:orange;} /* 鼠标点击*/3.1.9 属性选择器
不通过HTML中标签的名称或自定义名称，而是直接属性控制HTML标记样式的选择器，称之为属性选择器。根据某个属性是否存在或属性值寻找元素
相关格式：
| 属性选择器格式 | 说明 |
| [foo] | 匹配定义了foo属性的元素 |
| [foo='bar'] | foo属性为bar的元素 |
| [foo~='bar'] | foo属性是一个以空格分隔的列表，其中一个列表值为bar |
| [foo|='en'] | foo属性值是一个用‘-’分隔的列表，匹配开头字符为en的属性 |
| [fool^='bar'] | foo属性中包含了bar的前缀 |
| [fool$='bar'] | foo属性中包含bar的后缀，eg: <img src='p.jpg'> |
| [fool*='bar'] | foo属性包含‘bar’的字符串 |
3.1.10 UI元素状态伪类选择器
对于用户界面（User Interface）的选择器，主要针对于<input>标签
| 选择器 | 说明 |
| E:enabled | 匹配E的所有可用UI元素，input:enabled -> <form><input type='button' disabled=disabled><input type='text'></form>;匹配其中的text |
| E:disabled | 选择匹配E的所有不可用元素；input:enabled -> <form><input type='button' disabled=disabled><input type='text'></form>;匹配其中的button |
| E:checked | 选择匹配E的所有可用UI元素；input:enabled -> <form><input type='button' disabled=checked><input type='text'></form>;匹配其中的button |
3.2 选择器声明
3.2.1 集体声明
同时选择不同标签，使用','相连
<style type='text/css'>
h1,h2,p
{
color:red;
font-size:10px;
}
</style>3.2.2 多重嵌套声明
层层递进对指定位置的HTML标记进行修饰，使用空格符相连
<style type='text/css'>
p a
{
color:red;
font-size:10px;
}
</style>
4. 参考资料
1. 《精通HTML5+CSS3+JavaScript网页设计》