<table class="table table-striped">
        <thead>
            <tr>
                <th>#</th>
                <th>Firstname</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Anna</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Debbie</td>
            </tr>
            <tr>
                <td>3</td>
                <td>John</td>
            </tr>
        </tbody>
</table>

Это фрагмент из примера начальной загрузки. заметил, что у него есть несколько классов в одной метке, так какова связь между этими двумя классами? кажется, что полосатый является подклассом таблицы ?

И как CSS изменит стиль этого элемента? Будет ли стиль табличного переопределять стиль таблицы ?

Более того, как мне выбрать этот элемент по классу?

-2
Ziqi Liu 2 Сен 2017 в 02:13

4 ответа

Лучший ответ

Я вижу, что вы все еще учитесь здесь, если я собираюсь предположить, что для обучения гораздо лучше держаться подальше от фреймворков, пока вы не узнаете, как работают базовые вещи, скачок вперед вызовет только сложности. Хотя все равно

Классы, которые вы упомянули, не имеют отношения вообще, фактически все классы CSS не имеют отношения вообще. Например, они выделяются самостоятельно:

.table {
  border: 1px solid black;
  width: 100%;
  // other common properties you find in a table
}

А там другой идет:

.table-striped {
  border: 1px dashed black;
  // other properties you can find on a striped table
}

Поскольку вы вызываете table-striped в таблице, которая содержит table класс table-striped, просто переопределите общие свойства table, который равен border, и примените его к элементу.

Как это переопределить? Это то, что я называю приоритетом в CSS, какой бы стиль не был последним, он всегда применяется, хотя позже вы столкнетесь с тем, что переопределения CSS вообще не применяются, IF селекторы не совпадают.

И последнее: неважно, как вы собираетесь выбирать класс как:

.table {
   // stuff
}

.table-striped {
   // stuff
}

// if selector contains both classes
.table.table-striped {
   // stuff
}

// if a table element contains .table class
table.table {
   // stuff
}

// and so on...

Не имеет значения вообще. Надеюсь, это поможет вам понять.

1
masterpreenz 1 Сен 2017 в 23:33

Браузер будет использовать значения из обоих классов и применить их к этому элементу.

Вы можете выбрать элемент на основе каждого из них или обоих

.cls-a {
  background: red;
}
.cls-b {
  color: blue;
}
.cls-a.cls-b {
  border: 2px solid green;
}
<div class="cls-a cls-b">Test</div>
0
Dekel 1 Сен 2017 в 23:15

Несколько классов имеют не означает, что они имеют какое-либо отношение друг к другу. Насколько я знаю, <table class="table table-striped"> точно такой же, как <table class="table-striped table ">.

Вы бы выбрали эту таблицу, используя ее классы с любой из следующих комбинаций:

  • .table
  • .table-stripped
  • .table.table-stripped или .table-stripped.table

Как будет влиять CSS, зависит от стилей. По именам я бы предположил, что .table будет стилизовать его как все таблицы начальной загрузки. .table-stripped добавил бы разные цвета фона для нечетных и четных строк. Пример

0
Chris Happy 1 Сен 2017 в 23:19

Это просто начальная загрузка CSS, у вас может быть столько классов, сколько вы хотите на одном элементе. Вы можете добавить еще один класс после таблицы, создайте свой собственный файл .css и отредактируйте его, как хотите. Или вы можете добавить идентификатор в таблицу и стилизовать его так.

0
V. Alen 1 Сен 2017 в 23:32