任务8-CSS选择器
一、CSS选择器常见的有几种?
1. 基础选择器
- *：通用元素选择器，匹配页面任何元素
- id选择器:选择指定id属性值为"id"的html元素，选择的时候前面加上一个#号
- class选择器：类选择器，选择指定classs属性值为“class”的任意多个html元素，选择的时候前面加上一个.号
- element:标签选择器
2. 组合选择器
- E,F：多元素选择器，用，隔开，同时匹配元素E或者F
- E F：后代选择器，用空格隔开，匹配E元素所有的后代（不只是子元素、子元素向下递归）元素F
- E>F：子元素选择器，用>分隔，匹配E元素的所有直接子元素
- E+F：直接相邻选择器，匹配E元素之后的相邻同级元素F
- E~F：普通相邻选择器（弟弟选择器），匹配E元素之后的同级元素F（无论直接相邻与否）
- .class1.class2：id和class选择器和选择器连写的时候中间没有分隔符，.
和 # 本身充当分隔符的元素 - element#id：id和class选择器和选择器连写的时候中间没有分隔符，.
和 # 本身充当分隔符的元素
3. 属性选择器
属性选择器通过已经存在的属性名或属性值匹配元素
- E[attr]：匹配所有具有属性attr的元素，div[id]就能取到所有有id属性的div
- E[attr = value]：匹配属性attr值为value的元素，div[id=test],匹配id=test的div
- E[attr ~= value]：匹配所有属性attr具有多个空格分隔、其中一个值等于value的元素
- E[attr ^= value]：匹配属性attr的值以value开头的元素
- E[attr $= value]：匹配属性attr的值以value结尾的元素
- E[attr *= value]：匹配属性attr的值包含value的元素
4. 伪类选择器
- E:link：匹配所有未被点击的链接
- E:visited：匹配所有已被点击的链接
- E:active：匹配鼠标已经其上按下、还没有释放的E元素
- E:hover：匹配鼠标悬停其上的E元素
- E:focus：匹配获得当前焦点的E元素
- E:disabled：匹配表单中禁用的元素
- E:checked：匹配表单中被选中的radio或checkbox元素
- E::selection：匹配用户当前选中的元素
- E:first-child：匹配元素E的第一个子元素
- E:nth-child(n)：匹配其父元素的第n个子元素，第一个编号为1
- E:first-of-type：匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)
5. 伪元素选择器 - E::before 在E元素之前插入生成的内容
- E::after 在E元素之后插入生成的内容
二、选择器的优先级是怎样的?
从高到低分别是：
- 在属性后面使用
！important会覆盖页面内任何位置定义的元素样式，全局优先级最高 - 作为style属性写在元素标签上的内联样式
- id选择器
- 类选择器
- 伪类选择器
- 属性选择器
- 标签选择器
- 通配符选择器
- 浏览器自定义
三、class 和 id 的使用场景?
id：id具有唯一性。在同一HTML文档中不能有两个具有相同id值的元素。通常用来定义页面中大的样式。如：header,content,footer等。
class：class用于可以重复使用的HTML元素中。用来定义一些比较细节的样式。如：具体的一个菜单，一行文字等。
四、使用CSS选择器时为什么要划定适当的命名空间？
浏览器会因为命名的不规范而产生不同样式，适当的命名空间可以避免命名的冲突，方便代码的维护。
五、以下选择器分别是什么意思?
<pre>
header{} /*id选择器，匹配id=“header”的元素*/
.header{} /*class选择器，匹配class=“header”的元素*/
.header .logo{} /*后代选择器，匹配class=“header”元素下所有class=“logo”的元素*/
.header.mobile{} /*类选择器，匹配class=“header”元素且同时class=“mobile”的元素*/
.header p, .header h3{}/*多元素选择器，匹配class=“header”元素下的P元素 和 h3元素*/
header .nav>li{}/*后代选择器，匹配id=“header”下class=“nav”的直接子元素li*/
header a:hover{}/*后代选择器，匹配鼠标悬停在id=“header”元素下的a元素*/
</code>
</pre>
六、 列出你知道的伪类选择器？
E:link：匹配所有未被点击的链接
E:visited：匹配所有已被点击的链接
E:active：匹配鼠标已经其上按下、还没有释放的E元素
E:hover：匹配鼠标悬停其上的E元素
E:focus：匹配获得当前焦点的E元素
E:lang(c)：匹配lang属性等于c的E元素
E:enabled：匹配表单中可用的元素
E:disabled：匹配表单中禁用的元素
E:checked：匹配表单中被选中的radio或checkbox元素
E::selection：匹配用户当前选中的元素
E:root：匹配文档的根元素，对于HTML文档，就是HTML元素
E:first-child：匹配元素E的第一个子元素
E:last-child：匹配父元素的最后一个子元素，等同于:nth-last-child(1)
E:nth-child(n)：匹配其父元素的第n个子元素，第一个编号为1
E:nth-last-child(n)：匹配其父元素的倒数第n个子元素，第一个编号为1
E:nth-of-type(n) ：与:nth-child()作用类似，但是仅匹配使用同种标签的元素
E:nth-last-of-type(n)：与:nth-last-child() 作用类似，但是仅匹配使用同种标签的元素
E:first-of-type：匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)
E:last-of-type：匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1)
E:only-child：匹配父元素下仅有的一个子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)
E:only-of-type：匹配父元素下使用同种标签的唯一一个子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
七、:first-child和:first-of-type的作用和区别？
：first-child：匹配父元素的第一个子元素
：first-of-type：匹配父元素下指定类型的第一个子元素，等同于：nth-of-type(1)
<pre>
<style>
h1:first-child{ color:green; }
p:first-of-type{ color:yellow; }
</style>
<body>
<div>
<h1>子元素1</h1>
<p>子元素2</p>
<p>子元素3</p>
<p>子元素4</p>
</div>
</body>
</pre>
h1:first-child{color:green;}匹配到的是h1，因为h1是div的第一个子元素，将其颜色设置为绿色。
p:first-of-type{color:yellow;}匹配到的是p元素，因为p元素是div所有类型为p的子元素中的第一个，将其颜色设置为黄色。
八、运行如下代码，解析下输出样式的原因。
结果分析
九、text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中。
text-align: center作用是使元素中的文本水平居中。
作用在块级元素上。设置文本或者img标签等一些内联对象（或与之类似的元素）的居中。若要整个内容水平居中，需要在添加块级元素中添加text-align:center和margin：0 auto样式。或者说在块级元素中添加display：inline-block。
十、如果遇到一个属性想知道兼容性，在哪查看?
可以在can I use上查看
Paste_Image.png
版权归本人及饥人谷所有，转载请注明出处。
