CSS属性选择器以

Question

 [class*="grid-"]{ border: 2px solid green; } [class^="grid-"]{ border: 2px solid red; } 

 <div class="row"> <div class="grid-sm-1-3">one</div> <div class="grid-sm-1-3">two</div> <div class="other class grid-sm-1-3">three</div> </div> <div class="layout-grid-edit">do not match at all</div> 

The issue is, if the element has multiple classes then the class^="grid-=" doesn't seem to work, and I can't rely on class*="grid-" because it also matches something like layout-grid-edit which is not desired.

Answer 1

@3zzy - Give this attribute selector a try below. This type of selector will be effective in targeting a class attribute beginning with the whole word grid , immediately followed by a hyphen:

[class|="grid"] { border: 2px solid green; }

See if this does the trick, and let me know.

Answer 2

Replaced:

[class*="grid-"]{ 
}

With:

[class^="grid-"], 
[class*=" grid-"]{
}