Какой лучший способ создать сброс стиля только для части DOM? - PullRequest
Новая
       26

Какой лучший способ создать сброс стиля только для части DOM?

1 голос
/ 02 декабря 2008

Я пытаюсь создать сброс CSS, предназначенный только для моего контроля. Так что HTML будет выглядеть примерно так: 

<body>
  <img class="outterImg" src="sadkitty.gif" />
  <div id="container" class="container">
    <img class="innerImg" src="sadkitty.gif" />
    <div class="subContainer">
      <img class="innerImg" src="sadkitty.gif" />
    </div>
  </div>
  <img class="outterImg" src="sadkitty.gif" />
</body>

С CSS у меня проблемы, но сейчас я работаю с этим: 

img 
{
  // Bad style declarations for the entire page
  border: solid 3px red;  
  width: 50px;
}

.container img, .container div, .container etc.
{
  // Style reset for specific elements within my control "container"
  border: solid 3px blue;
  width: 100px;
}

.innerImg img
{
  // The target style for the specific class/element within the control
  border: solid 3px green;
  width: 200px;
}

Проблема в том, что ".innerImg img" не переопределяет ".container img", как я и ожидал. Итак, что будет лучшим методом для сброса стиля всех элементов в элементе «контейнера», а затем размещения стилей на классах в этом элементе?

Ответы [ 2 ]

3 голосов
/ 02 декабря 2008

селектор .innerImg img ссылается на элемент img внутри элемента с классом innerImg. В вашем документе ничего подобного нет.

То, что вы, вероятно, хотите, есть img.innerImg.

Помимо этого, существует краткое вычисление специфичности селектора , которое определяет, какое правило следует соблюдать (Эта ссылка содержит мой новый любимый классификатор в любом документе: «в системе счисления с большой базой»)

0 голосов
/ 02 декабря 2008

Я подозреваю, что это приводит к тому, что вы хотели. 

img  
{  
  border: solid 3px red;  
  width: 50px;  
}  
.container .innerImg, .container div  
{  
  border: solid 3px blue;  
  width: 100px;  
}  
.container .subContainer  
{  
  border: none;  
}  
.subContainer .innerImg  
{  
  border: solid 3px green;  
  width: 200px;  
}
...