CSS3面试笔记

选择器

属性选择器：

E[attr=val]
1、E[attr] 表示存在attr属性即可；
	   div[class]
2、E[attr=val] 表示属性值完全等于val；
	div[class=mydemo]
3、E[attr*=val] 表示的属性值里包含val字符并且在“任意”位置；
 	div[class*=mydemo]
4、E[attr^=val] 表示的属性值里包含val字符并且在“开始”位置；
  	div[class^=mydemo]
5、E[attr$=val] 表示的属性值里包含val字符并且在“结束”位置；
	 div[class$=demos]

伪类选择器

:link、:active、:visited、:hover

E:first-child第一个子元素
E:last-child最后一个子元素
E:nth-child(n) 第n个子元素，计算方法是E元素的全部兄弟元素；
E:empty 选中没有任何子节点的E元素；

伪元素选择器

重点：E::before、E::after 是一个行内元素
E::first-letter文本的第一个字母或字（如中文、日文、韩文等）；
E::first-line 文本第一行；  文本第一行高亮..
E::selection 可改变选中文本的样式；

":" 与 “::” 区别在于区分伪类和伪元素

  span::before{
            content:"今天";
            color:red;
            background-color: pink;
            width: 50px;
            height: 50px;
            display: inline-block;
        }

  /*伪元素选择器*/
        /* 选中第一个字母*/
        li::first-letter{
            color:red;
            font-size:30px;
        }

盒模型box-sizing

CSS3中可以通过box-sizing 来指定盒模型，即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。

conten-box:设置的width是内容的宽（外增模式）。
border-box：设置的width是整个盒子的宽（内减模式）（默认）。