CSS选择器

1. class 和 id 的使用场景?

  • id:id选择器,使用#name定义(name为id名,可任意取名),使用id="name"调用,其优先级高于类选择器,一个标签只能有一个id且每个id只能使用一次,多用于页面分块的块级标签上。
  • class:类选择器,使用.name定义(name为类名,可任意取名),使用class="name"调用,一个标签可以有多个类且同一个类可以用到不同的标签上,多用于多个标签样式相似或完全相同时。

2. CSS选择器常见的有几种?

基础选择器

基础选择器

组合选择器

组合选择器

属性选择器

属性选择器

伪类选择器

伪类选择器

n的取值

  • 1,2,3,4,5
  • 2n+1, 2n, 4n-1
  • odd, even

伪元素选择器

伪元素选择器

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

从高到低分别是

  1. 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式
  2. 作为style属性写在元素标签上的内联样式
  3. id选择器
  4. 类选择器
  5. 伪类选择器
  6. 属性选择器
  7. 标签选择器
  8. 通配符选择器
  9. 浏览器自定义

在复杂场景下,我们可以按照选择器的权重将其大致分类,如:

  • 行内样式 <div style="xxx"></div> ==> a
  • ID 选择器 ==> b
  • 类,属性选择器和伪类选择器 ==> c
  • 标签选择器、伪元素 ==> d

对于得到的值,相同位置上的数字越大的值代表的优先级越高。具有相同优先级的选择器,如果样式出现冲突,那么后出现的样式会覆盖先出现的样式。!important优先级最高,无视上述规则。

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

a:link → a:visited → a:hover → a:active
因为当选择器优先级别相同时,后定义的会覆盖先定义的。a:visited 在链接访问过一次之后永久生效,如果放在最后会覆盖掉其他的样式。若把hover放在active后面,当点击链接一瞬,实际你在激活active状态的同时触发了hover伪类,hover在后面覆盖了active的颜色,所以无法看到active的颜色,故hover在active之前。

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

header{
}/*选择 header 标签 */
.header{
}/*有 header 类的所有元素*/
.header .logo{
}/*有 header 类的所有元素的后代中有 logo类的所有元素*/
.header.mobile{
}/*同时有 header 类和 mobile 类的所有元素*/
.header p, .header h3{
}/*有 header 类的所有元素的后代 p 元素,和有 header 类的所有元素的后代 h3 元素*/
#header .nav>li{
}/*id 为 header 的元素的有 nav 类的后代元素的直接 li 子元素*/
#header a:hover{
}/*id 为 header 的元素的子元素中,处于鼠标悬停状态的链接*/
#header .logo~p{
}/*id 为 header 的元素的子元素中,有 logo 类的元素的同级 p 元素*/
#header input[type="text"]{
}/*id 为 header 的元素的 input 子元素中type属性值为 text 的元素*/

6. 列出你知道的伪类选择器

  • a:link:未被点击的链接
  • a:visited:已被点击的链接
  • a:hover:鼠标悬停其上的链接
  • a:active:鼠标已经按下,但没有释放的链接
  • E:first-child:匹配元素E的第一个子元素
  • E:nth-child:匹配元素E的第n个子元素
  • E:enabled和E:disabled:匹配元素E的状态为可用/不可用
  • E:checked和E:selection:匹配元素E的状态为单选框选中/复选框选中
  • E:root:匹配文档的根元素,对于HTML文档,就是HTML元素
  • E:nth-child(n):匹配其父元素的第n个子元素,第一个编号为1
  • E:nth-last-child(n):匹配其父元素的倒数第n个子元素,第一个编号为1
  • E:nth-of-type(n):与:nth-child()作用类似,但是仅匹配使用同种标签的元素
  • E:nth-last-of-type(n):与:nth-last-child() 作用类似,但是仅匹配使用同种标签的元素
  • E:last-child:匹配父元素的最后一个子元素,等同于:nth-last-child(1)
  • E:first-of-type:匹配父元素下使用同种标签的第一个子元素,等同于:nth-of-type(1)
  • E:last-of-type :匹配父元素下使用同种标签的最后一个子元素,等同于:nth-last-of-type(1)
  • E:only-child:匹配父元素下仅有的一个子元素,等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)
  • E:only-of-type:匹配父元素下使用同种标签的唯一一个子元素,等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
  • E:empty:匹配一个不包含任何子元素的元素,文本节点也被看作子元素
  • E:not(selector):匹配不符合当前选择器的任何元素
    n的取值
    1,2,3,4,5
    2n+1, 2n, 4n-1

7. div:first-child、div:first-of-type、div :first-child和div :first-of-type的作用和区别

  • div:first-child 匹配父元素下,第一个子元素
  • div:first-of-type 匹配父元素的子元素中,第一个div元素
  • div :first-child div作为父元素,首个子元素
  • div :first-of-type div元素的后代元素中首个同类型的元素
div :first-child和div :first-of-type的作用
div:first-child、div:first-of-type的作用

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

image.png

div中包着三个标签,一个p标签,两个h3标签。.item1:first-child选中了class为item1的父元素中第一个子元素,.item1:first-of-type则选中了class为item1的父元素中第一个p标签的元素和第一个h3标签的元素。

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

推荐阅读更多精彩内容

  • 1.class 和 id 的使用场景? class:类选择器,一个标签可以有多个类且同一个类可以用到不同的标签上,...
    饥人谷_兔子君阅读 1,124评论 0 0
  • 1.class 和 id 的使用场景? 两者都能选取DOM节点并给DOM节点添加样式,但是W3C标准里规定页面中只...
    饥人谷_米弥轮阅读 361评论 0 1
  • 1.class 和 id 的使用场景? 类选择器允许以一种独立于文档元素的方式来指定样式。该选择器可以单独使用,也...
    草鞋弟阅读 2,316评论 0 1
  • class 和 id 的使用场景? 每个标签只能设置一个id,此id在页面中只能出现一次。id多用于页面分块时块级...
    cross_王阅读 405评论 0 0
  • class 和 id 的使用场景 class:一个标签可以有多个class且同一个class可以用到不同的标签上,...
    尾巴尾巴尾巴阅读 392评论 0 0