写在前面:CSS选择器
网页要显示很多内容,想要为每个内容设置不同的样式,我们就得首先选中要设置样式的内容,CSS选择器就是指明该样式是针对HTML里哪一个元素的。简单的例子,网页上有几段文字,我们想把第一段文字调成红色的,在用CSS写完红色文字样式后,是不是得指明该红色文字样式是针对第一段文字的,那就得用CSS选择器了。CSS选择器提供了多种方式帮你选中要设置样式的元素,这里我们介绍常用的三种:
元素选择器,就是“选中”相同的元素,然后对相同的元素设置同一个CSS样式。
ID选择器,元素选择器范围太广,可以选中所有相同的元素,如果我们想指定某一个元素,就可以为该元素设置一个ID,就是相当于取一个独一无二的名字,然后用ID选择器就可以单独选中它。
class选择器,假如我们想要为不同类型的多个元素设置相同的样式该怎么办呢,那么我们就可以写一个class,然后在要应用这个class样式的元素中声明就可以了。
别罗嗦,来个例子看看!
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
/*元素选择器,直接用元素名称后跟大括号里写样式内容*/
div{color:red;}/*将所有div里的内容设为红色*/
/*ID选择器,前缀#加ID名称后跟大括号里写样式内容*/
#p1{color:green;}/*将ID为p1的元素里的内容设为绿色*/
/*class选择器,前缀.(英文点号)加class名称后跟大括号里写样式内容*/
.c1{color:blue;}/*将声明class为c1的元素里的内容设为蓝色*/
</style>
</head>
<body>
<div>还有诗和远方的田野</div><!--红色,响应样式color:red-->
<p id="p1">还有诗和远方的田野</p><!--绿色,响应样式color:green-->
<p class="c1">还有诗和远方的田野</p><!--蓝色,响应样式color:blue-->
<span