728x90
반응형
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>형제 연습</title>
<style>
/* 현제 선택자: {선택자1} ~ {선택자2} : 선택자 1에 의해 선택된 요소 뒤에 붙어나오는 서택자2에 해당하는 요소를 선택한다. 떨어져 있어도 된다. 같은 부모 내에서! */
ul > span ~ li {
color: blue;
}
/* 인접형태 선택자: {선택자1} + {선택자2} 선택자1에 의해 선택된 요소 바로 뒤에 있는 선택자2를 선택한다. 떨어져 있으면 안되고, 해당하는 모든 형제를 선택을 한다. 같은 부모 내에서! */
ul > li + li {
color: greenyellow;
}
input[type='text']{
width: 10px;
}
</style>
</head>
<body>
<ul>
<span>시작</span>
<li>목록1</li>
<a href="https://www.naver.com">링크</a>
<input type="text" value="test">
<input type="button" value="bt">
<input type="radio" value="ra">
<li>목록2</li>
<span>변절자</span>
<li>목록3</li>
<li>목록4</li>
</ul>
<ul>
<li>목록5</li>
<li>목록6</li>
</ul>
</body>
</html>728x90
반응형