CSS3 选择器进阶 - 高级选择器 - one

[hexson]

废话不多说，直接上代码吧。后面有时间会继续更新 Thank u

<div class="content">
  <div class="first-item">
    <div class="first-item-child-1 bold">First item child .1 content</div>
    <div class="first-item-child-2 bold">First item child .2 content</div>
    <div class="first-item-child-3 align-left">First item child .3 content</div>
  </div>
  <div class="second-item" align="center">Second item content</div>
  <div class="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: 10px 0;
}


/* 兄弟元素选择器 + : 下一个兄弟元素 */

.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: 20px 0;
}
/* 指定属性值以某个值开头 */
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;
}