상위 CSS 선택기가 하위 요소에 서식을 적용하지 않음

Jimmyguestnow

현재 http://meyerweb.com/eric/tools/css/reset/ 을 최상위 CSS로 사용하고 있습니다. 이것을 변경할 수 없다고 가정합니다.

그래서 내 최상위 CSS 수준은 다음과 같습니다.

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>

어떤 이유로 font: inherit;요소를 포맷 할 수 없습니다하는 것은 내 콘텐츠 예에 적용되는 <strong>, <i>등 나는 내에서 이러한 포맷의 HTML 태그를 사용할 수 있다고 기대했다 .target그들을 내 CSS의 현재 구조를 올바르게 렌더링합니다. div p이것이 작동 하도록 편집 할 수있는 방법 이 있습니까?

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

참고 : 상단 선택기 ( html, body, div,...)는 이동, 편집 할 수 없으며 최상위 위치에 있어야합니다.

편집 내에서 어린이 .target요소가 될 수 있습니다 것 i, strong, b요소.

편집 2 : 변경된 HTML

요하네스

이 재설정은 이러한 모든 태그에 대한 규칙을 직접 설정했음을 의미합니다. 가 포함되어 있기 때문에 strong { font: inherit; }, 당신은 추가해야

strong {
  font-weight: bold;
}

기울임 꼴과 동일 :

i {
  font-style: italic;
}

... 또한 재설정 규칙에있는 다른 모든 태그에 대한 완전한 규칙도 있습니다. 그렇지 않으면 모든 것이 동일하게 보일 것입니다.

업데이트 된 바이올린 : https://jsfiddle.net/6nuogzg4/1/

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

CSS 선택기를 사용하여 정렬되지 않은 목록에서 하위 목록을 뺀 상위 요소 만 선택 하시겠습니까?

분류에서Dev

CSS n 번째 하위 필터가 모든 요소에 적용되지 않음

분류에서Dev

CSS에서 하위 요소를 선택할 때> 기호가 필요합니까?

분류에서Dev

CSS 선택기 [type = "var"]가 하위 알파 대 상위 알파를 선택하지 않음

분류에서Dev

CSS 선택기 [type = "var"]가 하위 알파 대 상위 알파를 선택하지 않음

분류에서Dev

css ~ 선택기는 모든 대상 요소에 스타일을 적용하지 않습니다 (다음 / 이전 레이블에 Z- 색인).

분류에서Dev

CSS 선택기 오류-Hover에 하위 메뉴가 표시되지 않음

분류에서Dev

CSS가 중첩 된 하위 div에 적용되지 않음

분류에서Dev

색상 선택기를 사용하여 상위 요소에 CSS 색상을 적용하는 방법은 무엇입니까?

분류에서Dev

CSS 자식 선택기 (>)가 특정 속성에서 작동하지 않음

분류에서Dev

CSS : 하위 요소의 높이를 가변하는 동안 하위 요소의 하단을 상위 요소의 상단 (Y 축 위)에 정렬

분류에서Dev

검색 상자가 css3에 위치하지 않음

분류에서Dev

슬라이드 아웃 메뉴의 하위 요소에서 CSS 배경 필터가 작동하지 않음

분류에서Dev

jQuery : 선택 상자가 기본값을 선택하지 않음

분류에서Dev

CSS를 사용하여 클래스는 같지만 상위가 약간 다른 다른 하위 요소에 영향을주지 않고 해당 클래스별로 하위 요소를 수정하는 방법

분류에서Dev

상위 요소를 선택하지 않고 하위 요소 선택

분류에서Dev

선택기가 겹치기 때문에 상위 레이아웃 모서리가 보이지 않음

분류에서Dev

CSS 드롭 다운 메뉴에 하위 요소가 표시되지 않음

분류에서Dev

CSS에서 클래스 선택기가 작동하지 않지만 일부 스타일을 추가하기 위해 ID가 작동합니다.

분류에서Dev

특정 요소 다음에 요소를 선택하기 위해 CSS 선택기를 사용하는 방법은 무엇입니까?

분류에서Dev

마크 업이 많은 요소에서 선택기가 작동하지 않음

분류에서Dev

Flexbox-CSS에서 위치를 사용하지 않고 요소 오른쪽 "flex-direction : column"가져 오기

분류에서Dev

