gpt4 book ai didi

html - 这个 CSS 语法是什么意思?

转载 作者:太空宇宙 更新时间:2023-11-04 11:39:07 24 4
gpt4 key购买 nike

这是什么意思:[class*="col-"] 如果您能给我 w3schools 的链接或向我解释一下。这个语法是如何工作的?我从来没有在教程中看到它。除了那个语法,我什么都懂。

<style>
* {
box-sizing: border-box;
}
.header {
border: 1px solid red;
padding: 15px;
}
.row:after {
content: "";
clear: both;
display: block;
}
[class*="col-"] {
float: left;
padding: 15px;
border: 1px solid red;
}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
</style>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>
<body>

<div class="header">
<h1>Chania</h1>
</div>

<div class="row">

<div class="col-3">
<ul>
<li>The Flight</li>
<li>The City</li>
<li>The Island</li>
<li>The Food</li>
</ul>
</div>

<div class="col-9">
<h1>The City</h1>
<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
<p>Resize the browser window to see how the content respond to the resizing.</p>
</div>

</div>
</body>
</html>

最佳答案

这意味着它是一个 class selector :

Select any element contains at least one occurrence of col- as its class value.

因此 [class*="col-"] 将匹配类名,例如:col-1col-2 col-one-twoone-col-one

关于html - 这个 CSS 语法是什么意思?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31492211/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com