Что означает синтаксис CSS?

Что это значит: [class*="col-"] Если бы вы могли дать мне ссылку на w3schools или объяснить это мне. Как работает этот синтаксис? Я никогда не видел его в учебниках. Я понимаю все, кроме синтаксиса.Что означает синтаксис CSS?

<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>

источник

2015-07-18 Lavios

Это селектор, который будет применять стили ко всем тем элементам, у которых есть имя класса, содержащее col- – nikhil

поиск 'CSS Атрибутов selectors' –

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors – jthomas

Это означает, что он является class selector:

Выберите элемент содержит по меньшей мере одно вхождение col- в качестве его значения класса.

Так [class*="col-"] будет соответствовать как имена классов: col-1, col-2, col-one-two, one-col-one

источник

2015-07-18 14:39:32 moffeltje

Это не селектор классов, это селектор атрибутов. –

The [] скобках представляет собой селектор атрибута.

Это означало бы для строки кода, как

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

писать div[class="col-"] бы выбрать все div с классом col-

источник

2015-07-18 14:39:12

class[*="col-"] выбирает все элементы, имя класса содержит подстроки 'коллектив-', такие как <div class='my-col-class'>, <div class='col-sm-8'> и т.д.

Если вы хотите выбрать все классы, чье имя класса начинается с col-, вы бы использовали class[^="col-"].

Аналогичным образом, чтобы найти все классы, которые end с col-, вы бы использовали class[$="col-"].

источник

2015-07-18 14:39:53 Aetiranos

'class' является атрибутом. Он войдет в скобки. –

Я так знал это, я понятия не имею, почему я выставляю его на улицу. Тьфу. Позор мне. – Aetiranos

Что означает синтаксис CSS?

ответ

Смежные вопросы