[css] 이 CSS 선택기는 무엇입니까? [class * =“span”]

Program / 글쓴이

트위터 부트 스트랩 에서이 선택기를 보았습니다.

.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/

나는 부트 스트랩 클래스 만 알고 있어요 spanXX는 정수,하지만 다른 선택기이 있다면 종료 에 span, 그것은 또한이 규칙에 해당한다.

담요 CSS 규칙을 적용하는 데 도움이됩니다.

답변