任务八问答题

一、CSS选择器常见的有几种?

id选择器:独一无二的,划分大区块 #div{border:1px solid red;}

class选择器:同一类型的区块,小区块class=“intro other other2”

标签选择器:不常用,范围太大。去除默认样式,用标签选择器。标签选择器的使用常见的有:a{text-decoration:none},li{display:none},其他一般不用

通用元素选择器,一般使用规则为*{padding:0;magrgin:0;}

属性选择器 input[type="text"]用中括号表示

分组选择器用,逗号隔开。如h1,p{}是表示h1和p用同一样式

派生选择器(子元素选择器,自己的后代,并不是直接子元素):选择某个元素的子元素.中间用空格隔开  .box h1{}表示box类下的所有h1都会改变,box类之外的不影响

.box h1(中间是空格)。只选择box里面的h1,其他的h1没有影响

直接子元素选择器.box > h1是.box下的直接子元素,即跟h1在同一层级,没有被其他的div 或其他嵌套的h1

.box#footer选择的是类为boxid且id为footer,同时存在的

h1.class1标签选择和类选择同时满足时,才会进行相应样式修改

h1 .class1后代选择器,表示h1下的类class1

伪类选择器,最多  使用的是a:hover{}

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

优先级从上到下依次更低级

1、在属性后面加上!important的优先级最高

2、作为style属性写在元素内部的行内样式

3、id选择器

4、类选择器

5、伪类选择器

6、属性选择器

7、标签选择器

8、通配符选择器

9、浏览器自定义

如果是两个或者多个的话(除行业样式外,行内样式权重太高为1000),ID选择器100,类、伪类和属性选择器10,标签和伪元素选择器1,进行相加,得到的数值越大,权重越大



三、class 和 id 的使用场景?

1、一个标签只能有一个id.一个id只能使用一次(类似于一个人只有一个身份证,一个身份证只能让一个人使用),而且一个标签可以有多个类<div class="box1 box2"/>,一个类也可以用再多个标签上 

2、当有几个元素有共同属性时,用class,独一无二的属性时,用id.一般情况下,大的层一般用id,里面的小块样式一样时,一般用class.

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

1、使代码页面更具有语义化,增加可读性

2、方便后期代码维护的修改完善. 

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

#header{}  名为header的id选择器,引用时id="header"

.header{}  名为header的类选择器 ,引用时为class="header"

.header .logo{}  后代选择器,名为header的类选择器下的名为logo的类选择器 引用时类似为<div class="header"><div class="logo"></div></div>

.header.mobile{} 名为header的类选择器同时名为mobile的id选择器 引用时为class="header mobile"

.header p, .header h3{}大块为分组选择器,名为header的类选择器的后代p标签和header类名后代是我h3标签共同具有的属性

#header .nav>li{}后代的直接子元素选择器,为header的id选择器的后代名为nav的类选择器的直接子元素li标签属性

#header a:hover{}名为header的ID选择器的后代a标签的鼠标放上的属性

六、列出你知道的伪类选择器

cursor鼠标,属性有pointer(手型)、copy(竖线)

hover

active

focus(表单,输入框,默认样式去除)

before

after

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

:nth-of-type(3)第3个元素

:nth-child(3)第三个孩子

.box > h1 :nth-of-type(3).box下面的第三个h1,不是h1的忽略,继续找

.box > h1 :nth-child(3)看.box下面的第三个孩子是不是h1如果是的华进行样式修改,不是就无作用

first-child:父元素中的第一个子元素

first-of-type:父元素的子元素中每个类型(即每一种标签或者第一个内容,比如没有标签包括,直接是元时,也是第一个出现的不同的值)第一个出现的元素

八、运行如下代码,解析下输出样式的原因。


九、text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中

text-align:center是水平居中。作用在块级元素上,代码写在块级元素上,使该块级元素包括的行业元素水平居中,

十、如果遇到一个属性想知道兼容性,在哪查看?

can i use 网站

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,921评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,635评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,393评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,836评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,833评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,685评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,043评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,694评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,671评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,670评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,779评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,424评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,027评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,984评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,214评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,108评论 2 351
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,517评论 2 343

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,727评论 1 92
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,598评论 18 139
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    程序员poetry阅读 16,513评论 32 459
  • CSS基础 本文包括CSS基础知识选择器(重要!!!)继承、特殊性、层叠、重要性CSS格式化排版单位和值盒模型浮动...
    廖少少阅读 3,057评论 0 40
  • 意大利的两位刑法学犯罪学大咖都是不到三十岁遍形成了自己的学术思想,太牛掰了! 所以,搞那么多烂文章干嘛,还得真才实...
    专注的喵星人阅读 187评论 0 0