1.在{}之前的部分就是“选择器”,其指明了“样式”作用的对象
选择器{
样式;
}
2.标签选择器
如:段落标签p{ ... },以标签名为选择符的,且写在<style>...</style>里面的
3.类选择器
语法: .类选择名称{ css样式代码; }
4.id选择器
语法: #id名称{ css样式代码; }
5.类选择器和id选择器的区别
1)相同点:可以应用于任何元素
2)不同点:a:id选择器只能在文档中用一次(即一个标签一个id),类选择器则可以用多次(多个标
签可以用同一个类名)
b:一个标签可以有多个类名来设置自己,
6.子选择器
<div class="food"> <h1>你好</h1> </div>
如:.food>h1{ color:red; }
a:> 于号用于指定标签元素的第一代子元素(后代)
7.包含(后代)选择器
<div class="food">
<h1>
<p>你好</p>
</h1>
</div>
如:.food p{ color:green; }
a:空格作用于元素的所有后代
8.通用选择器
匹配html中所有标签元素。如:*{color:red;} ,html中所有标签元素字体全部设置成红色
9.伪类选择符
语法:p:hover{color:red;}
a:p段落标签
b:hover伪类选择符
c:作用是表示鼠标滑过后显示的状态
10.分组选择符“ ,”
实现多个标签元素设置同一个样式
如:h1,span{ color:red;}
相当于:
h1{ color:red;}
span{ color:red;}