css3的四种匹配的模式选择器[读书笔记]

1:完全匹配选择器(完全匹配选择器):　

<div id="box">My name is css3</div>

用法:[id=box]{  //完全匹配id值为box的元素
           color:yellow;
}

2:包含属性匹配选择器(只要包含了该字符串就可以被选择了)

<div id="box">My name is css3</div>
<div id="mybox">My name is css3</div>
<div id="yourbox">My name is css3</div>
用法:[id*=box]{  //匹配包含id值为box字符串的元素
           color:yellow;
}

3:首字符属性匹配选择器(匹配首字符开始的字符串元素)

<div id="box">My name is css3</div>
<div id="mybox">My name is css3</div>
<div id="yourbox">My name is css3</div>
用法:[id^=box]{  //匹配id值为box开始的字符串的元素,只有第一个div符合要求,
           color:yellow;
}

4:尾字符属性匹配选择器(匹配尾字符结束的字符串元素)

<div id="box">My name is css3</div>
<div id="mybox">My name is css3</div>
<div id="yourbox">My name is css3</div>
用法:[id$=box]{  //匹配id值为box字符串结束的元素,只有id为mybox yourbox的元素
           color:yellow;
}

转载于:https://www.cnblogs.com/hellome/p/3891602.html