Выберите: только для первого класса по классу

Question

Я пытаюсь решить ошибку в CKEditor, где она не применяется правильно. Используя Bootstrap, маркер первого пролета эффективно игнорируется, поскольку он выходит за пределы строки. Однако в CKEditor по какой-то причине он сидит внутри строки, тем самым нажимая последний пролет на новую строку, поскольку внутри строки недостаточно места.

Простой способ решить это просто установить запас налево на первом пролете до 0, и поэтому я в конечном итоге добавив это мой content.css файл:

[class*="span"]:first-of-type { 
    margin-left: 0px; 
} 

И это прекрасно работает , пока все промежутки одинаковы, все div или все статьи. Но если у меня есть статья и в сторону, то css, похоже, забирает их как два разных типа первого типа и применяет правило :first-of-type к обоим из них. Например:

<div class="container"> 
    <div class="row"> 
     <article class="span6"> 
      ...some html text 
     </article> 
     <aside class="offset3 span3"> 
      ...some more html text 
     </aside> 
    </div> 
</div> 

И статья, и в стороне будет иметь их запас левого установлен в 0, когда я только хочу Левого поле набора артикля 0. Это просто пример, может быть любым комбинацию возможных разделов, статей и асид, о которых вы могли бы подумать, а также любое число, которое позволяет загрузочный лоток.

После короткого Google я нашел this question, что похоже на мою проблему. Ответ объяснил, что :first-of-type фактически работает с элементом, а не с классом, который объясняет поведение, которое я видел. К сожалению, работа, указанная в этом ответе, не может работать для меня, поскольку я пытаюсь удалить некоторые css из первого div и оставить остальные неповрежденными.

Есть ли какое-либо обходное решение, которое я мог бы использовать, чтобы позволить мне нацелить первый элемент на [class*="span"]? В противном случае, есть ли другое известное решение этой ошибки с CKEditor и Bootstrap?

Answer 1

почему бы не просто использовать nth child selector:

[class*="span"]:nth-child(1) {} 

Example

Answer 2

Как вы уже упоминали, first-of-type работает с элементом, а не с селектором. Потому что article и aside являются первыми их типами в вашем примере, они будут применены к стилю.

Сверху моей головы, я не думаю, что есть способ решить вашу дилемму именно так, как вы выбрали, но, если я правильно понимаю вашу проблему, я бы, как правило, решал ее, определяя стиль для всех [class*="span"] а затем вернуться/пересмотреть для тех, которые следуют:

[class*="span"] { margin-left: 0px;} 
[class*="span"] ~ [class*="span"] { margin-left: 10px; } /* Whatever the original is set to */ 

Answer 3

вы можете сбросить сброс своего [class*=span], а затем проверить, следуют ли какие-либо другие. (независимо от того, стоит ли он первым или где внутри структуры).

Если это так, там другие [class*=span] на том же уровне, вы можете установить их обратно на similar original value.

С [class*=span] уже перезаписаны, вам нужно перезаписать его снова с более сильным селектором

[class*="span"] { 
    color:green; 
    margin-left:0; 
    border:solid; 
} 
[class*="span"] ~ [class] 
{ 
    margin-left: 20px; 
    color:red; 
} 

http://codepen.io/gcyrillus/pen/nFixc

codepen принимает самозагрузки, если вы связываете это.