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

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

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

.show-grid [class*="span"] {
    background-color: #eee;
    text-align: center;
    border-radius: 3px;
    min-height: 30px;
    line-height: 30px;
}

이 기술이 무엇이라고 불리고 무엇을 하는지 아는 사람이 있습니까?

속성 와일드카드 선택기입니다.당신이 준 샘플에서 아래의 하위 요소를 찾습니다..show-grid다음을 포함하는 클래스가 있습니다.span.

그래서 선택할 것입니다.<strong>이 예제의 요소:

<div class="show-grid">
    <strong class="span6">Blah blah</strong>
</div>

'begins with...'에 대한 검색도 수행할 수 있습니다..'

div[class^="something"] { }

다음과 같은 것에 효과가 있을 것입니다:-

<div class="something-else-class"></div>

그리고 마지막은...'

div[class$="something"] { }

효과가 있을 것입니다.

<div class="you-are-something"></div>

좋은 추천서

• CSS3 특성 선택기: 부분 문자열 일치
• 꼭 외워야 할 30개의 CSS 셀렉터
• W3C CSS3 선택기

.show-grid [class*="span"]

클래스에 이름 스팬이 포함된 자식 요소가 있는 클래스 show-grid를 가진 모든 요소를 선택하는 CSS 셀렉터입니다.

다음 항목:

.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이것은 Bootstrap 2의 비계 기술로 섹션을 12의 부분을 기준으로 수평 그리드로 분할했습니다.따라서span6폭이 50%일 것입니다.
• 현재 부트스트랩(v.3 및 v.4)을 구현할 때는.col-*클래스(예:col-sm-6또한 창이 특정 크기 이하로 축소될 때 응답을 처리할 미디어 중단점을 지정합니다.자세한 설명서는 Bootstrap 4.1 및 Bootstrap 3.3.7을 참조하십시오.저는 요즘 최신 부트스트랩과 함께 가는 것을 추천합니다.

클래스 이름에 문자열이 포함된 모든 요소를 선택합니다."span"어딘가에.또 있습니다.^=끈의 시작을 위해, 그리고.$=끈 끝에다음은 일부 CSS 선택기에 대한 좋은 참조입니다.

저는 부트스트랩 수업만 잘 알고 있습니다.spanX여기서 X는 정수이지만, 다음으로 끝나는 다른 선택기가 있는 경우span그것은 또한 이러한 규칙들에 속할 것입니다.

그것은 포괄적인 CSS 규칙을 적용하는 데 도움이 될 뿐입니다.

제 경우 번호가 포함된 클래스 이름의 동적 변경으로 인해 수업에 배경색을 적용할 수 없습니다.

예:

문제:

body .ForwardRef-root-198 .aura-ag-grid .ag-row:hover, body .ForwardRef-root-198 .ag-details-grid .ag-row:hover {
    background-color: #2196f35c !important;
}

솔루션:

body div[class*="ForwardRef-root-"] .aura-ag-grid .ag-row:hover, body div[class*="ForwardRef-root-"] .ag-details-grid .ag-row:hover {
    background-color: #2196f35c !important;
}

참조: 링크

언급URL : https://stackoverflow.com/questions/9836151/what-is-this-css-selector-class-span