属性选择器
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就变成了圆形