상대 상위 (Chrome 32.0.1700.77) 내부에 절대 위치 입력 요소가있는 Chrome CSS 문제 오른쪽 : 0이 작동하지 않음

분류에서Dev

CSS 선택기가 모든 하위 요소를 선택하지 못하도록하는 방법

분류에서Dev

요소의 첫 번째 직계 자식을 선택하기위한 CSS 선택기는 무엇입니까?

분류에서Dev

하위 구성 요소가 상위 구성 요소에서 제대로 렌더링되지 않습니다.

분류에서Dev

CSS n 번째 자식 선택기가 작동하지 않음

분류에서Dev

서비스 변수가 하위 구성 요소에서 변경되는 동안 상위 구성 요소에서 업데이트되지 않음

분류에서Dev

동영상 요소가 모든 너비에서 중앙에 위치하지 않음

Related 관련 기사

  1. 1

    CSS 선택기를 사용하여 정렬되지 않은 목록에서 하위 목록을 뺀 상위 요소 만 선택 하시겠습니까?

  2. 2

    CSS n 번째 하위 필터가 모든 요소에 적용되지 않음

  3. 3

    CSS에서 하위 요소를 선택할 때> 기호가 필요합니까?

  4. 4

    CSS 선택기 [type = "var"]가 하위 알파 대 상위 알파를 선택하지 않음

  5. 5

    CSS 선택기 [type = "var"]가 하위 알파 대 상위 알파를 선택하지 않음

  6. 6

    css ~ 선택기는 모든 대상 요소에 스타일을 적용하지 않습니다 (다음 / 이전 레이블에 Z- 색인).

  7. 7

    CSS 선택기 오류-Hover에 하위 메뉴가 표시되지 않음

  8. 8

    CSS가 중첩 된 하위 div에 적용되지 않음

  9. 9

    색상 선택기를 사용하여 상위 요소에 CSS 색상을 적용하는 방법은 무엇입니까?

  10. 10

    CSS 자식 선택기 (>)가 특정 속성에서 작동하지 않음

  11. 11

    CSS : 하위 요소의 높이를 가변하는 동안 하위 요소의 하단을 상위 요소의 상단 (Y 축 위)에 정렬

  12. 12

    검색 상자가 css3에 위치하지 않음

  13. 13

    슬라이드 아웃 메뉴의 하위 요소에서 CSS 배경 필터가 작동하지 않음

  14. 14

    jQuery : 선택 상자가 기본값을 선택하지 않음

  15. 15

    CSS를 사용하여 클래스는 같지만 상위가 약간 다른 다른 하위 요소에 영향을주지 않고 해당 클래스별로 하위 요소를 수정하는 방법

  16. 16

    상위 요소를 선택하지 않고 하위 요소 선택

  17. 17

    선택기가 겹치기 때문에 상위 레이아웃 모서리가 보이지 않음

  18. 18

    CSS 드롭 다운 메뉴에 하위 요소가 표시되지 않음

  19. 19

    CSS에서 클래스 선택기가 작동하지 않지만 일부 스타일을 추가하기 위해 ID가 작동합니다.

  20. 20

    특정 요소 다음에 요소를 선택하기 위해 CSS 선택기를 사용하는 방법은 무엇입니까?

  21. 21

    마크 업이 많은 요소에서 선택기가 작동하지 않음

  22. 22

    Flexbox-CSS에서 위치를 사용하지 않고 요소 오른쪽 "flex-direction : column"가져 오기

  23. 23

    상대 상위 (Chrome 32.0.1700.77) 내부에 절대 위치 입력 요소가있는 Chrome CSS 문제 오른쪽 : 0이 작동하지 않음

  24. 24

    CSS 선택기가 모든 하위 요소를 선택하지 못하도록하는 방법

  25. 25

    요소의 첫 번째 직계 자식을 선택하기위한 CSS 선택기는 무엇입니까?

  26. 26

    하위 구성 요소가 상위 구성 요소에서 제대로 렌더링되지 않습니다.

  27. 27

    CSS n 번째 자식 선택기가 작동하지 않음

  28. 28

    서비스 변수가 하위 구성 요소에서 변경되는 동안 상위 구성 요소에서 업데이트되지 않음

  29. 29

    동영상 요소가 모든 너비에서 중앙에 위치하지 않음

뜨겁다태그

보관