Question

这是什么意思：[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>

Answer 1

这意味着它是class selector：

选择包含至少一次col-出现的任何元素作为其类值。

所以[class*="col-"]会匹配类名：col-1，col-2，col-one-two，one-col-one

Answer 2

[]括号是属性选择器。

这意味着代码行为

<div class="col-"></div>

撰写div[class="col-"]会选择所有div与课程col-

Answer 3

class[*="col-"]选择类名包含子字符串＆＃39; col - ＆＃39;例如<div class='my-col-class'>，<div class='col-sm-8'>等

如果您想选择所有类别开始的课程，请使用{ - 1}。

同样，要使用col-查找结束的所有课程，您必须使用class[^="col-"]。

这个CSS语法是什么意思？

3 个答案: