Несколько блоков используют один класс, как сделать разные отступы?

@cardo · Регистрация: 15.12.2015

Author24 — интернет-сервис помощи студентам

Есть виджет (таблица)
имеет стили
выводится в 3 разных местах
соответственно применяются общие стили, как сделать чтобы обратиться к стилю чтобы не изменить другой?

добавить класс не получиться, т.к. вся таблица вызывается виджетом

можно как то сделать это через указатель или еще как ?

@kidASM · 28.06.2019, 12:00

Вы можете группировать стили

HTML5

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>Таблица размеров обуви</title>
        <style>
            .tbl {
                border-collapse: collapse
                border: 1px solid black;
            }
            .m1 {
                margin: 10px;
            }
            .m2 {
                margin: 50px;
            }
            .m3 {
                margin: 150px;
            }
        </style>
    </head>
    <body>
        <table class="tbl m1">
            <caption>Таблица размеров обуви</caption>
            <tr>
                <th>Россия</th>
                <th>Великобритания</th>
                <th>Европа</th>
                <th>Длина ступни, см</th>
            </tr>
            <tr><td>34,5</td><td>3,5</td><td>36</td><td>23</td></tr>
            <tr><td>35,5</td><td>4</td><td>36⅔</td><td>23–23,5</td></tr>
            <tr><td>36</td><td>4,5</td><td>37⅓</td><td>23,5</td></tr>
            <tr><td>36,5</td><td>5</td><td>38</td><td>24</td></tr>
            <tr><td>37</td><td>5,5</td><td>38⅔</td><td>24,5</td></tr>
            <tr><td>38</td><td>6</td><td>39⅓</td><td>25</td></tr>
            <tr><td>38,5</td><td>6,5</td><td>40</td><td>25,5</td></tr>
            <tr><td>39</td><td>7</td><td>40⅔</td><td>25,5–26</td></tr>
            <tr><td>40</td><td>7,5</td><td>41⅓</td><td>26</td></tr>
            <tr><td>40,5</td><td>8</td><td>42</td><td>26,5</td></tr>
            <tr><td>41</td><td>8,5</td><td>42⅔</td><td>27</td></tr>
            <tr><td>42</td><td>9</td><td>43⅓</td><td>27,5</td></tr>
            <tr><td>43</td><td>9,5</td><td>44</td><td>28</td></tr>
            <tr><td>43,5</td><td>10</td><td>44⅔</td><td>28–28,5</td></tr>
            <tr><td>44</td><td>10,5</td><td>45⅓</td><td>28,5–29</td></tr>
            <tr><td>44,5</td><td>11</td><td>46</td><td>29</td></tr>
            <tr><td>45</td><td>11,5</td><td>46⅔</td><td>29,5</td></tr>
            <tr><td>46</td><td>12</td><td>47⅓</td><td>30</td></tr>
            <tr><td>46,5</td><td>12,5</td><td>48</td><td>30,5</td></tr>
            <tr><td>47</td><td>13</td><td>48⅔</td><td>31</td></tr>
            <tr><td>48</td><td>13,5</td><td>49⅓</td><td>31,5</td></tr>
        </table>
 
        <table class="tbl m2">
            <caption>Таблица размеров обуви</caption>
            <tr>
                <th>Россия</th>
                <th>Великобритания</th>
                <th>Европа</th>
                <th>Длина ступни, см</th>
            </tr>
            <tr><td>34,5</td><td>3,5</td><td>36</td><td>23</td></tr>
            <tr><td>35,5</td><td>4</td><td>36⅔</td><td>23–23,5</td></tr>
            <tr><td>36</td><td>4,5</td><td>37⅓</td><td>23,5</td></tr>
            <tr><td>36,5</td><td>5</td><td>38</td><td>24</td></tr>
            <tr><td>37</td><td>5,5</td><td>38⅔</td><td>24,5</td></tr>
            <tr><td>38</td><td>6</td><td>39⅓</td><td>25</td></tr>
            <tr><td>38,5</td><td>6,5</td><td>40</td><td>25,5</td></tr>
            <tr><td>39</td><td>7</td><td>40⅔</td><td>25,5–26</td></tr>
            <tr><td>40</td><td>7,5</td><td>41⅓</td><td>26</td></tr>
            <tr><td>40,5</td><td>8</td><td>42</td><td>26,5</td></tr>
            <tr><td>41</td><td>8,5</td><td>42⅔</td><td>27</td></tr>
            <tr><td>42</td><td>9</td><td>43⅓</td><td>27,5</td></tr>
            <tr><td>43</td><td>9,5</td><td>44</td><td>28</td></tr>
            <tr><td>43,5</td><td>10</td><td>44⅔</td><td>28–28,5</td></tr>
            <tr><td>44</td><td>10,5</td><td>45⅓</td><td>28,5–29</td></tr>
            <tr><td>44,5</td><td>11</td><td>46</td><td>29</td></tr>
            <tr><td>45</td><td>11,5</td><td>46⅔</td><td>29,5</td></tr>
            <tr><td>46</td><td>12</td><td>47⅓</td><td>30</td></tr>
            <tr><td>46,5</td><td>12,5</td><td>48</td><td>30,5</td></tr>
            <tr><td>47</td><td>13</td><td>48⅔</td><td>31</td></tr>
            <tr><td>48</td><td>13,5</td><td>49⅓</td><td>31,5</td></tr>
        </table>
 
        <table class="tbl m3">
            <caption>Таблица размеров обуви</caption>
            <tr>
                <th>Россия</th>
                <th>Великобритания</th>
                <th>Европа</th>
                <th>Длина ступни, см</th>
            </tr>
            <tr><td>34,5</td><td>3,5</td><td>36</td><td>23</td></tr>
            <tr><td>35,5</td><td>4</td><td>36⅔</td><td>23–23,5</td></tr>
            <tr><td>36</td><td>4,5</td><td>37⅓</td><td>23,5</td></tr>
            <tr><td>36,5</td><td>5</td><td>38</td><td>24</td></tr>
            <tr><td>37</td><td>5,5</td><td>38⅔</td><td>24,5</td></tr>
            <tr><td>38</td><td>6</td><td>39⅓</td><td>25</td></tr>
            <tr><td>38,5</td><td>6,5</td><td>40</td><td>25,5</td></tr>
            <tr><td>39</td><td>7</td><td>40⅔</td><td>25,5–26</td></tr>
            <tr><td>40</td><td>7,5</td><td>41⅓</td><td>26</td></tr>
            <tr><td>40,5</td><td>8</td><td>42</td><td>26,5</td></tr>
            <tr><td>41</td><td>8,5</td><td>42⅔</td><td>27</td></tr>
            <tr><td>42</td><td>9</td><td>43⅓</td><td>27,5</td></tr>
            <tr><td>43</td><td>9,5</td><td>44</td><td>28</td></tr>
            <tr><td>43,5</td><td>10</td><td>44⅔</td><td>28–28,5</td></tr>
            <tr><td>44</td><td>10,5</td><td>45⅓</td><td>28,5–29</td></tr>
            <tr><td>44,5</td><td>11</td><td>46</td><td>29</td></tr>
            <tr><td>45</td><td>11,5</td><td>46⅔</td><td>29,5</td></tr>
            <tr><td>46</td><td>12</td><td>47⅓</td><td>30</td></tr>
            <tr><td>46,5</td><td>12,5</td><td>48</td><td>30,5</td></tr>
            <tr><td>47</td><td>13</td><td>48⅔</td><td>31</td></tr>
            <tr><td>48</td><td>13,5</td><td>49⅓</td><td>31,5</td></tr>
        </table>
    </body>
</html>

@Academik · 28.06.2019, 19:20

Сообщение от cardo

можно как то сделать это через указатель или еще как ?

Обращайтесь к стилям виджета через родительский элемент. Ведь если виджет выводится в разных местах, то и родители разные.
К примеру:

CSS

.content .widget{
  background-color: #000;
}
.sidebar .widget{
  font-weight: bold;
}

HTML5

<div class="content">
    <div class="widget"></div>
</div>
 
<div class="sidebar">
    <div class="widget"></div>
</div>

@cardo 23 / 21 / 5 Регистрация: 15.12.2015 Сообщений: 261
		1
	Несколько блоков используют один класс, как сделать разные отступы? 28.06.2019, 11:21. Показов 844. Ответов 2 Метки нет (Все метки) Есть виджет (таблица) имеет стили выводится в 3 разных местах соответственно применяются общие стили, как сделать чтобы обратиться к стилю чтобы не изменить другой? добавить класс не получиться, т.к. вся таблица вызывается виджетом можно как то сделать это через указатель или еще как ? 0

	28.06.2019, 19:20