1.标签选择器
内容：
<body>
<h1>标签选择器</h1>
</body>
css代码：
h1 {
font-size: 50px;
color: red
}
运行结果：
2,类(class)选择器：
（可以在文档中使用多次，且可以为一个元素设计多个样式。）
内容：
<p class="passage">三年级时，我还是一个胆小如鼠的女孩子，上课从不敢回答问题，怕打错了老师批评我！</p>
css代码如下：
.passage {
text-indent: 4em;/*文本缩进*/
letter-spacing： 1em /*字间距*/
}
运行结果如下：
2.1，多样式：
<p class="p p1">学校举办的活动我也没勇气参加</p>
.p { color: red }
.p2 { font-size: 20px }
运行如下：
3,id选择器
（在一个文档中只能使用一次，而且仅一次。）
内容：
<span id="span">胆小如鼠</span>
css代码如下：
#span {
color: #0f0
}
运行结果如下：
4,子选择器“>”
（用于选择元素的第一代子元素（直接后代））
<ul class="food">
<li>茶
<ul>
<li>红茶</li>
<li>绿茶</li>
</ul>
</li>
</ul>
css代码：
.food>li {
border: 2px solid red
}
运行如下：
5，包含（后代）选择器“空格”
（指定标签的所有后代元素）
css代码：
food li {
color： #0ff
}
运行结果：
6,通用选择器“*”
匹配html中的所有标签元素
* { color：red }
7,伪类选择器
它允许给html上不存在的标签设置样式。如：
a:hover { color:red } /*鼠标滑过字体颜色*/
运行效果：
原状态
鼠标滑过时
8，分组选择器“,”
多个元素拥有同一样式：
h1,p {color: green}
相当于：
h1 {color: green }
p {color: green}
9.属性选择器“【属性】”
它不局限于class属性，可以应用于任何属性
<p text="yellow">我环顾了四周，就我没有举手</p>
css代码：
[text] {
color: yellow
}
运行结果：
属性选择器，根据属性的值进行匹配
9.1
[text = "top"] text属性值是“top”的所有元素
9.2
[text~ = "top"] text属性值包含“ top” 单词 的所有元素
9.3
[text^ = "def"] text属性值以 "def" 开头的所有元素
9.4
[text$ = "def"] text 属性值以 "def" 结尾的所有元素
9.5
[text* = "def"] text 属性值中包含 "def" 的所有元素
9.6
[text |= "top"] text属性值以"top"(单词)开头的所有元素
10,相邻兄弟选择器“+”
h1 + p {
margin-top: 100px
}
运行前效果图
运行后效果图
11，选择器的优先级
11.1
id选择器权值为100
class、属性和伪类选择器的权值为10
标签选择器权值为1
11.2
权值越大优先级越高
权值相同，后定义的优先级较高
样式值含有！important，优先级最高
网友评论