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

66b52468c121889b900d4956032f1009.png

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;}

你可能感兴趣的:(只能修饰唯一一个html元素的选择器是,HTML+CSS 第八章选择器)