//所有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 个子元素，不论元素的类型。

举例如下：