|
对新手来讲，在布局中一般搞不清这些符号的用法，今天就来为大众仔细讲解一下。
1、>(大于号) 子元素选取器
>大于号的意思是 选取某元素后面的第1代子元素
案例
<style type="text/css">
h1>strong {
color: red;
}
</style>
<body>
<h1>
<strong>一代子元素</strong>
</h1>
<h1>
<span>
<strong>二代子元素</strong>
</span>
</h1>
</body>
2、~（浪花号）
~浪花号的意思是 选择 某个元素之后的所有相同元素
.box~h2 这句便是 选择 .box 后面所有的 h2
这个选取器 两种元素必要处在同一个父元素内，被选择的元素不必直接紧随。
<style type="text/css">
.box~h2{
bac公斤round: aqua;
}
</style>
<body>
<div class="box"></div>
<h2>1</h2>
<em>2</em>
<h2>3</h2>
<h2>4</h2>
</body>
3、（空格） 派生选取器
选取某元素后面的所有子元素
派生选取器准许你按照文档的上下文关系来确定某个标签的样式
这儿还是用第1个例子
<style type="text/css">
h1 strong {
color: red;
}
</style>
<body>
<h1>
<strong>一代子元素</strong>
</h1>
<h1>
<span>
<strong>二代子元素</strong>
</span>
</h1>
</body>
4、,（逗号）群组选取器
能够对选取器进行分组，被分组的选取器就能够分享相同的声明
<style type="text/css">
h1,h2,h3{
color: blue;
}
h4,h5,h6{
color: red;
}
</style>
<body>
<h1>案例1</h1>
<h2>案例1</h2>
<h3>案例1</h3>
<h4>案例2</h4>
<h5>案例2</h5>
<h6>案例2</h6>
</body>
5、+（加号）相邻兄弟选取器
可选取紧接在另一元素后的元素，且二者有相同父元素
<style type="text/css">
span+em{
color: red;
}
</style>
<body>
<h1>
<span>案例1</span>
<em>案例2</em>
</h1>
</body>
| 
发表于 2024-6-30 06:38:46
