任务8-CSS选择器

作者: 嘿菠萝 | 来源:发表于2016-07-22 10:57 被阅读18次

任务8-CSS选择器
任务8-CSS选择器
任务8-css选择器
任务8-CSS选择器
任务8-CSS选择器
任务8-CSS选择器
任务8－CSS选择器
任务8-CSS选择器
任务8-CSS选择器
任务8-css常见样式

2016/05/15

问答

CSS选择器常见的有几种?

1.id选择器
选择设置id的元素，如 #header{}
2.类选择器
选择有相同class的元素，如 .header{}
3.属性选择器
以某个属性作为选择依据，如 input[type="text"]{}
4.分组选择器
可以对选择器进行分组，被分组的选择器对应的元素就有相同的样式。用逗号将需要分组的选择器分开。如 h1,.p1{}
5.派生选择器
选择某个元素下的子元素，通常用于作用域隔离，如 .mod-box p{}
6.伪类选择器。
常用的有:hover鼠标放置上的样式（ie6,7,8不支持a以外的标签用:hover）
:first-of-type从一组中选择第一个元素
:last-of-type从一组中选择最后一个元素
:first-child匹配元素的第一个子元素
:last-child匹配元素的最后一个子元素

7.伪元素选择器。
常见的有,::before在元素之前插入生成的内容
::after在元素之后插入生成的内容

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

0_1463193916055_upload-503b935c-88bf-4e46-98b9-d302dbe9124f

若CSS规则由多个选择器组成，每个选择器本身有优先级，越具体优先级越高，如果两个选择器规权值一样，则后面的样式会覆盖前面的

class 和 id 的使用场景?

一般id选择器用于大的布局，class则用于大部分里面的具体内容

0_1463194261444_upload-f3c14842-cffb-4236-be45-2b4fb0186f22

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

这是代码语义化的一种体现，是为了更好地匹配我们特定需要匹配的元素，只对匹配的元素生效，保证代码样式在合理的控制内不出现不必要的错误

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

header{}: ID选择器，匹配ID为header的元素

.header{}:类选择器，匹配class为header的元素

.header .logo{ }：匹配class为header后代里面所有class为logo的元素
.header.mobile{ }：匹配同时有class为header和class为mobile的元素
.header p, .header h3{ }：匹配class为header下的p元素和class为header下的h3元素

header .nav>li{}：匹配ID为header下的class为nav下的直接子元素li,注意是直接子元素

header a:hover{ }：匹配ID为header下的a标签加上鼠标移入的效果

列出你知道的伪类选择器

a:link{}
a:visite{}
a:hover{}
a:active{}
:first-child选择某个元素的第一个子元素
:last-child选择某个元素的最后一个子元素
:nth-child():选择某个元素的一个元素或多个特定的子元素
:nth-last-child():选择某个元素的一个元素或多个特定的子元素,从这个元素的最后一个子元素开始算
:first-of-type选择一个上级元素下的第一个同类子元素
:last-of-type选择一个上级元素下的最后一个同类子元素
:nth-of-type()选择指定元素
:nth-last-of-type()选择指定元素,从这个元素的最后一个开始算