网站开发：HTML + CSS - CSS选择器

1. 前言

CSS（Cascading Style Sheets，层叠样式表）是一种用于控制 HTML 文档样式和布局的语言。它为 Web 页面提供了许多功能，使开发者能够创建美观且功能丰富的用户界面。

提供了丰富的功能来控制网页的外观和布局，增强用户体验，并支持现代 Web 开发的最佳实践。通过合理使用 CSS，可以创建视觉上引人入胜、功能丰富、易于维护的 Web 应用。

2. 在HTML中使用CSS

2.1 行内样式

行内样式将CSS代码直接添加进HTML文件中，可以很简单的对单个元素定义样式

html 复制代码

<p style="font-size:10px;text-decoration:underline;">行内样式</p>

2.2 内嵌样式

内嵌样式并未将CSS代码与XTML代码完全分离，存在于<head></head>之间，可以设置一些比较简单且需要统一样式的页面

html 复制代码

<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 复制代码

<html>
<head>
    <link rel='stylesheet' type='text/css' href='相对路径/绝对路径'>
</head>
<body>
    <h1>CSS学习</h1>
    <p>我不想学</p>
</body>
</html>

css文件进行修饰：

css 复制代码

h1{text-align:center;}
p{font-weight:29px;font-style:italic;}

2.4 导入模式

与链接模式类似，同样为外部文件。但是HTML文件运行时CSS进行导入文件内，类似于内嵌效果。

html文件进行连接：

html 复制代码

<html>
<head>
    <style type="text/css">
    @import "绝对路径/相对路径"
    </style>
</head>
<body>
    <h1>CSS学习</h1>
    <p>我不想学</p>
</body>
</html>

css文件进行修饰：

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标签

css 复制代码

body,p,td,th,div,blockquote,dl,ul,ol {
    font-family:Tahoma,Verdana,Arial,Helvectica,sans-serif;
    font-size:lem;
    color:#000000;
}

通过声明具体的标签，将文档中这个标记出现过的每一个地方应用样式定义

css 复制代码

h1,h2,p
{
    color:red;
    font-size:20px
}

3.1.2 类选择器

类选择器用来为一系列标记相同的呈现方式

css 复制代码

.ClassValue{property:value}

classvalue是指标签类的名称，对于相同类，同时作用样式定义

html 复制代码

.a{color='red'}

<p class='a'>OKOKO</p>

3.1.3 ID选择器

ID选择器与类选择器类似，但ID选择器只针对于某一个特定的ID标签

css 复制代码

#IdValue{property:value;}

Eg：

html 复制代码

			#study /*选择所有id值为study的标签*/
			{
				color:red;
			}



<p id='study'>ID选择器</p> <!-- ID选择器只能定义一个 -->

3.1.4 全局选择器

若想要对一个页面中所有的HTML标记使用同一个样式，可以使用全局选择器

css 复制代码

*{property:value;}

3.1.5 多重嵌套声明

选择标签内部中的标签

css 复制代码

p a{color:red; font-size:30px;}

针对于：

html 复制代码

<p>haha<a href=''>测试</a></p>

3.1.6 组合选择器

将多种选择器进行搭配，可以构成一种复合选择器。

组合选择器是一种组合形式，而不是真正的选择器。

css 复制代码

tagName.classValue{property:value;}

3.1.7 继承选择器

子标记在没有任何定义的情况下所有的样式都是继承父标记的

html 复制代码

h1{color:red;}
h1 span{color:blue;}
</style>
</head>
<body>
<h1>OKOKO<span>yes</span></h1>
</body>

3.1.8 伪类

伪类定义的CSS样式不是作用在标记上，而是作用在标记的状态上

伪类选择器定义的样式常作用于标记<a>上，表示超链接的4种不同样式

css 复制代码

a:link {color:red;} /*未访问的链接*/
a:visited {color:green;} /* 已经访问的链接*/
a:hover {color:blue;} /* 鼠标移动到链接上*/
a:active {color:orange;} /* 鼠标点击*/

3.1.9 属性选择器

不通过HTML中标签的名称或自定义名称，而是直接属性控制HTML标记样式的选择器，称之为属性选择器。根据某个属性是否存在或属性值寻找元素

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 集体声明

同时选择不同标签，使用','相连

css 复制代码

<style type='text/css'>
h1,h2,p
{
    color:red;
    font-size:10px;
}
</style>

3.2.2 多重嵌套声明

层层递进对指定位置的HTML标记进行修饰，使用空格符相连

css 复制代码

<style type='text/css'>
p a
{
    color:red;
    font-size:10px;
}
</style>

参考资料
《精通HTML5+CSS3+JavaScript网页设计》