어떤 스타일이 특정 요소뿐만 아니라 그 자손 요소에까지 적용되는 방식
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>form</title>
<style>
h1 {
color: gray;
}
</style>
</head>
<body>
<h1>Hello, <em>CSS</em></h1>
</body>
</html>
em요소가 부모 color: gray 값을 상속받아서 회색으로 표현된다.
margin, padding, background, border 등의 박스 모델 속성들은 상속되지 않는다.
상속된 선언의 구체성
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>form</title>
<style>
* {
color: brown;
}
/* 0, 0, 0, 1 */
h1#page {
color: gray;
}
/* 0, 1, 0, 1 */
</style>
</head>
<body>
<h1 id="page">Hello, <em>CSS</em></h1>
</body>
</html>
자식 요소인 em 요소가 color:brown으로 표현되었다.
상속된 값에는 아무런 구체성을 갖지 못하기 때문이다.
심지어 0, 0, 0, 0도 아니다.
전체 선택자에게도 밀린다.
하지만 전체 선택자가 없었다면 어떠한 선택자와도 겹치지 않아서 아무런 구체성이 없어도 color:gray로 표현되었을 것이다.
