CSS3选择器

属性选择器

E:标签，如div,p,a…
attr:属性，如id,class…

• E[attr]div[class]

• E[attr=“value”]div[class="sel"]
  注意：<div class="sel fl"></div> 这种是不会被选中的，如果想选中，就要用下面一种选择器

• E[attr~=“value”]：指定属性名，并且具有属性值，此属性值是一个词列表，其中词列表中包含了一个value词

• E[attr^=“value”]： 指定了属性名，并且有属性值，属性值是以value开头的`div[class^=“s”]

结构性伪类

第一大类

• E:nth-child(n)：
  在E的父元素中依次从上到下寻找子元素，若元素为E，则匹配成功，否则匹配不成功
  括号内可以是表达式，可以是具体数字
  当“:nth-child(n)”选择器中的n为一个表达式时，其中n是从0开始计算，当表达式的值为0或小于0的时候，不选择任何匹配的元素。

• E:nth-last-child(n)： 表示E父元素中的第n个子节点，从后向前计算

• E:first-child：表示E父元素中的第一个子节点

• E:last-child：表示E父元素中的最后一个子节点

第二大类

• E:nth-of-type(n)：
  先在E的父元素包裹的子元素中找出所有E类型子元素，然后在根据括号内找匹配的元素
• E:nth-last-of-type(n)
• E:first-of-type
• E:last-of-type
• E:not(selector)
  p:not(:nth-of-type(1)) {…}
  表示匹配E元素中除了 selector 的元素

---

文字阴影：text-shadow: 2px 3px 3px grey;（x，y，距离，颜色）
盒模型阴影：box-shadow: inset 2px 2px 8px gray;
圆角：border-radius: 8px;冒号后可跟数字，百分数，50%是div就变成了圆形

---