Hướng dẫn attribute selector trong css

*[class|="top"] {
   border: 2px solid green;
   padding:3px;
}

attr-selector-example5.html

   
      
      CSS [Attribute|="value"] Selector
      
   
   
     
CSS [Attribute|="value"] Selector
     
*[class|="top"]
     
CSS Tutorial
     
CSS Selector Tutorial
     
....
     
Note: For [attribute|=value]
       to work in IE8 and earlier, a DOCTYPE must be declared.
   

Nếu bạn muốn CSS [Attribute|="value"] Selector "không phân biệt chữ hoa chữ thường" [Case-insensitive], bạn có thể sử dụng cú pháp của CSS4:

/** Syntax: */
[Attribute|="value" i]

/** Example: */
img[class|="top" i] {
   border: 2px solid green;
   padding:3px;
}

CSS Tutorial
  
CSS Tutorial
  

CSS Selector Tutorial
  
CSS Selector Tutorial
  
....

6- CSS [Attribute^='value'] Selector

CSS [Attribute^="value"] Selector được sử dụng để tìm kiếm các phần tử mà giá trị của thuộc tính bắt đầu với một giá trị cho trước. Selector này là "phân biệt chữ hoa chữ thường" [Case-sensitive].

Ví dụ, tìm kiếm các phần tử mà giá trị của thuộc tính Class hoặc bắt đầu với "top".

attr-selector-example7.css

*[class^="top"] {
   border: 2px solid green;
   padding:3px;
}

attr-selector-example7.html

   
      
      CSS [Attribute^="value"] Selector
      
   
   
     
CSS [Attribute^="value"] Selector
     
*[class^="top"]
      
CSS Tutorial
      
CSS Selector Tutorial
      
....
     
Note: For [attribute^=value]
       to work in IE8 and earlier, a DOCTYPE must be declared.
   

Nếu bạn muốn CSS [Attribute^="value"] Selector "không phân biệt chữ hoa chữ thường" [Case-insensitive], bạn có thể sử dụng cú pháp của CSS4:

/** Syntax: */
[Attribute^="value" i]

/** Example: */
img[class^="top" i] {
   border: 2px solid green;
   padding:3px;
}

CSS Tutorial
  
CSS Tutorial
  

CSS Selector Tutorial
  
CSS Selector Tutorial
  

....
 
....

  

  

7- CSS [Attribute$='value'] Selector

CSS [Attribute$="value"] Selector được sử dụng để tìm kiếm các phần tử mà giá trị của thuộc tính kết thúc bởi một giá trị cho trước. Selector này là "phân biệt chữ hoa chữ thường" [Case-sensitive].

Ví dụ, tìm kiếm các phần tử Java Tutorial

/** Syntax: */
[Attribute$="value" i]

/** Example: */
img[href$="html" i] {
    color:red;
    font-weight: bold;
}

      
Java Tutorial
 
      
Java Tutorial
 
      
Java Chapter 1
      
CSS Tutorial
       
Other Tutorial

/** Syntax: */
[Attribute*="value" i]

/** Example: */
img[href*="html" i] {
    color:red;
    font-weight: bold;
}

      
Java Tutorial
 
      
Java Tutorial
 
      
Java Chapter 1
      
CSS Tutorial
       
Other Tutorial