CSS样式选择器

样式选择器：

每一条css样式声明（定义）由两部分组成，形式如下：

选择器{

    样式；

    }

标签选择器：

标签选择器其实就是html代码中的标签，例

使用方法：

p{font-size:12px;line-height:1.6em;}

类选择器：

以英文圆点开头，不可以使用数字或中文起名

使用方法：

1.使用class="类选择器名"为标签设置一个类，如下：

<span class="stress">胆小如鼠</span>

2.设置类选择器css样式，如下：

.stress{color:red;}

ID选择器：

ID选择器类似于类选择器

1.为标签设置id="ID名称" 而不是class="类名称"

2.ID选择符的前面是#，而不是.

使用方法：

1, <span id="set">哈哈哈</span>

2，在<style>标签中写入# set{color：green;}

类和ID选择器的区别：

相同点：

可以应用于任何元素

不同点：

1、ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。

2、可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的（不能使用 ID 词列表）。

总结：

id就像身份证号码，是唯一的，该身份证号码就能代表你。一个人不能有两个身份证号码，也不能一个身份证号码表示两个人。

而class就像昵称，该昵称也能代表你。一个人可以有多个昵称，也可以多个人用同个昵称。

子选择器：

即大于符号(>),用于选择指定标签元素的第一代子元素

使用方法：

.food>li{border：1px solid red;}//会使class名为food下的子元素li 加入红色实线边框

包含 后代选择器：

包含选择器，即加入空格,用于选择指定标签元素下的后辈元素

如：.first span{color:red;} 会使名为“first”的标签所包含的span 变为红色

子选择器与后代选择器的区别：

子选择器仅是指直接后代（第一代后代）子选择器是痛过“>”进行选择

后代选择器指所有子后代元素，后代选择器通过空格来进行选择 

总结：>作用于元素的第一代后代，空格作用于元素的所有后代。">"只需要作用于“儿子”，而“空格”则是子子孙孙都被作用了。。。

通用选择器：

使用*号指定，他的作用是拼配html中所有标签元素，

使用方法：

* {color:red;}

伪类选择符：

允许给html不存在的标签设置样式，比如给html中的一个标签元素的鼠标滑过的状态来设置演的。

使用方法：

a:hover{color:red;}//可以使标签为<a>中的内容变为红色

分组选择器：

可以为html中多个标签设置同一个样式，

使用方法：

h1,span{color:red;}

相当于

h1{color:red;}

span{color:red;}

总结：

类选择器， .class{}，在标签内定义class=""，属图形结构。

ID选择器，#ID{}, 在标签内定义id=""，有严格的一一对应关系。

子选择器， .span>li{}，作用于父元素span类下一层的li标签。

包含选择器，.span li{}，作用于父元素span下所有li标签。

通用选择器，*{}，匹配所有html的标签元素。

伪类选择符：它允许给html不存在的标签(标签的某种状态)设置样式，比如说我们给html中的一个标签元素的鼠标滑过的状态来设置字体颜色。

分组选择器：通过分组选择符（,）将两个选择器压缩为一组

 

类选择器， .class{}，在标签内定义class=""， 属图形结构。

ID选择器，#ID{}, 在标签内定义id=""，有严格的一一对应关系。

子选择器， .span>li{}，作用于父元素span类下一层的li标签。

包含选择器，.span li{}，作用于父元素span下所有li标签。

通用选择器，*{}，匹配所有html的标签元素。