You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
50 lines
1.0 KiB
50 lines
1.0 KiB
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8"/>
|
|
<meta name="viewport" content="width=device-width"/>
|
|
<title>CSS Combination</title>
|
|
<style>
|
|
/* 모든 요소 */
|
|
div,
|
|
h1 {
|
|
color: orangered;
|
|
}
|
|
|
|
/* div 아래 모든 자식요소 h2 */
|
|
div h2 {
|
|
color: mediumblue;
|
|
}
|
|
|
|
/* div 아래 직접적인 자식요소 h1 */
|
|
div>h1 {
|
|
color: lightslategray;
|
|
}
|
|
|
|
/* div와 가장 인접한 형제요소 h1 */
|
|
div+h1 {
|
|
font-style: italic;
|
|
}
|
|
|
|
/* div의 모든 형제요소 h2 */
|
|
div~h2 {
|
|
margin-left: 50px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Welcome to MyTube</h1>
|
|
<div>
|
|
<h1>New</h1>
|
|
<h2>New Movie 1</h2>
|
|
<h2>New Movie 2</h2>
|
|
<span>
|
|
<h1>This Week</h1>
|
|
</span>
|
|
</div>
|
|
<h1>Best</h1>
|
|
<h2>New Movie 3</h2>
|
|
<h2>New Movie 4</h2>
|
|
<h3>New Movie 5</h3>
|
|
</body>
|
|
</html> |