废话不多说，直接上代码吧。后面有时间会继续更新 Thank u
<divclass="content"><divclass="first-item"><divclass="first-item-child-1 bold">First item child .1 content</div><divclass="first-item-child-2 bold">First item child .2 content</div><divclass="first-item-child-3 align-left">First item child .3 content</div></div><divclass="second-item" align="center">Second item content</div><divclass="third-item" align="left" title="Third item content">Third item content</div></div>
/* 子元素选择器 > : 直接子元素 */
.content>div { /* .first-item, .second-item, .third-item */background-color:#f2ce8f;
text-align: center;
padding:10px0;
}
/* 兄弟元素选择器 + : 下一个兄弟元素 */
.first-item+div { /* .second-item */color:#ffffff;
}
/* 兄弟元素选择器 ~ : 后面所有兄弟元素 */
.first-item-child-1~div { /* .first-item-child-2, .first-item-child-3 */color:#2ab1ff;
}
/* 属性选择器 *//* 不指定属性值 */div[title] { /* .third-item */color:#2ab1ff;
}
/* 指定属性值 */div[align="center"] { /* .second-item */padding:20px0;
}
/* 指定属性值以某个值开头 */div[align^="l"] { /* .third-item */border-top:1px solid #333333;
}
/* 指定属性值以某个值结尾 */div[align$="t"] { /* .third-item */border-bottom:1px solid red;
}
/* 指定属性值中包含某个值 */div[class*="bold"] { /* .first-item-child-1, .first-item-child-2 */font-weight: bold;
}
/* 指定属性值中包含某个值,而且这个值前面一定有空格 */div[class~="align-left"] { /* .first-item-child-3 */text-align: left;
}
/* 指定属性值以某个值或以某个值加-开头 */div[class|="first"] { /* .first-item, .first-item-child-1, .first-item-child-2, .first-item-child-3 */border-top:1px solid #000000;
}
废话不多说，直接上代码吧。后面有时间会继续更新 Thank u