Блог

У меня есть <ul> то,что я не контролирую (реагирую), и я хочу поставить рамку и обвести некоторые из них рамкой.

В принципе, у меня есть:

 <ul>
  <li>Results...</li>
  <li><</li>
  <li>1</li>
  <li>2</li>
  <li>></li>
  <li>Something else</li>
</ul>
 

Скриншот:

И я хочу, чтобы они были завернуты вот так:

Проблема, как я уже сказал, заключается в том, что у меня нет контроля над фактическим элементом и тем, как он отображается, поэтому я не могу повторить его с div помощью s, и я хочу обернуть все li элементы, кроме первого и последнего.

Текущий HTML-это то, как компонент отображает его :

 <ul class="ant-pagination">
  <li class="ant-pagination-total-text">Results...</li>
  <li class="ant-pagination-prev"><</li>
  <li class="ant-pagination-item">1</li>
  <li class="ant-pagination-item">2</li>
  <li class="ant-pagination-next">></li>
  <li class="ant-pagination-options">Dropdown with options about setting table page size</li>
</ul>
 

CSS, который я применил, чтобы изменить порядок отображения элементов так, как мне нужно:

 .ant-pagination {
  justify-content: center;
} 

.ant-pagination > li:last-child {
  order: 1;
  margin-left: 20px;
}

.ant-pagination > li:first-child {
  order: 2;
  margin: 0 auto;
}

.ant-pagination > li:not(:first-child):not(:last-child) {
  order: 3;
}
 

Этот CSS переупорядочил элементы так, как мне нужно, чтобы они были:

Конечно, у меня есть дополнительный CSS-стиль в дополнение к этому.

.ant-pagination > li:not(:first-child):not(:last-child) этот селектор нацелен на элементы, на которые мне нужно нацелиться и которые я хочу завернуть.

В сущности, мне нужно сделать:

 <ul>
  <li>Results...</li>
  <div class="li-wrapper">
    <li><</li>
    <li>1</li>
    <li>2</li>
    <li>></li>
  </div>
  <li>Something else</li>
</ul>

.li-wrapper {
  border: 1px solid black;
}
 

 ul li {
  padding: 4px;
  max-width: 16px;
}

ul li:not(:first-child, :last-child) { 
  border-left: 1px solid #000;
  border-right: 1px solid #000;
}

ul li:nth-last-child(2) {
  border-bottom: 1px solid #000;
}

ul li:nth-child(2) {
  border-top: 1px solid #000;
} 

 <ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
</ul> 

Может использоваться :не селектор CSS, например:

 ul li:not(:first-child, :last-child) { 
  color: red;
}
 

Извините, что плохо понял, но я не уверен, что вы имели в виду, говоря, что у вас нет контроля над элементами, но затем вы применили CSS к этим элементам. В любом случае, не будет ли простой стиль границ и отступов в вашей ant-pagination работе?

 .ant-pagination {
  background: 1px solid black;
  //or whatever padding the design says
  padding: 10px;
}