Как быстро узнать правильный css-селектор или группу селекторов для любого html-элемента?

Question

Как быстро узнать правильный селектор / группу селекторов для любого HTML-элемента? Я работаю над очень длинным раздутым HTML-кодом. и я хочу применить css к некоторым специфическим областям, но требуется много времени, чтобы найти правильный селектор css для любого глубоко вложенного HTML-тега в таблицах.

например

#id1 #id2 .class1 .class2 table.no1 tbody td

Есть ли какой-нибудь быстрый способ или инструмент, позволяющий быстро найти идеальный селектор CSS для любого необходимого элемента?

Мне также нужно переопределить некоторые CSS для некоторых элементов?

Edit:

После получения ответа от @ BalucC

Кроме того, я также нашел этот инструмент для пользователей IE, он работает так же, как панель инструментов веб-разработчика "

МРТ: проверьте ваши селекторы

MRI - это букмарклет для Internet Explorer 6+ и браузеров на базе Webkit и Mozilla (включая Safari, Firefox, Camino или Mozilla). Используйте его для тестирования и игры с селекторами. http://www.westciv.com/mri/

Смотрите скриншот здесь

Answer 1

Панель инструментов веб-разработчика мне очень помогает в этом. Просто нажмите Ctrl + Shift + F , щелкните интересующий элемент и проверьте цепочку элементов в нижней части панели инструментов или Предки листинг.

Вот экран (нажмите для полного):

Answer 2

• Firebug для Firefox
• Веб-инспектор для Webkit, Safari и Chrome
• Панель инструментов разработчика IE для Internet Explorer
• XyleScope и CSSEdit для Mac

Answer 3

Ни один автоматизированный инструмент не может знать ваши намерения. Например, какой из них является правильным?

td { background: yellow; }
tbody td { background: yellow; }
table table td { background: yellow; }
tr.odd td { background: yellow; }

Невозможно сказать, не зная вашего намерения. Вы можете намеренно включать и / или включать элементы не только на этой странице, но и на других страницах, которые также используют ту же таблицу стилей. Соответствующие элементы могут существовать или не существовать на этой странице в зависимости от динамических условий и критериев, определяющих, созданы ли они.

Короткий ответ? Нет.

Answer 4

IMO, Firebug - лучший инструмент, подходящий для вашего случая. Просто «осмотрите» страницу и щелкните элемент либо в макете страницы, либо в самом коде.

Answer 5

Я использую это, чтобы показать мне иерархию тегов.

http://westciv.com/xray/

Также вы можете попробовать Firebug:

https://addons.mozilla.org/en-US/firefox/addon/1843

РЕДАКТИРОВАТЬ В связи с предоставлением дополнительной информации:

Чтобы переопределить правило CSS, используйте "! Important". Например,

<style type="text/css">
#id-to-overwrite {
width:25px !important;
}

</style>