클래스 이름에 점 (.)으로 요소 스타일 지정

클래스 이름에 점 (.)으로 요소 스타일 지정

---

Hay 이와 같은 요소가 있습니다.

<span class='a.b'>

불행히도이 클래스 이름은 전자 상거래 응용 프로그램에서 가져 왔으며 변경할 수 없습니다.

점이있는 클래스 이름의 스타일을 지정할 수 있습니까?

처럼

.a.b { }

---

.a\.b { }

그러나이를 지원하지 않는 브라우저가있을 수 있습니다.

---

이 파티에 매우 늦었지만 속성 선택기를 사용할 수 있습니다.

귀하의 경우 class='a.b'요소 를 타겟팅하려면 다음을 사용할 수 있습니다.

[class~="a.b"] {...}
// or
span[class~="a.b"] {...}

---

또한 다음은 속성 선택기의 전체 목록입니다.

속성 존재 선택기

// Selects an element if the given attribute is present

// HTML
<a target="_blank">...</a>

// CSS
a[target] {...}

속성 같음 선택기

// Selects an element if the given attribute value
// exactly matches the value stated

// HTML
<a href="http://google.com/">...</a>

// CSS
a[href="http://google.com/"] {...}

속성에 선택기가 포함됨

// Selects an element if the given attribute value
// contains at least once instance of the value stated

// HTML
<a href="/login.php">...</a>

// CSS
a[href*="login"] {...}

선택 자로 시작되는 속성

// Selects an element if the given attribute value
// begins with the value stated

// HTML
<a href="https://chase.com/">...</a>

// CSS
a[href^="https://"] {...}

속성이 선택기로 끝남

// Selects an element if the given attribute value
// ends with the value stated

// HTML
<a href="/docs/menu.pdf">...</a>

// CSS
a[href$=".pdf"] {...}

속성 간격 선택기

// Selects an element if the given attribute value
// is whitespace-separated with one word being exactly as stated

// HTML
<a href="#" rel="tag nofollow">...</a>

// CSS
a[rel~="tag"] {...}

속성 하이픈이있는 선택기

// Selects an element if the given attribute value is
// hyphen-separated and begins with the word stated

// HTML
<a href="#" lang="en-US">...</a>

// CSS
a[lang|="en"] {...}

출처 : learn.shayhowe.com

---

Yes you can. The meaning of CSS class name like '.a.b' is targeting elements that have CSS name with 'a' which also has class name 'b',that's to say you have both of these class in the same element. Just as div.cssname targeting div elements with cssname.

참고URL : https://stackoverflow.com/questions/3447329/styling-elements-with-a-dot-in-the-class-name