认识css中所有的选择器
什么是选择器
每一条样式申明(定义)由两部分组成
选择器{
样式; }
标签选择器
p{
font-size:12px;
line-height:1.6em; }
类选择器
.类选择器的名称{
css样式代码; }
需要注意的是
1、英文圆点开头
2、其中类选择器可以任意起名(不用中文)
使用方法
1、使用合适的标签把修饰的内容标记起来.
<span>OA</span>
2、使用class="类选择器的名称"为标签设置一个类.
<span class="stre">OA系统</span>
3、设置类选择器css的样式.
如下:将"公开课"设置为红色<span class=setRed>公开课</span>然后再<head>标签里输入setRed{color:green}
Id选择器
1、为标签设置id="Id名称",而不是class="类名称"
2、id选择器前面是#而不是英文圆点
在<head>标签里输入
#setRed{
color:red; } 在具体编辑里<span id="setRed">公开课</span>
需要注意的是
1、Id选择器只能在文档使用一次,而且仅一次,而类选择器可以使用多次
子选择器
用于选择指定标签的第一代子元素
.food>li{
border:1px solid red } 这里会为food下的子元素的li加入红色实线边框
包含选择器
即加入空格,用于选择器指定标签元素下的后辈元素
.first span{
color:red;} 子选择器仅指它的直接后代,或理解为子元素的第一代后代,而后代选择器用于所有后代,后代选择器用空格来实现.
通用选择器
是功能强大的选择器,作用于html所有标签中
*{
color:red }
伪类选择器
给不存在的标签设置样式,如给html中的一个标签元素的鼠标滑过的装袋设置字体颜色
a:hover{
color:red }
分组选择器
当你为多个标签设置同一个样式时可以使用分组选择器(,)
h1,span{
color:red; }它相当于 h1{ color:red;}和span{ color:red;}