css中“>”(大于号)、"~"(浪花号)、" "(空格)、","(逗号)、"+&q-天涯论坛

4lqedz 发表于 2024-6-30 06:38:46

css中“>”(大于号)、"~"(浪花号)、" "(空格)、","(逗号)、"+&q

对新手来讲，在布局中一般搞不清这些符号的用法，今天就来为大众仔细讲解一下。
<h2 style="color: black; text-align: left; margin-bottom: 10px;">1、>(大于号) 子元素选取器 </h2>
>大于号的意思是 选取某元素后面的第1代子元素
案例
<div style="color: black; text-align: left; margin-bottom: 10px;"><style type="text/css">
 h1>strong {
 color: red;
 }
 </style>

 <body>
 <h1>
 <strong>一代子元素</strong>
 </h1>
 <h1>
 <span>
 <strong>二代子元素</strong>
 </span>
 </h1>
 </body>
</div>
<div style="color: black; text-align: left; margin-bottom: 10px;">
 <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic4.zhimg.com/v2-096068fee852feaa71d2f60e72a407cf_b.jpg" style="width: 50%; margin-bottom: 20px;"></div>
</div>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">2、~（浪花号）</h2>
~浪花号的意思是 选择 某个元素之后的所有相同元素
.box~h2 这句便是 选择 .box 后面所有的 h2
这个选取器两种元素必要处在同一个父元素内，被选择的元素不必直接紧随。
<div style="color: black; text-align: left; margin-bottom: 10px;"><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>
</div>
<div style="color: black; text-align: left; margin-bottom: 10px;">
 <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic2.zhimg.com/v2-7d2f5a4a9af83dca4c7176d75b1bd169_b.jpg" style="width: 50%; margin-bottom: 20px;"></div>
</div>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">3、（空格）派生选取器</h2>
选取某元素后面的所有子元素
派生选取器准许你按照文档的上下文关系来确定某个标签的样式
这儿还是用第1个例子
<div style="color: black; text-align: left; margin-bottom: 10px;"><style type="text/css">
 h1 strong {
 color: red;
 }
 </style>

 <body>
 <h1>
 <strong>一代子元素</strong>
 </h1>
 <h1>
 <span>
 <strong>二代子元素</strong>
 </span>
 </h1>
 </body>
</div>
<div style="color: black; text-align: left; margin-bottom: 10px;">
 <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic3.zhimg.com/v2-4ccf266342c4fcc3e29b484daeecc752_b.jpg" style="width: 50%; margin-bottom: 20px;"></div>
</div>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">4、,（逗号）群组选取器</h2>
能够对选取器进行分组，被分组的选取器就能够分享相同的声明
<div style="color: black; text-align: left; margin-bottom: 10px;"><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>
</div>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic2.zhimg.com/80/v2-bf05b833dc8a180c95b0e99612515b89_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">5、+（加号）相邻兄弟选取器</h2>
可选取紧接在另一元素后的元素，且二者有相同父元素
<div style="color: black; text-align: left; margin-bottom: 10px;"><style type="text/css">
 span+em{
 color: red;
 }
 </style>

 <body>
 <h1>
 <span>案例1</span>
 <em>案例2</em>
 </h1>
 </body>
</div>
<div style="color: black; text-align: left; margin-bottom: 10px;">
 <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic3.zhimg.com/v2-2c1dbc6d5185617718d87f84cf3c3656_b.jpg" style="width: 50%; margin-bottom: 20px;"></div>
</div>
<div style="color: black; text-align: left; margin-bottom: 10px;"><a style="color: black;">css选取器278 播放 · 1 赞同视频<img src="https://pic2.zhimg.com/v2-224f944b64a418b31d191417d01f90c6_r.jpg?source=2231c908" style="width: 50%; margin-bottom: 20px;"></a></div>
<div style="color: black; text-align: left; margin-bottom: 10px;"><a style="color: black;">https://www.bilibili.com/video/BV13b411g78D?t=400&p</a>=46www.bilibili.com/video/BV13b411g78D?t=400&p=46</div>

wrjc1hod 发表于 2024-10-7 17:22:05

可以发布外链的网站 http://www.fok120.com/

页: [1]

天涯论坛's Archiver

css中“>”(大于号)、"~"(浪花号)、" "(空格)、","(逗号)、"+&q