前端学习任务八

CSS选择器常见的有几种?

全局选择器：例如*{margin:0;padding:0}
id选择器：例如#box{margin:0;padding:0}
类选择器：例如.box{margin:0;padding:0}
标签选择器：例如a{text-decoration:none;}
组合选择器：例如 a，p{color:red;}
属性选择器：例如input[type=“text”]{color:blue;}
伪类选择器:例如 a:hover{color:red;}
继承选择器:例如 li a{color:red}
子元素选择器：例如 ul > li{border:1px solid red;}
!important选择器：例如 p{color:red； !important}

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

优先级是由选择器组成的匹配规则决定的。
!important > 内联样式 > id选择器 > 类选择器 > 伪类选择器 > 属性选择器 > 标签选择器 > 全局选择器

class 和 id 的使用场景?

class：指定标签的类名，用于书写结构样式。
把多次重用的CSS样式放到一个class类中,方便日后需要。
id：指定标签的唯一标识，多使用于主要块级元素
根据提供的唯一的id号，获取对应的元素对象。

使用CSS选择器时为什么要划定适当的命名空间？
主要是为了使自己定义的样式只对当前区块生效，避免与他人产生冲突。

以下代码表示

#header{
/*匹配id为header的元素*/
};
.header{
/*匹配class为hearder的所有元素与*/
};
.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的元素下的a元素的鼠标悬浮效果*/
};

列出你知道的伪类选择器

:active  /*选择器用于选择活动链接*/
:focus  /*向拥有键盘输入焦点的元素添加样式*/
:hover  /*  当鼠标悬浮在元素上方时，向元素添加样式*/
:link  /*未访问链接的效果*/
:visited  /*向已被访问的链接添加样式*/
a:first-child /*向元素的第一个子元素添加样式*/
a:last-child /*向父元素下最后一位元素添加样式*/
a:nth-child(n) /*向父元素下第n位元素添加样式*/
a:nth-child(2n) /*向父元素下n为偶数时候的a元素添加样式*/
a:first-of-type /*父元素下第一个为a的元素*/
a:last-of-type: /*父元素下最后一个为a的元素*/
a:nth-of-type(n) /*父元素下第n个为a的元素*/
:before /*在元素之前添加内容*/
:after /*在元素之后添加内容*/
:checked /*默认勾选的元素*/
:disabled /*不能输入的元素*/

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

:first-child 匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素。

:first-of-type 匹配的是某父元素下相同类型子元素中的第一个，比如 p:first-of-type，就是指所有类型为p的子元素中的第一个。这里不再限制是第一个子元素了，只要是该类型元素的第一个就行了。

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

<div class="ct">
   <p class="item1">aa</p>
   <h3 class="item1">bb</h3>
   <h3 class="item1">ccc</h3>
 </div>

以上类元素均为item1，且子元素有p和h3，而:first-child 匹配的是某父元素的第一个子元素。这里以下这段代码符合，所以aa为红色。

.item1:first-child{
  color: red;
}

:first-of-type 匹配的是某父元素下相同类型子元素中的第一个。p和第一个h3符合，所以aa和bb的背景呈现为蓝色。

.item1:first-of-type{
  background: blue;
}

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

有居中的作用
作用于块级元素或内联块元素内
能让块级元素或内联块元素内的文字居中

如果遇到一个属性想知道兼容性，在哪查看？
可以在Can I Use网站查看

前端学习任务八

推荐阅读更多精彩内容