CSS3新增的基本选择器
程序员文章站
2022-05-11 09:05:57
...
1、子元素选择器
概念：子元素只能选择某元素下的子元素，直接后代选择器。
语法：father > children
栗子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
section > div {
color: #ff0000;
}
</style>
</head>
<body>
<section>
<article>section下的article</article>
<div>section下的div</div>
<article>
<div>section下的article下的div</div>
</article>
<div>section下的div</div>
</section>
</body>
</html>效果图：
解释：section的儿子div，孙子div不起作用，儿子article不起作用。
2、相邻兄弟元素选择器
概念：选择紧接在该元素后的元素
语法：element + sibiling
栗子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
section > div + article {
color: #ff0000;
}
</style>
</head>
<body>
<section>
<div>section下的div</div>
<article>section下的article</article>
<aside>section下的aside</aside>
<article>section下的article</article>
<div>section下的div</div>
</section>
</body>
</html>效果图：
解释：选中section下紧跟div后的article元素。
3、通用兄弟元素选择器
概念：选择某一元素后面的所有兄弟元素
语法：element ~ sibiling
栗子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
section > div ~ article {
color: #f00;
}
</style>
</head>
<body>
<section>
<article>section下的article</article>
<div>
<article>div下的article</article>
</div>
<article>section下的article</article>
<article>section下的article</article>
</section>
</body>
</html>效果图：
解释：选中section下div后所有article元素，子元素不算，仅仅是相邻兄弟元素。
4、群组选择器
概念：将具有相同样式的选择器放在一起，用","隔开。
语法：element1,element2,element3...
栗子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
section>article,section>aside,section>div {
color: #f00;
}
</style>
</head>
<body>
<section>
<article>section下的article</article>
<aside>section下的aside</aside>
<div>section下的div</div>
</section>
</body>
</html>效果图：
解释：选中article，aside，div元素。
上一篇： [业余难点自学]html5的跨文档消息