前端开发学习笔记（四）- Css 选择器

一.什么是选择器?

每一条CSS样式声明(定义)由两部分组成，形成如下:

选择器{样式;}

在{}之前的部分就是"选择器","选择器"指明了{}中的"样式"的作用对象，也就是“样式”作用于网页中的哪些元素.

二.标签选择器

标签选择器其实就是html代码中的标签。如,,

,等

三.类选择器

类选择器在CSS样式编码中是最常用到的。

P：1.英文原点开头 2.其中类选择器可以任意起名

语法: .类选择器名称{CSS样式代码};

四.ID选择器

在很多方面，ID选择器都类似于类选择符，但也有一些重要的区别:

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

2.ID选择符的前面是#号，而不是英文原点"."。

ID选择器和类选择器的区别.

相同点: 可以应用于任何元素

不同点:

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

2.可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式，但只可以使用类选择器的方法实现，ID选择器是不可以的.(个人理解.ID选择器就像是一张身份证，你领了之后，其他人就不能再领，有且只有一个~)

五.子选择器

子选择器用于选择指定标签元素的第一代子元素。

通俗理解:就是指，为这一类的子类，仅子类添加指定样式.

语法举例:.food>milk{border:1px solid red};�

六.包含(后代)选择器

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

语法举例:.food span{color:red};这行代码会使food下所有span标签的字体都变成红色

后代选择器和子选择器的却别:

1.自选择器仅是指它的直接后代.后代选择器作用于它所有后代

2.后代选择器通过空格来进行选择，子选择器通过">"进行选择

七.通用选择器

通用选择器是功能最强大的选择器,它使用一个(*)号指定，它的作用是匹配html中所有的元素.

八.伪类选择符

伪类选择符允许给html不存在的标签(标签的某种状态)设置样式。

语法举例：a:hove{color:red};

关于伪选择符:到目前为止，可以兼容所有浏览器的"伪类选择符"就是a标签上使用:hover.其实：hover可以放在任意的标签上，比如说 p:hover.但是它们的兼容性也是很不好的.

九.分组选择符

为html中多个标签元素设置同一个样式，可以使用分组选择符(,)。

语法举例:h1,span{color:red};相当于 h1{color:red;} span{color:red;}