2015-07-29 2 views
3

Можно ли добавить стиль для выбранного элемента, например:CSS гордеолум только для выбранного элемента

У меня есть bootstrap.css

и я

<!DOCTYPE> 
<html> 
<head><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"></head> 
<body> 
<div id='a' class ='container'></div> 
<div id='b' class ='container'></div> 
</body> 
</html> 

Можно ли добавить bootstrap.css стиль только для #a элемент с jQuery или что-то еще?

+1

удалить класс '' container' от # b' –

+4

При импорте таблицы стилей, стиль добавляется ко всему документу. Имеет смысл копировать стили, которые вам нужны для элемента, чем добавлять всю таблицу стилей для одного элемента. –

+0

Но вы можете переопределить свойство своими собственными свойствами –

ответ

1

На самом деле вы не можете этого сделать. После всего этого весь html-документ. Какой бы css вы не включили, он будет применяться ко всем элементам страницы.

Одно решение для #b, Вам необходимо переопределить стили, если любые, которые применяются bootstrap.css

+0

да, я могу переопределить это, но сценарий, приведенный выше, является просто примером, поэтому его легко переопределить в моем исходном скрипте, поэтому нужно переопределить так много элементов :( – Mamen

+0

Насколько мне известно, для этого нет коротких путей. Вам придется переопределить эти Элементы. – Prasad

2

Вы можете сделать это с помощью SASS наследования.

Пожалуйста, обратитесь ниже код:

'#a { 
    @import url(bootstrap.css); 
}' 

Это сделает вас самонастройки CSS с "#A" префикс родителя.

Благодаря

-1

у вас есть bootstrap.css, и если вы хотите назначить собственный стиль конкретного элемента ..

использование ... Jquery

$("#a").css("color","red");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE> 
 
<html> 
 
<head><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"></head> 
 
<body> 
 
<div id='a' class ='container'>color</div> 
 
<div id='b' class ='container'></div> 
 
</body> 
 
</html>


если вы хотите переписать

$("#a").attr('style', 'text-align: center;color:red;');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE> 
 
<html> 
 
<head><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"></head> 
 
<body> 
 
<div id='a' class ='container'>red</div> 
 
<div id='b' class ='container'></div> 
 
</body> 
 
</html>

+0

И это помогает ему в таком случае? –

Смежные вопросы