css选择器常见的有哪几种？
-
*通用元素选择器
* {
font-size:14px;
} -
#idid选择器,匹配特定的id元素
#id{
color:red:
} -
.class类选择器，匹配特定类的元素
.class{
background-color:blue;
} - element 标签选择器
p{
line-height:20px;
} - 组合选择器
- 属性选择器
- 伪类选择器
选择器的优先级是怎样的？
- 优先级从高到低分别为
- 在属性后面使用
!important会覆盖页面内任何位置定义的元素样式 - 作为style属性写在元素标签的内联样式
- id选择器
- 类选择器
- 伪类选择器
- 属性选择器
- 标签选择器
- 通配符选择器
- 浏览器默认
- 多个选择器时,对每个选择器的优先权值做加法运算
- 权重高的优先
- 相等时后面的优先
class和id的使用场景?
- id 页面中是独一无二的使用，例如页脚等
- class 一些有相同的特定样式的标签，可以给他们添加一个同样的class，将相同的部分定义出来。
使用css选择器时为什么要划定适当的命名空间？
- 更好的匹配需要特定匹配的元素，避免样式污染，使后期的维护更加容易
以下选择器分别是什么意思？
-
#header{}id选择器，选择为id名为header的元素。 -
.header{}class选择器，选择class名为header的元素。 -
.header .logo{}选择class名为header的元素中class名为logo的子元素。 -
.header.mobile{}选择class为header和mobile的元素。 -
.header p, .header h3{}选择class为header的子元素p和h3元素。 -
#header .nav>li{}选择id为header的元素中class为nav的元素的直接子元素li。 -
#header a:hover{}选择id为header的元素中啊标签鼠标悬停时的样式。
列出你知道的伪类选择器？
- E:hover 匹配鼠标悬停其上的E元素。
- E:active 匹配鼠标已经在其上按下还没有放手的E元素。
- E:focus 匹配获得当前焦点的E元素。
- E:link 匹配所有未被点击的链接。
- E:visited 匹配所有已经被点击的链接。
:first-child和:first-of-type有什么作用和区别？
-
:first-child匹配父元素下的第一个子元素。 -
:first-of-type匹配父元素下同种标签的第一个子元素。
Paste_Image.png
运行如下代码，解释输出样式的原因？
Paste_Image.png
-
.item1: first-chlid { color: red; }表示：class="item1"的父元素class="ct"下的第一个子元素的颜色为红色，即段落aa为红色。 -
.item1: first-of-type { background: blue; }表示：class="item1"的父元素class="ct"下相同类型元素的第一个元素背景色为蓝色，即不再强调一定是其子元素的第一个，也就是说aa为<p>标签下的第一个元素，bb为<h3>标签下的第一个元素，它们两者是不同标签的第一个元素，所以两者的背景都是蓝色
text-align:center的作用是什么，作用在什么元素上？能让什么元素水平居中?
- 定义行内内容（例如文字、span元素）如何相对它的块父元素对齐。作用是将文本在水平方向上居中。作用在块级元素上，让行内元素水平居中。
如果遇到一个元素想知道他的兼容性，在那里看？
- Can I Use上查看。
