作业8

CSS选择器常见的有几种?

1.基础选择器
*通用元素选择器:匹配页面任何元素
#idid选择器:匹配特定id元素
.class类选择器:匹配class包含特定的元素
element标签选择器
2.组合选择器
.E,.F{ }多元素选择器:同时匹配 .E.F元素
.E .F{}派生选择器:选择e元素的所有后代f元素(如果不是子元素,向下递归)
.E>.F{ }子元素选择器:选择E元素的所有直接子元素F
.E+.F直接相邻选择器:匹配E元素之后的相邻统计元素F
.E~.F普通相邻选择器:匹配e元素之后的所有同级元素F(不论是否相邻)

3.属性选择器
E[attr]:匹配所有具有属性为attr的元素(div[id]能选择所有具有id属性的div)
E=[attr=value]:匹配所有属性为value的元素(div[type=text]匹配id=text的div)
E[attr~=value]:匹配所有属性attr具有多个空格分隔,其中一个值等于value的元素
E[attr ^=value]:匹配属性attr的值以value开头的元素
E[attr $=value]:匹配属性attr的值以value结尾的元素
E[attr *=value]:匹配属性attr的值包含value的元素

4.伪类选择器
E:first-child:匹配元素E的第一个子元素
E:last-child:匹配元素e的最后一个子元素
E:nth-child(n):匹配其父元素的第n个子元素,第一个编号为1
E:first-of-type:匹配父元素下使用同种标签的第一个子元素,等同于nth-of-type(1)
E:hover:匹配鼠标悬停智商的e元素
E:focus:匹配获得焦点的e元素

5.伪元素选择器
E::first-line:匹配E元素的第一行
E::first-letter:匹配E元素的第一个字母
E::before:在e元素之前插入生成的内容
E::after:在e元素之后插入生成的内容

选择器的优先级是怎样的

从高到低是:
1.在属性后面使用!important会覆盖页面内任何位置定义的元素样式
2.作为style属性写在标签上的内联样式
3.id选择器
4.类选择器
5.伪类选择器
6属性选择器
7.标签选择器
8.通配符选择器(使用星号*表示,意思是“所有的”)
9.浏览器自定义

①作用的更具体的选择器优先级越高

a:#parent p.class1
b:div #child.class1
<div id="parent">
    <p id="child" class="class1">
        Text
    </p>
</div>

两个选择器作用的元素都是p标签,id选择器优先级最高,第一条规则作用宰了父元素身上,第二条作用在p标签上,所以第二条选择器优先级高
②两个选择器优先级一样,后面的覆盖前面

class和id的使用区别

1.id和class都是选择器,id样式优先级高于class,
2.id具有唯一性,class具有普遍性
3.id是唯一的,所以尽量在结构外围使用,通常用于页面布局
4.class是可重复的,所以尽量在结构内部使用,用场用于样式定义

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

1.避免命名不规范而导致的出错
2.代码易于写作与维护,提高代码可读性,增强语义化

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

#header{} :id="header"的选择器
.header{} :class="header"的选择器
.header .logo{}:以“.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链接鼠标悬停的效果

列出你知道的伪类选择器

E:first-child:匹配父元素(E)中的第一个子元素
a:link:匹配所有未被访问的链接
a:visited:匹配所有被访问的链接
E:active:匹配鼠标按下没有放开时的元素E
E:hover:匹配鼠标悬停时的元素E
E:focus:匹配当前焦点上的元素e
E:lang(en):匹配lang属性等于(en)的元素E
E:enabled:匹配在表单中激活的元素E
E:disabled:匹配在表单中禁用的元素E
E:checked:匹配在表单中被选中的元素E
E:selection:匹配用户选中的元素E
E;root:匹配文档中的根元素
E:last-child:匹配父元素中的最后一个子元素E
E:only-child:匹配父元素的仅有一个子元素E
E:nth-child(n):匹配父元素中的第n个子元素e
E:nth-last-child(n):匹配父元素中第n个倒数子元素e
E:first-of-type:匹配父元素中的使用同种标签的第一个子元素e
E:last-of-type:匹配父元素中使用同种标签的最后一个子元素e
E:only-of-type:匹配父元素中的使用同种标签唯一一个元素e
E:nth-first-of-type(n):匹配父元素中使用同种标签的第n个子元素e
E:nth-last-of-type(n):匹配父元素中使用同种标签的倒数第n个子元素e

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

:first-child用于选取属于其父元素的子元素的指定选择器,其匹配的元素必须为某个父元素的第一个子元素
first-of-type,选择器匹配属于其父元素的特定类型的首个子元素的每个元素。其匹配的元素为所有子元素中的第一个标签(不论是否喂第一个子元素)

first-of-type,与first-child的区别在于前者匹配的事该元素类型的第一个子元素,可能这个元素并不是该元素的第一个子元素

first-child在任何情况下都只能匹配到一个元素,而first-of-type能匹配到不止一个元素

实例

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

Paste_Image.png

.item:first-child表示匹配的是class=item1下的第一个子元素,对象唯一,显示字体红色
.item1:first-of-type:表示匹配的是classitem1下所有类型的第一个子元素。aa是p标签下第一个子元素。bbb是h3标签下第一个子元素。

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

作用是块级元素中行内元素水平居中,作用在块级元素中,text-align只作用容器中inline元素,对block元素无效果。想让div手作用,可以加一个display:inline-block

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

can i use

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

推荐阅读更多精彩内容

  • class 和 id 的使用场景?class指定标签的类名, 把需要相同样式的元素归类于一个name下,需要此样式...
    饥人谷_CCCLARITY阅读 238评论 0 0
  • 1.class 和 id 的使用场景?#### class是类选择器,选择的是同一个类的元素;id选择器选择的是有...
    zhaonu阅读 251评论 0 0
  • 1.class 和 id 的使用场景? class用于定位某一类元素,页面某一元素有共同特征的可以用class元素...
    阿洁2185阅读 373评论 0 0
  • 1.class 和 id 的使用场景? class:类选择器,一个标签可以有多个类且同一个类可以用到不同的标签上,...
    饥人谷_兔子君阅读 1,178评论 0 0
  • 一、CSS选择器常见的有几种? 基本选择器 通配选择器~选择文档中所有的html元素,用一个*表示 元素选择器~选...
    dengpan阅读 958评论 0 3