html - 在 <ol> 中显示边框线而不复制 css

Question

目前，我正在尝试使用它来创建 GridView 。我能够让我想要的输出只在外框的内部显示边框。但这是使用重复的样式规则实现的。所以我希望有人可以建议我更好的方法来达到相同的结果。这是结果的图像 Grid selector

    .ui-draggable, .ui-droppable {
        background-position: top;
    }
    .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active
    {
        border-bottom: 1px solid red;
        border-left: 1px solid red;
        background: #fff;
        font-weight: normal;

    }

    .ui-state-default-left, html .ui-button.ui-state-disabled:active
    {
        border-left: none;
        border-bottom: 1px solid red;
        background: #fff;
        font-weight: normal;
    }

    .ui-state-default-bottom, html .ui-button.ui-state-disabled:active
    {
        border-left: 1px solid red;
        border-bottom: none;
        background: #fff;
        font-weight: normal;
    }

    .ui-state-default-left-bottom, html .ui-button.ui-state-disabled:active
    {
        border-left: none;
        border-bottom: none;
        background: #fff;
        font-weight: normal;
    }

    #selectable .ui-selecting { background: #FECA40; }
    #selectable .ui-selected { background: #F39814; color: white; }
    #selectable { list-style-type: none; margin: 0; padding: 0; width: 20rem; }
    #selectable li { padding: 0.3rem; float: left; width: 2rem; height: 2rem; font-size: 1.5rem; text-align: center; }

    </style>

    <ol id="selectable">
              <li class="ui-state-default-left">01</li>
              <li class="ui-state-default">02</li>
              <li class="ui-state-default">03</li>
              <li class="ui-state-default">04</li>
              <li class="ui-state-default">05</li>
              <li class="ui-state-default">06</li>
              <li class="ui-state-default">07</li>
              <li class="ui-state-default-left">08</li>
              <li class="ui-state-default">09</li>
              <li class="ui-state-default">10</li>
              <li class="ui-state-default">11</li>
              <li class="ui-state-default">12</li>
              <li class="ui-state-default">13</li>
              <li class="ui-state-default">14</li>
              <li class="ui-state-default-left">15</li>
              <li class="ui-state-default">16</li>
              <li class="ui-state-default">17</li>
              <li class="ui-state-default">18</li>
              <li class="ui-state-default">19</li>
              <li class="ui-state-default">20</li>
              <li class="ui-state-default">21</li>
              <li class="ui-state-default-left">22</li>
              <li class="ui-state-default">23</li>
              <li class="ui-state-default">24</li>
              <li class="ui-state-default">25</li>
              <li class="ui-state-default">26</li>
              <li class="ui-state-default">27</li>
              <li class="ui-state-default">28</li>
              <li class="ui-state-default-left">29</li>
              <li class="ui-state-default">30</li>
              <li class="ui-state-default">31</li>
              <li class="ui-state-default">32</li>
              <li class="ui-state-default">33</li>
              <li class="ui-state-default">34</li>
              <li class="ui-state-default">35</li>
              <li class="ui-state-default-left">36</li>
              <li class="ui-state-default">37</li>
              <li class="ui-state-default">38</li>
              <li class="ui-state-default">39</li>
              <li class="ui-state-default">40</li>
              <li class="ui-state-default">41</li>
              <li class="ui-state-default">42</li>
              <li class="ui-state-default-left-bottom">43</li>
              <li class="ui-state-default-bottom">44</li>
              <li class="ui-state-default-bottom">45</li>
              <li class="ui-state-default-bottom">46</li>
              <li class="ui-state-default-bottom">47</li>
              <li class="ui-state-default-bottom">48</li>
              <li class="ui-state-default-bottom">49</li>
    </ol>

Answer 1

看到这里，没有使用任何类并减小了样式表的大小。

ol {
  width: 280px;
  height: 280px;
  float: left;
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  width: 40px;
  height: 40px;
  float: left;
  box-sizing: border-box;
  line-height: 40px;
  text-align: center;
  border-right: solid 1px red;
  border-bottom: solid 1px red;
}

li:nth-child(7n) {
  border-right: none;
}

li:nth-child(43),
li:nth-child(44),
li:nth-child(45),
li:nth-child(46),
li:nth-child(47),
li:nth-child(48),
li:nth-child(49) {
  border-bottom: none;
}

<ol>
  <li>01</li>
  <li>02</li>
  <li>03</li>
  <li>04</li>
  <li>05</li>
  <li>06</li>
  <li>07</li>
  <li>08</li>
  <li>09</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
  <li>14</li>
  <li>15</li>
  <li>16</li>
  <li>17</li>
  <li>18</li>
  <li>19</li>
  <li>20</li>
  <li>21</li>
  <li>22</li>
  <li>23</li>
  <li>24</li>
  <li>25</li>
  <li>26</li>
  <li>27</li>
  <li>28</li>
  <li>29</li>
  <li>30</li>
  <li>31</li>
  <li>32</li>
  <li>33</li>
  <li>34</li>
  <li>35</li>
  <li>36</li>
  <li>37</li>
  <li>38</li>
  <li>39</li>
  <li>40</li>
  <li>41</li>
  <li>42</li>
  <li>43</li>
  <li>44</li>
  <li>45</li>
  <li>46</li>
  <li>47</li>
  <li>48</li>
  <li>49</li>
</ol>