前言：
在学习CSS前，我们需要对 html 的知识有基本的了解，请务必了解相关知识在阅读此文。
CSS指层叠样式表，样式用来定义如何显示html元素，因此我们可以将样式存储在样式表中，通过导入外部样式表的方法来轻松改写页面的布局和外观。这极大地提高了工作效率，当需要进行全局的更新时，我们只需要简单地改变样式，然后网站中的所有元素都会自动地更新。
一、选择器
选择器是css中非常重要的一部分，我们可以利用选择器很方便地选择到我们想要操纵的元素，例子如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
color: red;
}
</style>
</head>
<body>
<div>css入门案例</div>
</body>
</html>
通常css的内容写在<style></style>中，在例子中我在<body>中创建了一个<div>块，然后在style中指定了div{color：red}，使得div中的内容颜色变成了红色。这就是css中选择器的简单应用。
上述例子中使用了元素选择器，css中有多种选择器，我会一一介绍；
1、元素选择器：略
2、id选择器：
顾名思义id选择器通过id来确定操纵的元素，例子如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#id选择{
color: red;
}
</style>
</head>
<body>
<div id="id选择">id选择器</div>
</body>
</html>
我给div 增添了一个id属性“id选择”，然后使用 #id选择{color：red；}改变了div中字的颜色。
3、类选择器：
与id选择器类似，只是使用了class作为选择的要素，例子如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.fruit{
color: red;
}
.pen{
color: blue;
}
</style>
</head>
<body>
<div class="fruit">苹果</div>
<div class="fruit">香蕉</div>
<div class="pen">铅笔</div>
<div class="pen">水彩笔</div>
</body>
</html>
类选择器语法使用 .class{} 上述例子中分别用了“fruit”，“pen”两个类名，这样在使用时就可以通过不同的类名来改变div中字的颜色，在例子中将fruit 设定为红色，pen设置为蓝色。
3、属性选择器
属性选择器与元素选择器类似，但它可以更具体地选择元素，如下例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
input[type="button"]{
background-color: red;
}
</style>
</head>
<body>
<input type="button"/>
<input type="submit"/>
</body>
</html>
我创建了一个button按钮,一个submit按钮，然后使用input[type="button"]选中了button按钮，结果显示button变成了红色，而submit没有变化，你也可以直接去掉input ，直接使用[type="button"],一样达到效果。
4、伪类选择器
伪类选择器可以根据元素不同的状态，自动选择不同的样式，例子如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
a:link{color: red;}/*未连接的链接*/
a:visited{color: blue;}/*已访问的链接*/
a:hover{color: pink;}/*鼠标移动到的链接*/
a:active{color: green;}/*选定的链接*/
</style>
</head>
<body>
<a href="#">链接</a>
</body>
</html>
我在例子中创建了一个<a>链接，然后根据它不同的状态设置了不同的显示颜色
5、后代选择器
后代选择器的例子如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div>em{
color: red;
}
</style>
</head>
<body>
<div>
这是<em>儿子</em>
<strong>
这是<em>孙子</em>
</strong>
</div>
</body>
</html>
运行后的结果是 儿子变成了红色，而孙子没有变化，这是因为 >这个符号指向元素的下一级，例子中使用了 div>em,使得儿子变成了红色，而<em>孙子</em>包裹在<strong>中，不是div的直接下一级，所以没有变色。 当我们将>去掉后，发现孙子也变成了红色，证明 div em的写法是获取div下所有em元素。
类选择器结合元素选择器
p.class{
}
如上表示选择包含class的p元素，不过id选择器不能结合使用，因为id属性不允许有以空格分隔的词列表。
上面列举的例子都是在html文件的head中使用《style》编写，但在实际使用中通常将css作为一个外部文件单独引入，既方便又容易修改，
<link rel="stylesheet" src="文件路径">
扫一扫
1115
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
