결합 선택기
태그 선택기, 클래스 선택기, ID 선택기를 조합하여 사용할 수 있습니다. 일반적인 조합 방식은 태그 선택기와 클래스 선택자의 조합, 태그 선택기와 ID 선택자의 조합이 있다. 이 두 조합 방법의 원리와 효과는 동일하므로 태그 선택자와 클래스 선택자의 조합만을 소개한다. 조합 선택자는 조합의 한 형태일 뿐 실제 선택자는 아니지만 실무에서 자주 사용된다.
예를 들어 .orderlist li {xxxx} 또는 .tableset td {}
사용할 때 일반적으로 반복적으로 나타나는 일부 태그에서 사용하며 li td dd 등과 같은 동일한 스타일.
예를 들어<h1 class="red"></h1> H1.red {color: red}
결합 선택 목록
A,B 다중 요소 선택 , A와 B 사이를 쉼표로 구분하여 동시에 모든 A 요소와 B 요소와 일치합니다. { color:red }
2. A B 하위 요소 선택기와 일치합니다. A 요소의 하위 요소인 B 요소에 속하며 A와 B 사이에 공백으로 구분됩니다. #nav li { display:inline: li a {font-weight:bold }
3. A > B 하위 요소 선택자, A 요소 div > Strong { color:#f00 }
4. , 모두 일치 A 요소 바로 뒤에 있는 형제 요소 B p + p { color:#f00; }
5. A ~ B 지정된 요소의 모든 인접 요소와 일치하는 일반적인 인접 요소 선택자입니다. div ~ p { color:#f00; }
다중 요소 선택기
/ /css 코드:
<style>
div.mydivred,p.mypred
{패딩:10px;배경색상:#ffffff;테두리:1px #000000 단색;색상:빨간색;}
</style>
//html 코드
<div class="mydivred"> div.mydivred</div>
<p class="mypred"> p.mypred</p>
사용해 보세요
하위 요소 선택기
<style>
#fuji .ziji
{
패딩 :10px;
배경색: #ffffff;
테두리:1px # 000000 단색;색상:빨간색;
}
</style> 🎜>
<div id = "fuji"> ="ziji"> div.ziji</div>
</div>
해 보세요
하위 요소 선택기
<style>
#zys>span
{
여백:10px;
배경색: #ffffff;
테두리: 1px #000000 단색;색상:빨간색;
}
</style>
<div id="zys">
<span class= "any"> div.ziji</span>
</div>
해 보세요
인접 요소 선택기
<style>
div+ p
{
background-color:yellow;
}
</style>
< div>
<h2>제 이름은 Donald</h2>
<p>저는 덕버그에 살아요. </p>
</div>
일반 인접 요소 선택자
div~p
{
배경색: 녹색
}
<div>
<p>1항. 사업부에서. </p>
<p>2항. 사업부에서. </p>
</div>
<p>3항. div에는 없습니다. </p>
<p>4항. div에는 없습니다. </p>
해 보세요
다음 섹션
