标签选择器
- 标签选择器其实就是html代码中的标签。如右侧代码编辑器中的
<html>、<body>、<h1>、<p>、<img>。
p{font-size:12px;line-height:1.6em;}
类选择器（class）
- 类选择器在css样式编码中是最常用到的，以英文圆点开头，其中类选器名称可以任意起名（但不要起中文噢）。
.stress{color:red;}
<span class="stress">class选择器</span>
id选择器
-
id选择器与class一样都可以应用在任何元素上，但id的名字只能出现一次，而class的名字则无所谓
#stress{color:red;}
<span id="stress">id选择器</span>
子选择器
还有一个比较有用的选择器子选择器，即大于符号>,用于选择指定标签元素的第一代子元素
.food>li{border:1px solid red;}
- 这行代码会使
class名为food下的子元素li（内容）加入红色实线边框。
包含(后代)选择器
- 包含选择器，即加入
空格,用于选择指定标签元素下的后辈元素
.first span{color:red;}
- 这行代码会使
class名为.first下的span元素的字体颜色变为红色 - 请注意这个选择器与子选择器的区别，子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过
空格来进行选择，而子选择器是通过>进行选择。 - 总结：
>作用于元素的第一代后代，空格作用于元素的所有后代。
通用选择器
- 通用选择器是功能最强大的选择器，它使用一个
*号指定，它的作用是匹配html中所有标签元素，如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色：
* {color:red;}
分组选择符
- 当你想为
html中多个标签元素设置同一个样式时，可以使用分组选择符，，如下代码中的h1、span标签同时设置字体颜色为红色：
h1,span{color:red;}
- 它相当于下面两行代码：
h1{color:red;}
span{color:red;}
伪类选择器
:link 定义未访问过的样式
:visited 定义访问过的样式
:hover 定义鼠标划过显示的样式
:actived 定义鼠标单击激活时候的样式
定义这四个伪类，必须按照顺序进行，否则浏览器无法正常显示
网友评论