Nice programing

선택기 [class ^ =“span”]은 무엇을합니까?

nicepro 2020. 11. 30. 19:55
반응형

선택기 [class ^ =“span”]은 무엇을합니까?


이것이 무엇인지 알아낼 수 없습니다.

http://twitter.github.com/bootstrap/assets/css/bootstrap-1.2.0.min.css의 33 행

.row [class^="span"] {
  display: inline;
  float: left;
  margin-left: 20px;
}

나는 스타일을 이해하지만 전에는 본 적이 없다

[class^="span"]

이는 다음과 같이 "span"이라는 단어로 시작하는 클래스를 의미합니다.

<div class="spanning"></div>

^이 기호는 문자열의 시작을 의미 상기 심볼은 정규 표현식에서 촬영된다.

이것은 클래스 이름의 시작이 아닌 클래스 속성의 시작을 확인한다는 점에 유의해야합니다. 즉, 해당 선택자와 일치하지 않습니다.

<div class="globe spanning"></div>

위의 요소에는 두 개의 클래스가 있으며 두 번째 클래스는 "span"으로 class시작 하지만 속성 은 "span"이 아닌 "globe"로 시작하므로 일치하지 않습니다.

[class*=span]스팬을 포함하는 모든 클래스를 반환하는을 사용할 수 있지만 wingspan.

AFAIK, 문자열로 시작하는 클래스를 가져 오는 방법은 이중 선택기를 사용하는 것입니다.

.row [class^="span"], .row [class*=" span"]{}

속성의 시작 부분이든 중간이든 span으로 시작하는 클래스를 반환합니다.

(또한 DOMParser에서 사용하는 자체 개발 선택기 엔진의 솔루션에서 작업 한 것을 기억 합니다.)


속성 선택자, 특히 CSS3 하위 문자열 일치 속성 선택자 중 하나입니다 .

이 규칙 은 클래스가있는 모든 요소에서 발생 하는 class속성이로 시작하는 span( ^="다음으로 시작"을 의미) 모든 요소에 스타일을 적용합니다 row.


그것은 CSS 속성 선택기입니다.

http://www.w3.org/TR/css3-selectors/ (섹션 2)를 살펴보십시오.

E [foo ^ = "bar"] "foo"속성 값이 문자열 "bar"로 정확히 시작하는 E 요소

참고 URL : https://stackoverflow.com/questions/7366323/what-does-the-selector-class-span-do

반응형