CSS认识3

问答

  • CSS选择器常见的有几种?
    id选择器
#idName {}

类选择器

.className {}

标签选择器

p {}

通配

 * {}

包含选择器

E F

子选择器

E>F

相邻选择器

E+F

兄弟选择器

E~F

属性选择器

E[atl]

属性值选择器

E[atl="val"]

  • 选择器的优先级是怎样的?
    简单的就是 通配选择器<标签选择器<类选择器<id选择器
选择器 特殊性 以10为基础的特殊性
style="" 1,0,0,0 1000
#wrapper #content {} 0,2,0,0 200
#content .datePosted {} 0,1,1,0 110
div#content {} 0,1,0,1 101
#content {} 0,1,0,0 100
p.content .datePosted {} 0,1,1,0 21
#content {} 0,1,1,0 11
div p {} 0,1,1,0 2
p {} 0,1,1,0 1

值越大优先级越高


  • class 和 id 的使用场景?
    class 复用性高
<!doctype html>
<html lang="en"  >
<head>
<meta charset="utf-8">
<title>Document</title>
<style type="text/css">
.box{
    display: inline-block;
    width: 50px;
    height: 50px;
    border: 1px red solid;
    }

</style>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</body>
</html>
Paste_Image.png

id 具有唯一性 方便js操作

<!doctype html>
<html lang="en"  >
<head>
<meta charset="utf-8">
<title>Document</title>
<style type="text/css">
.box{
    overflow: hidden;
    display: inline-block;
    width: 50px;
    height: 50px;
    border: 1px red solid;
    }
</style>
<script type="text/javascript">
window.onload=function () {
    var oP=document.getElementById('p1');
    oP.innerHTML="321"; 
}   
</script>
</head>
<body>
<div class="box"><p id="p1">123</p></div>
<div class="box"></div>
<div class="box"></div>
</body>
</html>
Paste_Image.png

  • 使用CSS选择器时为什么要划定适当的命名空间?
    1 方便看 比如.head nav 就能知道是头部的导航栏
    2 可以重复利用

  • 以下选择器分别是什么意思?
#header{
}
.header{
}
.header .logo{
}
.header.mobile{
}
.header p, .header h3{
}
#header .nav>li{
}
#header a:hover{
}
 ####### header 

选择id为header的元素

.header

选择class为header的元素

.header .logo

选择class为header元素下class为logo的元素

.header.mobile

选择class为header moblie的元素或者是moblie header的元素

.header p, .header h3

选择class为header元素下的所有p、h3标签

#header .nav>li

选择id为header元素下class为nav元素下的直接子li标签
####### header a:hover
选择id为header下的a标签的hover(鼠标悬停)状态


  • 列出你知道的伪类选择器

a标签伪类速记love hate

选择符 版本 描述
E:link css1 设置超链接a在未访问前的样式
E:visited css1 设置超链接a在其链接地址已被访问过的样式
E:hover css1/2 设置元素在其鼠标悬停时的样式
E:active css1/2 设置元素在被用户激活(在鼠标点击与释放之间发生的事件)时的样式
E:focus css1/2 设置元素在成为输入焦点(该元素的onfocus事件发生)时的样式
E:lang(fr) css2 匹配使用特殊语言的E元素
E:not(s) css3 匹配不含有s选择符的元素E
E:root css3 匹配E元素在文档的根元素
E:first-child css2 匹配父元素的第一个子元素E
E:last-child css2 匹配父元素的最后一个子元素E
E:only-child css3 匹配父元素仅有的一个子元素E
E:nth-child(n) css3 匹配父元素的第n个子元素E
E:nth-last-child(n) css3 匹配父元素的倒数第n个子元素E
E:first-of-type css3 匹配同类型中的第一个同级兄弟元素E
E:last-of-type css3 匹配同类型中的最后一个同级兄弟元素E
E:only-child css3 匹配同类型中的唯一的一个同级兄弟元素E
E:nth-of-type(n) css3 匹配同类型中的第n个同级兄弟元素E
E:nth-last-of-type(n) css3 匹配同类型中的倒数第n个同级兄弟元素E
E:empty css3 匹配没有任何子元素(包括text节点)的元素E
E:checked css3 匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)
E:enabled css3 匹配用户界面上处于可用状态的元素E
E:disabled css3 匹配用户界面上处于禁用状态的元素E
E:target css3 匹配相关URL指向的E元素
E:@page:first css2 Pseudo-Classes Selectors index设置页面容器第一页使用的样式。仅用于@page规则
E:@page:lest css2 Pseudo-Classes Selectors index设置页面容器位于装订线左边的所有页面使用的样式。仅用于@page规则
E:@page:right css2 Pseudo-Classes Selectors index设置页面容器位于装订线右边的所有页面使用的样式。仅用于@page规则

  • :first-child和:first-of-type的作用和区别
    E:first-child 匹配的是父级元素下一个E元素(如果是第二个就无效)
    E:first-of-type匹配同级兄弟E元素(只要有E元素就会匹配到第一个)
p:first-child{color:red;}
<body>
    <p>可以匹配到</p>
</body>

可以匹配到p元素

p:first-child{color:red;}
<body>
    <span>span1<span>
    <p>无法匹配到</p>
</body>

无法匹配到p元素

p:first-of-type
<body>
    <span>span1<span>
    <p>可以匹配到</p>
    <p>第二个p不可以匹配到</p>
</body>

可以匹配到第一个p元素

p:first-of-type
<body>
    <p>可以匹配到</p>
    <p>第二个p不可以匹配到</p>
</body>

可以匹配到p元素


  • 运行如下代码,解析下输出样式的原因。
<style>
.item1:first-child{
  color: red;
}
.item1:first-of-type{
  background: blue;
}
</style>
 <div class="ct">
   <p class="item1">aa</p>
   <h3 class="item1">bb</h3>
   <h3 class="item1">ccc</h3>
 </div>
.item1:first-child{} 

匹配到div中 第一个class为item1的p元素 aa变成红色

.item1:first-of-type{}

匹配到class为item1的p元素和h3元素中的第一个 aa和bb背景色为蓝色


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

作用是居中

作用在块级元素上

可以上行内元素元素居中(可以设置文字 图片 和行内元素的居中)


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

http://caniuse.com/ 可以查看


本教程版权归菲龍探雲和饥人谷所有,转载须说明来源

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

推荐阅读更多精彩内容

  • 1.class 和 id 的使用场景? class:类选择器,一个标签可以有多个类且同一个类可以用到不同的标签上,...
    饥人谷_兔子君阅读 1,179评论 0 0
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,598评论 18 139
  • 一、CSS选择器常见的有几种? 基本选择器 通配选择器~选择文档中所有的html元素,用一个*表示 元素选择器~选...
    dengpan阅读 959评论 0 3
  • 1,class 和 id 的使用场景? 1.class是类选择器,用.class定义,定位到页面中有相同特征的一类...
    饥人谷_思铭阅读 365评论 0 0
  • class和id的使用场景 class指定标签的类名,属性值可出现在多个标签中。id指定标签的唯一标识,为某一元素...
    饥人谷_saybye阅读 446评论 0 0