Zastosuj styl CSS do elementów potomnych

232

Chcę zastosować style tylko do tabeli wewnątrz DIV z określoną klasą:

Uwaga: wolę użyć selektora css dla elementów potomnych.

Dlaczego nr 1 działa, a nr 2 nie?

1:

div.test th, div.test td, div.test caption {padding:40px 100px 40px 50px;}

2:

div.test th, td, caption {padding:40px 100px 40px 50px;}

HTML:

<html>
    <head>
        <style>
            div.test > th, td, caption {padding:40px 100px 40px 50px;}
        </style>
    </head>
    <body>
        <div>
            <table border="2">
                <tr><td>some</td></tr>
                <tr><td>data</td></tr>
                <tr><td>here</td></tr>
            </table>
        </div>
        <div class="test">
            <table  border="2">
                <tr><td>some</td></tr>
                <tr><td>data</td></tr>
                <tr><td>here</td></tr>
            </table>
        </div>
    </body>
</html>

Co ja robię źle?

css css-selectors

— Roman m
źródło

Nie zapominaj, że selektory>, + i [] są niedostępne dla IE6 i starszych.

— Erick

309

Ten kod „ div.test th, td, caption {padding:40px 100px 40px 50px;}” stosuje regułę do wszystkich thelementów zawartych w divelemencie o nazwie klasy test, oprócz wszystkich td elementów i wszystkich caption elementów.

To nie to samo, co „wszyscy td, tha captionelementy, które są zawarte w divelemencie z klasą test”. Aby to osiągnąć, musisz zmienić selektory:

' >' nie jest w pełni obsługiwany przez niektóre starsze przeglądarki (patrzę na ciebie, Internet Explorer).

div.test th,
div.test td,
div.test caption {
    padding: 40px 100px 40px 50px;
}

— Ken Browning
źródło

czy jest jakiś sposób na napisanie 3 razy testu div.test?

— roman m

2

@rm Nope. Nie ma zagnieżdżania reguł ani grupowania typu „z”

— sblundy

2

@romanm Istnieje 3 sposoby na napisanie „div.test”! zajrzyj do korzystania z frameworków sass lub mniej do pisania plików css! :)

— gillyb

@romanm - zobacz moją odpowiedź, używając *, aby kierować na wszystkie dzieci, aby zapobiec powtarzaniu się, lub użyj .class> * dla wszystkich bezpośrednich dzieci. To nie jest trudne.

— Richard Edwards,

Wskazówka dotycząca nieobsługiwania w IE była bardzo pomocna, próbowałem uruchomić CSS dla DTCoreText na iOS, ale to nie działało, ich parser jest gorszy niż IE.

— Syreny

123

.test * {padding: 40px 100px 40px 50px;}

— Richard Edwards
źródło

11

Zauważ, że * oznacza, że nie możesz zastąpić go żadną inną bardziej szczegółową regułą, ponieważ .test *byłaby to najbardziej szczegółowa reguła dla każdego elementu potomnego. Innymi słowy, pamiętaj, że cokolwiek umieścisz w środku, .test *nie może zostać zastąpione żadną bardziej szczegółową regułą css, ponieważ test *jest to najbardziej szczegółowa reguła.

— vadasambar

81

> Selektor pasuje tylko bezpośrednie dzieci, nie potomnych.

Chcesz

div.test th, td, caption {}

lub bardziej prawdopodobne

div.test th, div.test td, div.test caption {}

Edytować:

Pierwszy mówi

  div.test th, /* any <th> underneath a <div class="test"> */
  td,          /* or any <td> anywhere at all */
  caption      /* or any <caption> */

Podczas gdy drugi mówi

  div.test th,     /* any <th> underneath a <div class="test"> */
  div.test td,     /* or any <td> underneath a <div class="test"> */
  div.test caption /* or any <caption> underneath a <div class="test">  */

W oryginale div.test > thnapisano any <th> which is a **direct** child of <div class="test">, co oznacza, że będzie pasować, <div class="test"><th>this</th></div>ale nie będzie pasować<div class="test"><table><th>this</th></table></div>

— Greg
źródło

fwiw, ponieważ td i podpis w tym selektorze są „głupie” - będą pasować do dowolnego th / podpisu bez względu na div.test. Tego rodzaju celowanie na ślepo rzadko jest tym, czego chcesz w CSS, ale tylko dla najbardziej ogólnych stylów.

— annakata

@annakata: to część frameworka css, próbuję zastosować go lokalnie

— roman m

10

Jeśli chcesz dodać styl we wszystkich elementach podrzędnych i bez specyfikacji znacznika HTML, użyj go.

Tag nadrzędny div.parent

tag dziecko wewnątrz div.parent jak <a>, <input>, <label>itd.

kod : div.parent * {color: #045123!important;}

Możesz także usunąć ważne, to nie jest wymagane

— użytkownik1369111
źródło

7

Oto kod, który niedawno napisałem. Myślę, że zapewnia podstawowe wyjaśnienie łączenia nazw klas / identyfikatorów z pseudoklasami.

.content {
  width: 800px;
  border: 1px solid black;
  border-radius: 10px;
  box-shadow: 0 0 5px 2px grey;
  margin: 30px auto 20px auto;
  /*height:200px;*/

}
p.red {
  color: red;
}
p.blue {
  color: blue;
}
p#orange {
  color: orange;
}
p#green {
  color: green;
}

<!DOCTYPE html>
<html>

<head>
  <title>Class practice</title>
  <link href="wrench_favicon.ico" rel="icon" type="image/x-icon" />
</head>

<body>
  <div class="content">
    <p id="orange">orange</p>
    <p id="green">green</p>
    <p class="red">red</p>
    <p class="blue">blue</p>
  </div>
</body>

</html>

Rozwiń fragment kodu

— znak
źródło

CSS nie zezwala na komentarze w jednym wierszu, takie jak //. Zobacz stackoverflow.com/questions/4656546/…

— Volker E.,

4

div.test td, div.test caption, div.test th

pracuje dla mnie.

Selektor potomny> nie działa w IE6.

— Traingamer
źródło

2

O ile wiem to:

div[class=yourclass] table {  your style here; }

lub w twoim przypadku nawet to:

div.yourclass table { your style here; }

(ale to zadziała dla elementów, yourclassktóre mogą nie być divs) wpłynie tylko na tabele wewnątrz yourclass. I, jak mówi Ken,> nie jest obsługiwane wszędzie (i div[class=yourclass]też, więc używaj notacji punktowej dla klas).

— tunnuz
źródło

0

Ten kod może również załatwić sprawę, używając składni SCSS

.parent {
  & > * {
    margin-right: 15px;
    &:last-child {
      margin-right: 0;
    }
  }
}

— greguintow
źródło