只能修饰唯一一个html元素的选择器是,HTML+CSS 第八章选择器

8种机械键盘轴体对比

本人程序员，要买一个写代码的键盘，请问红轴和茶轴怎么选？

8-1 什么是选择器说明

每一条css样式声明有两部分组成，形式如下选择器{

样式;

}

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

8-2 标签选择器说明

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

,

,

举例

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

上面css样式代码的作用：为p标签设置12px字号，行间距为1.6em

8-3 类选择器说明

类选择在css样式编码中时最常用到的语法

.类选择器名称{css样式代码;}

1.使用合适的标签把要修饰的内容表记起来，如下：`壮志凌云`

2.使用class=“类选择器名称”为标签设置一个类，如下：壮志凌云

3.设置类选择器css样式，如下:.stress{color:red;}/*类前面要加入一个英文圆点*/

8-4 ID 选择器说明

很多方面，ID选择器都类似于选择符，但也有一些重要区别，见以下语法语法为标签设置id=”ID名称”，而不是class=”类名称”。

ID选择符的前面是#号，而不是英文圆点.

8-5类和ID选择器的区别说明

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

不同点：ID选择器只能在文档里使用一次，而类选择器可以使用多次。

/正确示例/

壮志凌云

凌云壮志

/错误示例/

壮志凌云

凌云壮志

可以使用类选择器

8-6子选择器说明

标志为大于号(>)用于选择指定标签元素的第一代子元素举例

如下:.food>li{border:1px solid red;}

/*这行代码会使class名为food下的子元素li(水果、蔬菜)加入红色实线边框。*/

8-7 包含(后代)选择器举例

.first span{color:red}

说明

自选择器与后代选择器的区别：子选择器(child selector)仅是指它的直接后代，或者你可以理解为作用于子元素的第一代后代。而后代选择器作用于所有子后代元素。后代选择器通过空格来进行选择，而自选择器通过“>”进行选择。

总结：>作用于元素的第一代后代，空格作用于元素的所有后代

8-8 通用选择器说明

通用选择器是功能最强的的选择器，它使用一个()号指定，它的作用是匹配html中所有*标签元素，如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色：* {color:red;}

8-9 伪类选择符说明

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

8-10 分组选择符说明

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

如下代码为右侧代码编辑器中h1、span标签同时设置字体颜色为红色h1,span{color:red;}

相当于下面两行代码：h1{color:red;}

span{color:red;}