Получить HTML DOM с помощью CSS - PullRequest
Новая
       33

Получить HTML DOM с помощью CSS

0 голосов
/ 12 мая 2010

CSS может применять стили в элементах через один идентификатор, класс или псевдо-селектор, но я хотел бы получить дерево HTML, что-то вроде в javascript: 

<script type = "text/javascript">
    window.onload = function () {
        var div = document.getElementsByTagName ("div");

        div[0].style.backgroundColor = "gray";
        div[0].style.padding = "20px";
    }
</script>

Так, например: 

<style type = "text/css">
    div[0] { /* Wrong but i tried :( */
        background-color: gray;
        padding: 20px;
    }
</style>

<div >
    <div>...</div>
</div>

Мне надоело присваивать идентификаторы миллионам и миллионам элементов; Есть ли способ сделать это?

Ответы [ 4 ]

1 голос
/ 12 мая 2010

Ну, технически вы можете использовать: 

body > div:first-child {
    background-color: gray;
    padding: 20px;
}

Что соответствует первому div в <body> документа, но я не думаю, что это то, что вам действительно нужно, потому что это было бы не так уж и полезно.

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

1 голос
/ 12 мая 2010

Если вы знали тип элемента, который у вас был (как в вашем примере) и если CSS3 был опцией, вы могли бы использовать: 

div div:first-of-type {
   ....
}

Это не будет работать в IE, хотя. См. статью Википедии для деталей. Если вы не знаете тип подэлемента, он тоже не будет работать. *: первый тип недействителен.

0 голосов
/ 20 января 2012

п-й ребенок

Псевдоклассы: nth-child () и: nth-of-type () позволяют вам выберите элементы с формулой.

Синтаксис :nth-child(an+b), где вы заменяете a и b числами на ваш выбор. Например, :nth-child(3n+1) выбирает 1, 4, 7 и т. Д. Ребенок.

0 голосов
/ 12 мая 2010

Если я правильно понимаю, просто используйте div:first-child.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...