트위터 부트 스트랩 에서이 선택기를 보았습니다.
.show-grid [class*="span"] {
background-color: #eee;
text-align: center;
border-radius: 3px;
min-height: 30px;
line-height: 30px;
}
이 기술이 무엇이며 그 기술이 무엇인지 아는 사람이 있습니까?
답변
속성 와일드 카드 선택기입니다. 당신이 제공 한 샘플에서, 그 아래 .show-grid
에 CONTAINS 클래스가있는 하위 요소를 찾습니다 span
.
따라서이 <strong>
예제 에서 요소를 선택하십시오 .
<div class="show-grid">
<strong class="span6">Blah blah</strong>
</div>
‘다음으로 시작 …’을 검색 할 수도 있습니다.
div[class^="something"] { }
다음과 같이 작동합니다.
<div class="something-else-class"></div>
그리고 ‘…로 끝납니다’
div[class$="something"] { }
작동하는
<div class="you-are-something"></div>
좋은 참조
답변
.show-grid [class*="span"]
show-grid 클래스를 가진 모든 요소를 선택하는 CSS 선택기이며 클래스 에 이름 span이 포함 된 자식 요소 가 있습니다 .
답변
다음과 같은:
.show-grid [class*="span"] {
‘span’이라는 단어가 포함 된 클래스가있는 ‘.show-grid’의 모든 하위 요소는 해당 CSS 속성을 가져옵니다.
<div class="show-grid">
<div class="span">.span</div>
<div class="span6">span6</div>
<div class="attention-span">attention</div>
<div class="spanish">spanish</div>
<div class="mariospan">mariospan</div>
<div class="espanol">espanol</div>
<div>
<div class="span">.span</div>
</div>
<p class="span">span</p>
<span class="span">I do GET HIT</span>
<span>I DO NOT GET HIT since I need a class of 'span'</span>
</div>
<div class="span">I DO NOT GET HIT since I'm outside of .show-grid</span>
<span>
자체를 제외한 모든 요소가 적중 됩니다.
부트 스트랩과 관련하여 :
span6
: 이것은 부트 스트랩 2의 스캐 폴딩 기술로 12 개의 부분을 기준으로 한 섹션을 수평 그리드로 나누었습니다. 따라서span6
너비는 50 %입니다.- 현재의 부트 스트랩 (v.3 및 v.4) 구현에서 이제
.col-*
클래스 (예 :)를 사용합니다.이 클래스col-sm-6
는 창이 특정 크기 아래로 축소 될 때 응답 성을 처리 할 미디어 중단 점도 지정합니다. 자세한 내용은 Bootstrap 4.1 및 Bootstrap 3.3.7 을 확인하십시오 . 요즘에는 나중에 부트 스트랩으로 갈 것을 권장합니다
답변
클래스 이름에 "span"
어딘가에 문자열이 포함 된 모든 요소를 선택합니다 . 이 또한의 ^=
문자열의 시작을 위해, 그리고 $=
문자열의 끝. 다음은 일부 CSS 선택기에 대한 좋은 참조입니다. http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/
나는 부트 스트랩 클래스 만 알고 있어요 spanX
X는 정수,하지만 다른 선택기이 있다면 종료 에 span
, 그것은 또한이 규칙에 해당한다.
담요 CSS 규칙을 적용하는 데 도움이됩니다.