html 模糊匹配,css正则匹配、模糊匹配

//所有class包含font-red的p标签

p[class~="font-red"] {color: red;}

[abc^="def"] 选择 abc 属性值以 "def" 开头的所有元素

[abc$="def"] 选择 abc 属性值以 "def" 结尾的所有元素

[abc*="def"] 选择 abc 属性值中包含子串 "def" 的所有元素

/*选择clsss属性值以 "col" 开头的所有元素，包括col、col-5、col-lg-2等*/

[class^="col"] {background:#ccc;}

/*选择clsss属性值以 "search_box" 结尾的所有元素都将隐藏*/

[class$="search_box"]{display:none;}

/*选择clsss属性值以 "col" 开头的所有元素，加底边框*/

[class^="col"]{border-bottom:1px solid #aaa;}

/*选择clsss属性值以 "col" 开头的奇数元素*/

[class^="col"]:nth-child(odd) {background:#ccc;}

/*选择clsss属性值以 "col" 开头的偶数元素*/

[class^="col"]:nth-child(even) {background:#ddd;}

/*

实例 1

Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词(第一个子元素的下标是 1)。

*/

p:nth-child(odd)

{

background:#ff0000;

}

p:nth-child(even)

{

background:#0000ff;

}

p:nth-of-type(odd)

{

background:#ff0000;

}

p:nth-of-type(even)

{

background:#0000ff;

}

/*

实例 2

使用公式 (an + b)。描述：表示周期的长度，n 是计数器(从 0 开始)，b 是偏移值。

*/

p:nth-child(3n+0)

{

background:#ff0000;

}

p:nth-of-type(3n+0)

{

background:#ff0000;

}

:nth-child() 和:nth-of-type() 功能类似，不同之处在于:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。

举例如下：