任务八-CSS选择器

1.CSS选择器常见的有几种?

答：

1.基本选择器

①Elements-标签选择器:直接在标签上面设置样式，例如div,h1,p,body等等。使用情况较少，一般用于重置元素。h1{color:red}
②Class-类选择器：定义类的方式是目前最常用的选择器，可以为不同的标签设置同一个类，在css中能够一并设置样式。

我是类选择器
.class_test {color:red;border:1px black solid;} ```
③ID-ID选择器 :ID和class最主要的区别就是id不能被多次使用，在css中也是一样无法复用。一般用于控制唯一标签。
```*{
我是ID选择器
#id_test {color:red;border:1px black solid;} ```
④全局选择器:选中所有的元素，*也被称之为通配符。使用的情况不算太多，在对某些属性做全局设置的时候会被用到。
```*{
*{margin:0px; padding:0px;} ```
######2.组合选择器

| 选择器      |使用方式 | 符号 |
| ----------- |:-------:| 
| E,F | 多元素选择器，表示可以同时对E,F元素生效。 |逗号 |
| E F | 后代选择器，表示对E元素之后的所有F元素生效|  空格 |
| E>F | 直接子元素选择器，通常用于作用于隔离匹配E的最外层子元素  | 大于号 |
| E+F | 直接相邻选择器，选中E的直接邻居。| 加号 |
| E~F  | 通用兄弟元素选择器，表示对E元素之后同级元素F有效| 波浪号 |

######3.属性选择器
答：属性选择器一般在特定场景下使用，顾名思义是可以直接对属性添加样式。例如在Input中：

input[type='text']
{ outline: none;}```

4.伪类选择器

答：伪类描述一种特定状态，一般比较常用的伪类选择器是对于a元素的定义。

a:link {color:#FF0000;text-decoration:none}
a:visited {color:#00FF00;text-decoration:none}
a:hover {color:#FF00FF;text-decoration:underline}
a:active {color:#0000FF; text-decoration:underline}

5.伪元素选择器

答：

E：first-line-为E元素第一行定义样式；
E：first-letter-为E元素的第一个字母定义样式；
E：before-在E元素之前插入内容；
E : after-在E元素之后插入内容；

2.选择器的优先级是怎样的?

答：
①在属性后面！important，会被无条件优先。
②在Html中给标签添加style。
③ID选择器
④Class选择器
⑤伪类选择器
⑥属性选择器
⑦标签选择器
⑧通配符选择器
⑨浏览器自定义

3.class 和 id 的使用场景?

答：由于id的唯一特性，一般被用于定义一些比较大的区块。而class一般用于比较通用的一些标签为他们命名同一个类。

4.使用CSS选择器时为什么要划定适当的命名空间？

答：

语义化代码便于我们后期修改，也易于被读懂，简洁规范。
而且如果命名相同的CSS文件一起加载，会产生冲突。

5.以下选择器分别是什么意思?

答：

#header{
}  /*ID选择器 设置header样式*/
.header{
}/*类选择器 设置header样式*/
.header .logo{
}/*子元素选择器 对header下的logo设置样式*/
.header.mobile{
}/*同时匹配header和mobile*/
.header p, .header h3{
}/*对header中的P和H3标签设置样式*/
#header .nav>li{
}/*对ID选择器header下的nav类选择器直接子元素li设置样式*/
#header a:hover{
}/*对ID选择器header中标签a的hover伪类*/

6.列出你知道的伪类选择器

E:hover-鼠标悬停效果；
E:active-鼠标点击效果
E:focus用于元素成为焦点，这个经常用在表单元素上。
E:fist-child选择某个元素的第一个子元素；
E:last-child选择某个元素的最后一个子元素；
E:nth-child()选择某个元素的一个或多个特定的子元素；
E:nth-last-child()选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算；
E:nth-of-type()选择指定的元素；
E:nth-last-of-type()选择指定的元素，从元素的最后一个开始计算；
E:first-of-type选择一个上级元素下的第一个同类子元素；
E:last-of-type选择一个上级元素的最后一个同类子元素；
E:only-child选择的元素是它的父元素的唯一一个了元素；
E:only-of-type选择一个元素是它的上级元素的唯一一个相同类型的子元素；
E:empty选择的元素里面没有任何内容。

7.:first-child和:first-of-type的作用和区别?

答：因为有“type”存在，所以可以理解为前者是某个元素的第一个子元素，而后者是同一个类型元素的第一个子元素。

8.运行如下代码，解析下输出样式的原因。

运行截图及原因解释

9.text-align:center的作用是什么，作用在什么元素上？能让什么元素水平居中？

答：控制内联元素在块级元素中位置居中。一般设置文本比较常见，或Img标签。用margin:0 auto 设置块元素（或与之类似的元素）的居中。

10.如果遇到一个属性想知道兼容性，在哪查看?

答：在 can i use这个网站上可以查看元素属性在不同浏览器不同版本的兼容程度。

****本教程版权归饥人谷_鬼脚七和饥人谷所有，转载须说明来源****