Oberer CSS-Selektor, der keine Formatierung auf untergeordnete Elemente anwendet

Ich verwende derzeit http://meyerweb.com/eric/tools/css/reset/ als mein Top-Level-CSS. Angenommen, ich kann das nicht ändern.Oberer CSS-Selektor, der keine Formatierung auf untergeordnete Elemente anwendet

So ist meine Top CSS Level etwas wie folgt aus:

base.css

html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
b, u, i, center, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, 
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary, 
time, mark, audio, video { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font: inherit; 
    font-size: 100%; 
    vertical-align: baseline; 
} 

div .target { 
    ... 
}

index.html

<body> 
    <div class="target"> 
     <strong>Please make me bold</strong> 
     <i>Please make me italic</i> 
    </div> 
    </body>

Aus irgendeinem Grund font: inherit; nicht Formatierung erlaubt Elemente, die auf meinen Inhalt angewendet werden sollen, zB <strong>, <i>, etc. Ich hatte gehofft, dass ich diese Formatierung HTML-Tags innerhalb .target verwenden und sie richtig mit der aktuellen Struktur meines CSS rendern können. Gibt es eine Möglichkeit, div p so zu bearbeiten, dass dies funktioniert?

jsFiddle: https://jsfiddle.net/y4c3c9cb/6/

Hinweis: Top-Selektor (html, body, div,...) nicht bewegt, bearbeitet werden, und in der obersten Ebene Position bleiben muss.

EDIT Kinder in meinem .target Elemente werden können i, strong, b Elemente sein.

EDIT 2: Geänderte HTML

Quelle

2016-10-03 jimmyguestnow

Das Zurücksetzen bedeutet, dass Sie Regeln für alle diese Tags selbst festlegen. Da es strong { font: inherit; } enthält, haben Sie

strong { 
    font-weight: bold; 
}

Das Gleiche gilt für kursiv hinzuzufügen:

i { 
    font-style: italic; 
}

... und auch komplette Regeln für alle anderen Tags, die in der Reset-Regel, da sonst alles gleich aussehen.

aktualisiert Geige: https://jsfiddle.net/6nuogzg4/1/

Quelle

2016-10-03 00:21:00 Johannes

Siehe Bearbeiten. Ich werde möglicherweise "i", "starke", "b" Elemente im div Container haben. – jimmyguestnow

Also müssen Sie CSS-Regeln für alle diese Tags hinzufügen, sowie für h1, h2, h3 usw., ul, li usw. usw. (d. H. Alle Tags in der Reset-Regel).Es ist ein * complete * reset, der alles in einen neutralen Standardzustand versetzt ... – Johannes

@jimmyguestnow Was zurückgesetzt wird im Wesentlichen ** tut **. Der Grund für die Zurücksetzung ist nicht nur die Konsistenz zwischen den Browsern, sondern auch die Trennung von Markup und Präsentation. Es im Grunde * un-Stile * alles. Erlauben Sie Ihnen separat zu kontrollieren, wie die Dinge * aussehen *, während Sie einen guten Grad an Semantik in Ihrem HTML-Code respektieren. – AA2992

Versuchen font-weight:bold; verwenden. Aktualisierte Geige: https://jsfiddle.net/y4c3c9cb/3/

Quelle

2016-10-03 00:14:38

Bitte siehe bearbeiten. – jimmyguestnow

Scheint, dass Ihr CSS Elemente wie stark festlegt, um die Schriftart zu erben, so dass es die mit p assoziierte Schriftart erbt, die nicht fett ist.

Hinzufügen font-weight: fett für stark.

Quelle

2016-10-03 00:16:01

Siehe Bearbeiten. – jimmyguestnow

Verwenden Sie diesen Bandwurm nicht verwenden. Verwendung:

* { 
padding: 0; 
margin: 0; 
border: 0; 
vertical-align: baseline; 
}

statt.

Quelle

2016-10-03 01:08:57

Oberer CSS-Selektor, der keine Formatierung auf untergeordnete Elemente anwendet

Antwort

Verwandte Themen