中国能源建设集团网站,品牌营销案例,引导交互 网站,网站前台展示类和ID选择器的区别
学习了类选择器和ID选择器#xff0c;我们会发现他们之间有很多的相似处#xff0c;是不是两者可以通用呢#xff1f;我们不要着急先来总结一下他们的相同点和不同点#xff1a;
相同点#xff1a;可以应用于任何元素不同点#xff1a;
1、ID选择器…类和ID选择器的区别
学习了类选择器和ID选择器我们会发现他们之间有很多的相似处是不是两者可以通用呢我们不要着急先来总结一下他们的相同点和不同点
相同点可以应用于任何元素不同点
1、ID选择器只能在文档中使用一次。与类选择器不同在一个HTML文档中ID选择器只能使用一次而且仅一次。而类选择器可以使用多次。
下面代码是正确的 p三年级时我还是一个span classstress胆小如鼠/span的小女孩上课从来不敢回答老师提出的问题生怕回答错了老师会批评我。就一直没有这个span classstress勇气/span来回答老师提出的问题。/p
而下面代码是错误的 p三年级时我还是一个span idstress胆小如鼠/span的小女孩上课从来不敢回答老师提出的问题生怕回答错了老师会批评我。就一直没有这个span idstress勇气/span来回答老师提出的问题。/p
2、可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式但只可以用类选择器的方法实现ID选择器是不可以的不能使用 ID 词列表。
下面的代码是正确的(完整代码见右侧代码编辑器)
.stress{color:red;
}
.bigsize{font-size:25px;
}
p到了span classstress bigsize三年级/span下学期时我们班上了一节公开课.../p上面代码的作用是为“三年级”三个文字设置文本颜色为红色并且字号为25px。
下面的代码是不正确的(完整代码见右侧代码编辑器)
#stressid{color:red;
}
#bigsizeid{font-size:25px;
}
p到了span idstressid bigsizeid三年级/span下学期时我们班上了一节公开课.../p
上面代码不可以实现为“三年级”三个文字设置文本颜色为红色并且字号为25px的作用。
!DOCTYPE HTML
html
head
meta http-equivContent-Type contenttext/html; charsetutf-8
title类和ID选择器的区别/title
style typetext/css
.stress{color:red;
}
.bigsize{font-size:25px;
}
#stressid{color:red;
}
#bigsizeid{font-size:25px;
}
/style
/head
bodyh1勇气/h1p三年级时我还是一个span classstress胆小如鼠/span的小女孩上课从来不敢回答老师提出的问题生怕回答错了老师会批评我。就一直没有这个span classstress勇气/span来回答老师提出的问题。学校举办的活动我也没勇气参加。/pp到了span classstress bigsize三年级/span下学期时我们班上了一节公开课老师提出了一个很简单的问题班里很多同学都举手了甚至成绩比我差很多的也举手了还说着我来我来。我环顾了四周就我没有举手。/pp到了span idstressid bigsizeid三年级/span下学期时我们班上了一节公开课老师提出了一个很简单的问题班里很多同学都举手了甚至成绩比我差很多的也举手了还说着我来我来。我环顾了四周就我没有举手。/p/body
/html
运行结果 子选择器
还有一个比较有用的选择器子选择器即大于符号(),用于选择指定标签元素的第一代子元素。如右侧代码编辑器中的代码
.foodli{border:1px solid red;}
这行代码会使class名为food下的子元素li水果、蔬菜加入红色实线边框。
!DOCTYPE HTML
html
head
meta http-equivContent-Type contenttext/html; charsetutf-8
title子选择符/title
style typetext/css
.foodli{border:1px solid red;}/*添加边框样式粗细为1px 颜色为红色的实线*/
.firstspan{border:1px solid red;}
/style
/head
body
p classfirst三年级时span我还是一个span胆小如鼠/span的小女孩/span上课从来不敢回答老师提出的问题生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。/p
h1食物/h1
ul classfoodli水果ulli香蕉/lili苹果/lili梨/li/ul/lili蔬菜ulli白菜/lili油菜/lili卷心菜/li/ul/li
/ul
/body
/html
运行结果
