任务8—CSS选择器

1. 选择器的分类

1. 基础选择器:
   • * {font-size:16px;}通用选择器
   • p {font-family:arial;}标签选择器
   • .error {font-weight:bold;}class选择器
   • #correct {font-style:italic;} ID选择器
2. 组合选择器
   • div,p {background-attachment:fixed;} 多元素选择器
   • div a {background-color:blue;} 后代元素选择器
   • div>p {background-image:url(xxx.gif)} 子元素选择器
   • p+div {background-position:x% y%}毗邻元素选择器
3. 属性选择器
   • E[att]
   • E[att=val]
   • E[att~=val] 匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素
   • E[att｜=val] 匹配所有att属性具有多个连字号分隔（hyphen-separated）的值、其中一个值以“val”开头的E元素
4. 伪类选择器
   • 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元素
5. 伪元素
   • 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