내 코드의 링크 중 하나만 스타일을 지정하고 싶습니다. 각 iduvidual 셀에 어떻게 액세스 할 수 있습니까? 여러 수업이 있기 때문에 온라인에서 similair 문제를 발견하지 못했습니다. n 번째 아이를 여러 번 사용하여 아이의 아이를 대상으로 시도했지만 작동하지 않았습니다.
편집 : Javascript 또는 다른 언어 사용을 피하고 싶습니다. HTML / CSS 만 사용하여이를 수행 할 수있는 방법이 있습니까?
<div class="grid">
<div class="row">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<div class="row">
<div class="cell"></div>
<div class="cell"><a href="website2.com">Sample Text</a></div>
<div class="cell"></div>
</div>
<div class="row">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"><a href="website.com">Sample Text</a></div>
</div>
</div>
CSS :
.grid {
display: table;
float: left;
margin-left: 25px;
padding-top: 10px;
border-spacing: 20px
}
.row {
display: table-row
}
.cell {
width: 250px;
height: 250px;
border: 2px solid black;
display: table-cell;
border-radius: 15px;
background: #35424a;
}
.grid :nth-child(3) .row :nth-child(3) .cell :nth-child(1){
color: #fff;
text-decoration: none;
}
nth-of-type선택기를 사용하십시오 . nth-child기반 규칙을 만들 수도 있지만 nth-of-type 선택기를 사용하여 설명하겠습니다 .
같은 것
.grid .row : nth-of-type (2) .cell a {color : red; }
첫 번째 링크에 대해
.grid .row : nth-of-type (3) .cell a {color : green; }
두 번째 링크
.grid .row:nth-of-type(2) .cell a {
color: red;
}
.grid .row:nth-of-type(3) .cell a {
color: green;
} <div class="grid">
<div class="row">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<div class="row">
<div class="cell"></div>
<div class="cell"><a href="website2.com">Sample Text</a></div>
<div class="cell"></div>
</div>
<div class="row">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"><a href="website.com">Sample Text</a></div>
</div>
</div>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다