1. 选择器的分类
- 基础选择器:
-
* {font-size:16px;}通用选择器 -
p {font-family:arial;}标签选择器 -
.error {font-weight:bold;}class选择器 -
#correct {font-style:italic;}ID选择器
-
- 组合选择器
-
div,p {background-attachment:fixed;}多元素选择器 -
div a {background-color:blue;}后代元素选择器 -
div>p {background-image:url(xxx.gif)}子元素选择器 -
p+div {background-position:x% y%}毗邻元素选择器
-
- 属性选择器
- E[att]
- E[att=val]
- E[att~=val] 匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素
- E[att｜=val] 匹配所有att属性具有多个连字号分隔（hyphen-separated）的值、其中一个值以“val”开头的E元素
- 伪类选择器
- E:first-child 匹配父元素E下的第一个子元素
E:first-child {text-align:center;} - E:link 匹配所有未被点击的链接
- E:link 匹配所有未被点击的链接
- E:active 匹配鼠标已经按下、还没有释放的E元素
- E:hover 匹配鼠标悬停其上的E元素
- E:focus 匹配获得当前焦点的E元素
- E:lang(c) 匹配lang属性等于c的E元素
- E:first-child 匹配父元素E下的第一个子元素
- 伪元素
- E:first-line 匹配E元素的第一行
- E:first-letter 匹配E元素的第一个字母
- E:before 在E元素之前插入生成的内容
E:before {content:"sometext you want to add";display:block;;height:40px;width:40px;}
- E:after在E元素之后插入生成的内容
E:after {content:"sometext you want to add";display:block;;height:40px;width:40px;}
2. :first-child和:first-of-type的作用和区别?
:first-child 匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素。
:first-of-type 匹配的是某父元素下相同类型子元素中的第一个。
Paste_Image.png
3. text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中?
作用是让文本或者行内元素如（< a >< img >< span >标签）水平居中。作用在（块级元素），（表格单元格）以及（通过display拥有块元素特性或表格特性的行内元素）上。
Paste_Image.png
