css选择器
1 . CSS选择器常见的有几种?
- 基础选择器
- 通用元素选择器
- ID选择器
- 类选择器
- 标签选择器
- 组合选择器
- 属性选择器
- 伪类选择器
- 伪元素选择器
2 . 选择器的优先级是怎样的?
1.在属性后面使用 !important会覆盖页面内任何位置定义的元素样式
<h1>我是标题哦</h1> !important
2.作为style属性写在元素标签上的内联样式;<h1 style="color:red;">我是标题哦</h1>
3.id选择器;#id{ color:red; }
4.类选择器;.class{ color；green; }
5.伪类选择器;.box>h1:first-of-type{color:#99f }
6.属性选择器;a[href] {color:red;}
7.标签选择器;p{ color:red; }
8.通配符选择器;* {font: 15px #ccc '微软雅黑';}
9.浏览器自定义;
简单来说一句话谁更具体用谁，也就是权值高的选择器作用的越具体优先级越高，如果权值一样,按浏览器从上到下的顺序，后面会覆盖掉前面的。
3 . class 和 id 的使用场景?
| 选择器 | 使用场景 |
|---|---|
| class | 把一些特定的样式放到一个class类中。是一个类可以反复使用同时对应多个控件 |
| id | 根据提供的唯一id号，快速获取标签对象。如:document.getElementById(id)具有唯一性只能使用一次 |
概念上 id是先找到结构/内容，再给它定义样式；class是先定义好一种样式，再套给多个结构/内容。
4 . 使用CSS选择器时为什么要划定适当的命名空间？
1、提高代码的可读性；
2、便于维护管理；
3、保持代码的可拓展性；
5 . 以下选择器分别是什么意思?
| 选择器 | 解释 |
|---|---|
| #header{} | 对id选择器header设置属性 |
| .header{} | 对类选择器header设置属性 |
| .header .logo{} | 对类选择器header下的类选择器logo设置属性 |
| .header.mobile{} | 对同时包含这两个类名的元素设置属性 |
| .header p, .header h3{} | 对类header下的p段落和h3设置属性 |
| #header .nav>li{} | 为id为header后的类nav下直接子元素li设置属性 |
| #header a:hover{} | 为d为header后的a链接鼠标经过设置属性 |
6 . 列出你知道的伪类选择器
:link /:visited /:hover/:active/:focus/:first-child/:nth-child(n)/:first-of-type/:nth-of-type(n)/:last-child/:nth-last-child(n)/:last-of-type/:nth-last-of-type(n)/::selection/::first-line/::first-letter/::before/::after
7 . :first-child和:first-of-type的作用和区别
|.box>h1:first-child|选择 类box所有子元素中的第一个子元素h1|
|---|---|---|
|.box>h1:first-of-type|选择 类box所有h1子元素中的第一个h1|
另外还有:nth-of-type(n)和:nth-child(n)容易搞错
**:nth-of-type(n)和:nth-child(n)
**
8 . 运行如下代码，解析下输出样式的原因。
9 . text-align: center的作用是什么，作用在什么元素上？能让什么元素 水平居中。
设置文本或img标签等一些内联对象（或与之类似的元素）的居中。
另外：margin:0 auto 设置块元素（或与之类似的元素）的居中。
参考：margin:0 auto 与 text-align:center 的区别
10 . 如果遇到一个属性想知道兼容性，在哪查看?
本文版权归作者饥人谷_Josh和饥人谷所有，转载请注明来源
