yếu tố Styling với một dấu chấm (.) Trong tên lớp

Question

Hay tôi có một yếu tố như thế này

<span class='a.b'> 

Đáng tiếc là tên lớp này xuất phát từ một ứng dụng thương mại điện tử và không thể thay đổi.

Tôi có thể tạo kiểu cho tên lớp bằng dấu chấm trong đó không?

như

.a.b { } 

Answer 1

.a\.b { } 

Tuy nhiên có thể có các trình duyệt trên không hỗ trợ này.

Answer 2

Có thể. Ý nghĩa của tên lớp CSS như '.a.b' là các phần tử nhắm mục tiêu có tên CSS với 'a' cũng có tên lớp 'b', đó là để nói rằng bạn có cả hai lớp này trong cùng một phần tử. Cũng giống như div.cssname nhắm mục tiêu các phần tử div có cssname.

Answer 3

Đến rất muộn bên này, nhưng bạn có thể sử dụng bộ chọn thuộc tính.

Trong trường hợp của bạn, để nhắm mục tiêu các yếu tố class='a.b', bạn có thể sử dụng:

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

---

Thêm vào đó, đây là danh sách đầy đủ của bộ chọn thuộc tính.

Attribute Selector hiện

// Selects an element if the given attribute is present 

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

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

Thuộc tính Equals Selector

// 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/"] {...} 

Thuộc tính Chưa Selector

// 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"] {...} 

Thuộc tính Begins With Selector

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

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

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

Thuộc tính Ends With Selector

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

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

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

Attribute Spaced Selector

// 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"] {...} 

Attribute hyphenated Sele ctor

// 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"] {...} 

Source: learn.shayhowe.com