HTML篇第十八讲：css选择器后代选择器子元素选择器分组选择器
Posted 小新编程
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML篇第十八讲：css选择器后代选择器子元素选择器分组选择器相关的知识，希望对你有一定的参考价值。
【html篇】
❍
第十八讲：css选择器
什么是css选择器？
CSS选择器用于选择你想要的元素的样式的模式。
css选择器的作用？
在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素
css选择器有。
css选择器有
class、id、后代选择器、子元素选择器、分组选择器、伪元素选择器等等...
上节课主要讲了一下class和id选择器
| css选择器 |
用法 |
优先级 |
区别 |
| class |
. |
10 |
一个html网页页面可以无数次的调用相同的class类 |
| id |
# |
100 |
通过id找到标签，一个html文件中id不能重复 |
今天讲一下后代选择器、子元素选择器、分组选择器
好 废话不多说看代码
/*后代选择器*/
<html>
<head>
<style>
/*后代选器*/
/*先给ded加样式看*/
/*width=元素宽*/
/*height=元素高*/
.parentLevel{
width: 300px;
height: 300px;
background: red;
}
/*现在两个class名字相同添加样式看效果*/
/*现在一下父里面和外面都加上了*/
/*在名字相同的情况下想修改一个元素的样式使用后代选择器*/
.parentLevel .son{
width: 200px;
height: 200px;
background: #f72f72
}
.son{
width: 200px;
height: 200px;
background: #f69f63
}
</style>
</head>
<body>
<div class="parentLevel">
父
<div class="son">我是父里面的</div>
</div>
<div class="son">我是外里面的</div>
</body>
</html>
效果
/*子元素选择器*/
<html>
<head>
<style>
/*子元素选择器*/
/*color=字体颜色*/
.son{
width: 100px;
height: 100px;
background: #360
}
/* > 子元素选择器是选中父元素下的相同的元素不影响其他元素 */
.son > h3 {
color: red
}
</style>
</head>
<body>
<div class="son">
<h3>Hello world</h3>
<h3>This is</h3>
This is
</div>
</body>
</html>
效果
/*分组选择器*/
<html>
<head>
<style>
/*分组选择器*/
/* , 分组选择器 是把所有元素相同的添加样式*/
h1,h2,h3{
color: red
}
</style>
</head>
<body>
<div class="son">
<h1>Hello world</h1>
<h2>Hello world</h2>
<h3>Hello world</h3>
<h4>Hello world</h4>
<h5>Hello world</h5>
<h6>Hello world</h6>
</div>
</body>
</html>
效果
今天的课程到此结束了，部分讲解素材来源于网络，如有侵权，联系删除
客官们在下面可要多练习练习，
下节课将为客官来 外部引入css样式如何添加。
◉
●
◉
学编程，找小新，活好，欧耶！
小新承接web编程培训，
题云题库入驻，线上教育平台建设！
关注小新编程
以上是关于HTML篇第十八讲：css选择器后代选择器子元素选择器分组选择器的主要内容，如果未能解决你的问题，请参考以下文章