css入门基础2

class 和 id 的使用场景?

  1. id 指定标签的唯一标识
    例如 <div id = "wrap">
    使用场景:
    ①根据提供的唯一id号,快速获取标签对象。如:document.getElementById(id),或者通过# id{ }控制样式
    ②用于充当label标签for属性的值:示例:<label for='userid'>用户名:</label>,表示单击此label标签时,id为userid的标签获得焦点。
    特性:id值在一个html内唯一
  2. class 指定标签的类名
    例如 <div class="wrap">
    使用场景:
    CSS操作,把一些特定样式放到一个class类中,需要此样式的标签,可以在添加此类。

CSS选择器常见的有几种?

image.png

主要有这么几种常见的
根据W3C文档的选择器大全
http://www.w3school.com.cn/cssref/css_selectors.asp

选择器的优先级是怎样的?对于复杂场景如何计算优先级?

css 优先级一般情况可以用这个

image.png

面对复杂情况 有以下的几个概念
若愚老师讲的 a b c d 概念相同
选择器的优先权(取自css权威指南) 记录下 P70

  1. 内联样式表的权值最高 1000,加1,0,0,0;(a )

  2. ID 选择器的权值为 100,加0,1,0,0 ; ( b )

  3. Class 类选择器的权值为 10,加0,0,1,0 (包括伪类) ( c )

  4. HTML 标签选择器的权值为 1 ,加0,0,0,1(包括伪元素)( d )

CSS 优先级法则:

A 选择器都有一个权值,权值越大越优先,所以相加起来最大的就最优先了;

B 当权值相等时,后出现的样式表设置要优于先出现的样式表设置;

C 创作者的规则高于浏览者:即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式;

D 继承的CSS 样式不如后来指定的CSS 样式;

E 在同一组属性设置中标有“!important”规则的优先级最大;

a:link, a:hover, a:active, a:visited 的顺序是怎样的? 为什么?

http://www.cnblogs.com/x_wukong/archive/2013/10/03/3349976.html

记录 在《css权威指南》一书中P80页

未点击链接前,link伪类长期处于激活状态,鼠标悬停(或点击)时,a链接同时处于link和hover(或active)状态,由于它们特指度相同,
在同时激活的情况下,后出现的伪类样式会覆盖前面的伪类样式,故link状态必须写在hover(或active)之前。
  再讨论hover和active的顺序,若把hover放在active后面,当点击链接一瞬,实际你在激活active状态的同时触发了hover伪类,hover在后面覆盖了active的颜色,所以无法看到active的颜色。故hover在active之前
  其次,若把visited放在hover后面,那已访问过的链接一直触发着visited伪类,会覆盖hover样式。
  最后,其实link、visited两个伪类之间顺序无所谓。(因为它俩不可能同时触发,即又未访问同时又已访问。)

顺序: a:link , a:visited , a:hover , a: active

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

// #header{
}
控制id名为header的元素样式

.header{
}
控制所有类名为header的元素样式

.header .logo{
}
后代选择器,控制所有类名为header下的所有的类名为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元素鼠标悬浮在其表面时的样式
// #header .logo~p{
}
控制id="header"元素下的后代class="logo"的元素之后的同级元素p的样式
// #header input[type="text"]{
}
控制id="header"元素下的后代元素属性带有和匹配[type="text"]的input标签的样式

列出你知道的伪类选择器

image.png

image.png

image.png

div:first-child、div:first-of-type、div :first-child和div :first-of-type的作用和区别 (注意空格的作用)

div:first-child 匹配父元素下,作为第一个子元素的div元素
div:first-of-type 匹配父元素的子元素中,第一个div元素
div :first-child 匹配所有div元素内所有元素中属于其父元素的首个子元素 div :first-of-type 匹配所有div元素内所有元素中属于其父元素的首个类型的子元素

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

image.png

运行结果


image.png

.item1:first-child 匹配class="item1"的所有元素的父元素下的第一个元素,在这里父元素是class="ct"的div,这个div下的第一个元素是class="item1"的p标签,样式控制是字体变红,所以aa会变红,其他不变

.item1:first-of-type 匹配class="item1"的元素的父元素下的所有相同样式的第一个元素,这里class="ct"的div下有p和h3两种元素,匹配相同样式的第一种,所有第一个p和第一个h3的样式改变,背景变蓝色

记下比较容易忘记的选择器:

image.png

附上实验的例子
http://js.jirengu.com/gaxeyeteku/2/edit

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

推荐阅读更多精彩内容

  • CSS基础 本文包括CSS基础知识选择器(重要!!!)继承、特殊性、层叠、重要性CSS格式化排版单位和值盒模型浮动...
    廖少少阅读 3,053评论 0 40
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,725评论 1 92
  • 一.class 和 id 的使用场景? name:指定标签的名称应用场景:①form表单:name可作为传递给服务...
    Sunset125阅读 937评论 0 0
  • 鸡汤! 全是鸡汤! 近日,网友M发出慨叹,对自己一段时间以来学习的效果、实践的结果极。为。不。满。 黄品源:对你付...
    周学税文阅读 301评论 0 0
  • 有人说,郑钧属金,朴树属木,李健属水,汪峰属火,许巍属土,而窦唯超脱三界外不在五行中。随着窦仙儿的名声愈来愈盛,仿...
    郜郜XC阅读 1,521评论 0 3