CSS基础——CSS3新增样式

/* 选择所有 title 属性的元素 */
[title] { color: blue; }

/* 选择 title="test" 的元素 */
[title=test] { color: green; }

/* 选择 title 属性值开始为 test 的所有元素 */
[title^=test] { color: purple; }

/* 选择 title 属性值结束为 test 的所有元素 */
[title$=test] { color: orange; }

/* 选择 title 属性值包含 test 的所有元素 */
[title*=test] { color: red; }

/* 选择第一个 <p> 元素 */
p:first-child { color: yellow; }

/* 选择最后一个 <p> 元素 */
p:last-child { color: pink; }

/* 选择第 n 个子元素，n 从 1 开始 */
p:nth-child(2) { color: black; }

/* 选择所有 <p> 元素，这些 <p> 元素是其父级的第一个子元素 */
p:first-of-type { color: grey; }

/* 选择所有 <p> 元素，这些 <p> 元素是其父级的最后一个子元素 */
p:last-of-type { color: brown; }

/* 选择所有 <p> 元素，这些 <p> 元素是其父级的第 n 个子元素，n 从 1 开始 */
p:nth-of-type(3) { color: cyan; }

/* 在每个 <p> 元素的内容前插入文本 "Start" */
p::before { content: 'Start '; }

/* 在每个 <p> 元素的内容后插入文本 "End" */
p::after { content: ' End'; }

/* 给元素添加阴影 */
div {
  box-shadow: 10px 10px 5px grey;
}

/* 设置元素背景为线性渐变 */
div {
  background: linear-gradient(to right, red, yellow);
}

/* 定义一个名为 move 的动画 */
@keyframes move {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}

/* 应用动画到元素 */
div {
  animation: move 2s infinite alternate;
}

/* 设置元素角为圆角 */
div {
  border-radius: 20px;
}

/* 设置元素边框为图片 */
div {
  border-image-source: url(border.png);
  border-