-
Notifications
You must be signed in to change notification settings - Fork 1
/
css-specificity.html
790 lines (444 loc) · 34.8 KB
/
css-specificity.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
<!doctype html>
<html class="theme-next mist use-motion">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css" />
<link href="/lib/font-awesome/css/font-awesome.min.css?v=4.4.0" rel="stylesheet" type="text/css" />
<link href="/css/main.css?v=5.0.1" rel="stylesheet" type="text/css" />
<meta name="keywords" content="前端,css,specificity," />
<link rel="alternate" href="/atom.xml" title="清风轩" type="application/atom+xml" />
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico?v=5.0.1" />
<meta name="description" content="一个元素，其对应的CSS选择可以有很多个。如果同一个元素的某个样式，使用了两个不同的CSS选择器进行定义，那么最终使用的到底是哪一个呢？于是这里就引入了一个概念，最初叫做cascade order，后来的官方文档中间叫做specificity。这个单词翻译成中文叫做特异性、特性，其概念与C语言中运算符的优先级类似，所以也称之为CSS优先级。">
<meta property="og:type" content="article">
<meta property="og:title" content="CSS权重">
<meta property="og:url" content="http://xovel.cn/article/css-specificity.html">
<meta property="og:site_name" content="清风轩">
<meta property="og:description" content="一个元素，其对应的CSS选择可以有很多个。如果同一个元素的某个样式，使用了两个不同的CSS选择器进行定义，那么最终使用的到底是哪一个呢？于是这里就引入了一个概念，最初叫做cascade order，后来的官方文档中间叫做specificity。这个单词翻译成中文叫做特异性、特性，其概念与C语言中运算符的优先级类似，所以也称之为CSS优先级。">
<meta property="og:updated_time" content="2016-11-18T07:00:40.092Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="CSS权重">
<meta name="twitter:description" content="一个元素，其对应的CSS选择可以有很多个。如果同一个元素的某个样式，使用了两个不同的CSS选择器进行定义，那么最终使用的到底是哪一个呢？于是这里就引入了一个概念，最初叫做cascade order，后来的官方文档中间叫做specificity。这个单词翻译成中文叫做特异性、特性，其概念与C语言中运算符的优先级类似，所以也称之为CSS优先级。">
<script type="text/javascript" id="hexo.configuration">
var NexT = window.NexT || {};
var CONFIG = {
scheme: 'Mist',
sidebar: {"position":"left","display":"post"},
fancybox: true,
motion: true,
duoshuo: {
userId: 0,
author: '博主'
}
};
</script>
<title> CSS权重 | 清风轩 </title>
</head>
<body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans">
<div style="display: none;">
<script src="http://s6.cnzz.com/stat.php?id=1259096563&web_id=1259096563" type="text/javascript"></script>
</div>
<div class="container one-collumn sidebar-position-left page-post-detail ">
<div class="headband"></div>
<header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
<div class="header-inner"><div class="site-meta ">
<div class="custom-logo-site-title">
<a href="/" class="brand" rel="start">
<span class="logo-line-before"><i></i></span>
<span class="site-title">清风轩</span>
<span class="logo-line-after"><i></i></span>
</a>
</div>
<p class="site-subtitle">清风轩居 - 引仙阁</p>
</div>
<div class="site-nav-toggle">
<button>
<span class="btn-bar"></span>
<span class="btn-bar"></span>
<span class="btn-bar"></span>
</button>
</div>
<nav class="site-nav">
<ul id="menu" class="menu">
<li class="menu-item menu-item-home">
<a href="/" rel="section">
<i class="menu-item-icon fa fa-fw fa-home"></i> <br />
首页
</a>
</li>
<li class="menu-item menu-item-categories">
<a href="/categories" rel="section">
<i class="menu-item-icon fa fa-fw fa-th"></i> <br />
分类
</a>
</li>
<li class="menu-item menu-item-tags">
<a href="/tags" rel="section">
<i class="menu-item-icon fa fa-fw fa-tags"></i> <br />
标签
</a>
</li>
<li class="menu-item menu-item-archives">
<a href="/archives" rel="section">
<i class="menu-item-icon fa fa-fw fa-archive"></i> <br />
归档
</a>
</li>
<li class="menu-item menu-item-about">
<a href="/about" rel="section">
<i class="menu-item-icon fa fa-fw fa-user"></i> <br />
关于
</a>
</li>
<li class="menu-item menu-item-garden">
<a href="/garden" rel="section">
<i class="menu-item-icon fa fa-fw fa-life-ring"></i> <br />
花园
</a>
</li>
</ul>
</nav>
</div>
</header>
<main id="main" class="main">
<div class="main-inner">
<div class="content-wrap">
<div id="content" class="content">
<div id="posts" class="posts-expand">
<article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
<header class="post-header">
<h1 class="post-title" itemprop="name headline">
CSS权重
</h1>
<div class="post-meta">
<span class="post-time">
<span class="post-meta-item-icon">
<i class="fa fa-calendar-o"></i>
</span>
<span class="post-meta-item-text">发表于</span>
<time itemprop="dateCreated" datetime="2016-05-27T17:41:51+08:00" content="2016-05-27">
2016-05-27
</time>
</span>
<span class="post-category" >
|
<span class="post-meta-item-icon">
<i class="fa fa-folder-o"></i>
</span>
<span class="post-meta-item-text">分类于</span>
<span itemprop="about" itemscope itemtype="https://schema.org/Thing">
<a href="/categories/web/" itemprop="url" rel="index">
<span itemprop="name">WEB</span>
</a>
</span>
，
<span itemprop="about" itemscope itemtype="https://schema.org/Thing">
<a href="/categories/web/css/" itemprop="url" rel="index">
<span itemprop="name">CSS</span>
</a>
</span>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<h3 id="起因"><a href="#起因" class="headerlink" title="起因"></a>起因</h3><p>我为什么要做这样一个文章？</p>
<p>触发我讨论这个问题的导火线来自于我的个人博客采用的hexo主题中<a href="https://github.com/iissnan/hexo-theme-next/issues/910" target="_blank" rel="external">内容页图片居中问题</a>。当时眼睛花了，没看清CSS代码，但也因此牵扯出来一些关于CSS权重（也叫做CSS优先级）的问题。</p>
<p>经过参阅了一些现有的资料与文献，蓦一回头，发现很多经验总结其实并不完善。</p>
<h3 id="CSS权重的定义"><a href="#CSS权重的定义" class="headerlink" title="CSS权重的定义"></a>CSS权重的定义</h3><p>一个元素，其对应的CSS选择可以有很多个。如果同一个元素的某个样式，使用了两个不同的CSS选择器进行定义，那么最终使用的到底是哪一个呢？于是这里就引入了一个概念，最初叫做<code>cascade order</code>，后来的官方文档中间叫做<code>specificity</code>。这个单词翻译成中文叫做<code>特异性</code>、<code>特性</code>，其概念与C语言中运算符的优先级类似，所以也称之为CSS优先级。</p>
<p>由于CSS选择器可以很长很复杂，单一的优先级的参数并不能直接表示，还需要与其对应的数量相乘。在数学统计学里，这个概念叫做加权。</p>
<blockquote>
<p>某个学科的最终成绩分为两部分：平时分和考试分。假设平时分所占的权重为30%，考试成绩所占的权重为70%。现有一名学生，平时分为60，考试分为90。那么其常规平均成绩为(60+90)/2=75；加权成绩为60*30%+90*70%=81。</p>
</blockquote>
<p>CSS权重这一概念与加权值类似，那么它的具体计算方式是什么呢？</p>
<h3 id="CSS权重的计算"><a href="#CSS权重的计算" class="headerlink" title="CSS权重的计算"></a>CSS权重的计算</h3><h4 id="CSS1"><a href="#CSS1" class="headerlink" title="CSS1"></a>CSS1</h4><p>在<a href="https://www.w3.org/TR/REC-CSS1/#cascading-order" target="_blank" rel="external">CSS1</a>中，将优先级分为了三组：</p>
<blockquote>
<p>To find the specificity, count the number of ID attributes in the selector (a), the number of CLASS attributes in the selector (b), and the number of tag names in the selector (c). Concatenating the three numbers (in a number system with a large base) gives the specificity.</p>
</blockquote>
<ul>
<li>a：ID选择器</li><li>b：类名选择器</li><li>c：标签选择器</li></ul>
<p>根据具体选择器中a、b、c三组分别出现的数量，依次进行计算，最终得出优先级权重排序。</p>
<p>示例：</p>
<pre><code>LI {...} /* a=0 b=0 c=1 -> specificity = 1 */
UL LI {...} /* a=0 b=0 c=2 -> specificity = 2 */
UL OL LI {...} /* a=0 b=0 c=3 -> specificity = 3 */
LI.red {...} /* a=0 b=1 c=1 -> specificity = 11 */
UL OL LI.red {...} /* a=0 b=1 c=3 -> specificity = 13 */
#x34y {...} /* a=1 b=0 c=0 -> specificity = 100 */
</code></pre><h4 id="CSS2"><a href="#CSS2" class="headerlink" title="CSS2"></a>CSS2</h4><p>在<a href="https://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#specificity" target="_blank" rel="external">CSS2</a>中，加入了行内样式，之前的三组变为四组：</p>
<ul>
<li>a：行内样式。由于已经是对应元素了，所以就没有选择器了，后面三组的值均为0。</li><li>b：ID选择器。</li><li>c：除ID之外的其他属性，如<code>.classname</code>、<code>[href]</code>；伪类，如<code>:active</code>、<code>:first-child</code>；不包含伪元素。</li><li>d：标签选择器；伪元素，如<code>:first-letter</code>、<code>:before</code></li><li>忽略通配符<code>*</code>，即abcd值均为0</li></ul>
<p>示例：</p>
<pre><code>* {} /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
li {} /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
li:first-line {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul li {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul ol+li {} /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
ul ol li.red {} /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
li.red.level {} /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
#x34y {} /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
style="" /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */
</code></pre><blockquote>
<ul>
<li>即使选择器中使用的是<code>[id="foo"]</code>，它也只是一个<strong>属性选择器</strong>，ID选择器<code>#foo</code>的优先级依然较高。</li><li><del>选择器<code>.bar[class="bar"]</code>计算为2个。</del></li><li><del>同一个选择器使用了多次均进行计算。比如<code>.foo.foo.foo</code>计算为3个、<code>[title][title]</code>计算为2个。</del></li></ul>
</blockquote>
<h4 id="CSS3"><a href="#CSS3" class="headerlink" title="CSS3"></a>CSS3</h4><p>在<a href="https://www.w3.org/TR/2011/REC-css3-selectors-20110929/#specificity" target="_blank" rel="external">CSS3</a>中，行内样式单独计算，优先级高于选择器。分组变为三组：</p>
<ul>
<li>a：ID选择器</li><li>b：除ID之外的其他属性，如<code>.classname</code>、<code>[href]</code>；伪类，如<code>:active</code>、<code>:first-child</code>；不包含伪元素。</li><li>c：标签选择器以及伪元素，如<code>:first-letter</code>、<code>:before</code></li><li>忽略通配符<code>*</code></li></ul>
<blockquote>
<p>本质上跟CSS2里面的规则是一样的。</p>
</blockquote>
<p>示例：</p>
<pre><code>* /* a=0 b=0 c=0 -> specificity = 0 */
LI /* a=0 b=0 c=1 -> specificity = 1 */
UL LI /* a=0 b=0 c=2 -> specificity = 2 */
UL OL+LI /* a=0 b=0 c=3 -> specificity = 3 */
H1 + *[REL=up] /* a=0 b=1 c=1 -> specificity = 11 */
UL OL LI.red /* a=0 b=1 c=3 -> specificity = 13 */
LI.red.level /* a=0 b=2 c=1 -> specificity = 21 */
#x34y /* a=1 b=0 c=0 -> specificity = 100 */
#s12:not(FOO) /* a=1 b=0 c=1 -> specificity = 101 */
</code></pre><blockquote>
<p>在线演示：<a href="http://runjs.cn/code/mkk1w1x5" target="_blank" rel="external">Test 1</a></p>
</blockquote>
<h4 id="被忽略的"><a href="#被忽略的" class="headerlink" title="被忽略的"></a>被忽略的</h4><p>选择器中以下部分在计算优先级时将被忽略：</p>
<ul>
<li>通配符<code>*</code></li><li>连接符<code>+</code>、<code>' ' </code>(空格)、<code>~</code>、<code>></code></li><li>否定伪类<code>:not()</code></li></ul>
<blockquote>
<p>否定伪类(the negation pseudo-class)即<code>:not()</code>在计算优先级时将被忽略，但是其包含的选择器将被作为正常的选择器加入到整体的优先级计算中。如<code>p:not(.more)</code>这条规则在实际计算中将当成<code>p.more</code>进行优先级计算。</p>
</blockquote>
<h4 id="逗号分隔符"><a href="#逗号分隔符" class="headerlink" title="逗号分隔符,"></a>逗号分隔符<code>,</code></h4><p><del>有部分文章指出，使用逗号分隔符的选择器，里面的所有部分都进入最终的权重计算</del>。<strong>没有这回事</strong>，逗号分隔符所隔开的每个选择器将<strong>单独</strong>进行计算。</p>
<h4 id="同权重的情形"><a href="#同权重的情形" class="headerlink" title="同权重的情形"></a>同权重的情形</h4><p>根据CSS样式被定义的顺序决定优先级，后面的将会覆盖前面定义过的，一句话概括就是<strong>后来者居上</strong>。</p>
<ul>
<li>页内样式<code><style>...</style></code>与外联方式<code><link rel="stylesheet" type="text/css" href="..."></code>同样比较谁后应用，摆放在后面的具有更高优先级。</li><li>在<code>import</code>即文件引入方法中，被引入的文件优先级<strong>仅次于</strong>引用的。<strong>不建议使用import方法</strong>，请参阅：<a href="https://gtmetrix.com/avoid-css-import.html" target="_blank" rel="external">PageSpeed: Avoid CSS @import</a>、<a href="http://www.programering.com/a/MjM4kTMwATM.html" target="_blank" rel="external">Why does not recommend the use of CSS @import</a></li></ul>
<h4 id="关于一个小BUG"><a href="#关于一个小BUG" class="headerlink" title="关于一个小BUG"></a>关于一个小BUG</h4><p>在网上曾有这样的CSS权重计算说明：</p>
<blockquote>
<p>内联样式的权重值是1000，ID选择器的权重值是100，class选择器的权重值是10，标签选择器的权重值是1。整条规则中的所有选择器权重值相加得到整个样式规则的权重值，数字越大权重值越高。</p>
</blockquote>
<p>虽然总结的很不错，但是如果遇到以下的情形，岂不是就<del>懵逼</del>了？</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line"><span class="selector-tag">html</span> <span class="selector-tag">body</span> <span class="selector-tag">article</span> <span class="selector-tag">div</span> <span class="selector-tag">table</span> <span class="selector-tag">tr</span> <span class="selector-tag">td</span> <span class="selector-tag">p</span> <span class="selector-tag">a</span> <span class="selector-tag">span</span> <span class="selector-tag">i</span>{ <span class="attribute">color</span>: black; }</div><div class="line"><span class="selector-class">.icon-text</span>{ <span class="attribute">color</span>: white; }</div></pre></td></tr></table></figure>
<p>那么问题来了：如果以上两条选择器对应着同一个元素，那么它的颜色到底是什么呢？</p>
<ul>
<li><del>我不会告诉你它是白色的</del></li><li><del>竟然用了11个标签名字</del></li><li><del>会不会有人用11个类名呢</del></li><li><del>据说这样的错误的经验同样出现在了《CSS 权威指南》一书中，<strong>第二版已修复</strong></del></li><li><del>我的确是钻牛角尖咯</del></li></ul>
<blockquote>
<p>在线演示：<a href="http://runjs.cn/code/1nyatoxb" target="_blank" rel="external">Test 2</a></p>
</blockquote>
<h4 id="目空一切的-important"><a href="#目空一切的-important" class="headerlink" title="目空一切的!important"></a>目空一切的<code>!important</code></h4><p><code>!important</code>规则在CSS中是一个神奇的存在，它目空一切，凌驾于其他所有规则之上。一般计算机语言中，感叹号表示取非、否定，然而CSS特立独行，专门使用<code>!important</code>来提升存在感。我们可以将这个感叹号理解为<strong>着重强调</strong>。</p>
<ul>
<li>多个<code>!important</code>怎么计算？<ul>
<li>按上面的规则计算权重。这里要建议一下，一个元素的css样式上只出现一个<code>!important</code>，就像HTML代码中每个元素只给定一个<code>ID</code>一样。<del>当然，你非要给定多个ID那也随你咯。</del></li></ul>
</li><li>IE6不支持<code>!important</code><ul>
<li><del>不支持拉倒</del></li></ul>
</li><li><strong>不建议使用<code>!important</code>方法</strong>，<del>免得一不小心弄了很多个出来，显得尴尬</del>。详情请参阅：<a href="https://www.smashingmagazine.com/2010/11/the-important-css-declaration-how-and-when-to-use-it/" target="_blank" rel="external">!important CSS Declarations: How and When to Use Them</a></li></ul>
<h4 id="继承inherite"><a href="#继承inherite" class="headerlink" title="继承inherite"></a>继承<code>inherite</code></h4><p>关于CSS样式继承，由于并非元素本身的样式定义，所以连个优先级都谈不上，其优先级将被直接忽略。</p>
<h4 id="“诡异”的伪元素"><a href="#“诡异”的伪元素" class="headerlink" title="“诡异”的伪元素"></a>“诡异”的伪元素</h4><p>我们先来看一下一段CSS代码：<br><figure class="highlight css"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="selector-tag">p</span><span class="selector-pseudo">:first-letter</span>{<span class="attribute">color</span>:red;}</div></pre></td></tr></table></figure></p>
<p>对应的HTML代码：<br><figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="tag"><<span class="name">p</span>></span><span class="tag"><<span class="name">span</span> <span class="attr">style</span>=<span class="string">"color:cyan;"</span>></span>A<span class="tag"></<span class="name">span</span>></span>BCDEFG<span class="tag"></<span class="name">p</span>></span></div></pre></td></tr></table></figure></p>
<p>那么，这个字母A到底会是什么颜色呢？</p>
<blockquote>
<p>伪元素测试：<a href="http://runjs.cn/code/52lchoew" target="_blank" rel="external">Test 4</a></p>
</blockquote>
<p>从示例中可以看到，A字母的颜色并不是行内样式指定的青色<code>cyan</code>，而是红色<code>red</code>。</p>
<p>W3的官方文档<a href="https://www.w3.org/TR/2011/REC-css3-selectors-20110929/#pseudo-elements" target="_blank" rel="external">Selectors Level 3</a>中指出：</p>
<pre><code>p { color: red; font-size: 12pt }
p::first-letter { color: green; font-size: 200% }
p::first-line { color: blue }
<P>Some text that ends up on two lines</P>
</code></pre><p>以上的代码将会以下面的方式进行解析：</p>
<pre><code><P>
<P::first-line>
<P::first-letter>
S
</P::first-letter>ome text that
</P::first-line>
ends up on two lines
</P>
</code></pre><p>多个元素层叠的情况时，以下代码：</p>
<pre><code><div>
<p>The first text.
</code></pre><p>将被视作：</p>
<pre><code><div>
<p><div::first-letter><p::first-letter>T</...></...>he first text.
</code></pre><p>之后再计算其CSS规则，所以在<a href="http://runjs.cn/code/52lchoew" target="_blank" rel="external">Test 4</a>中可以看到即使指定了其行内样式，最终css样式应用的却是伪元素指定的那个。</p>
<blockquote>
<ul>
<li>After the rule p::before {content: “Note: “}, the selector p::first-letter matches the “N” of “Note”.</li><li>在before伪元素的内容里面，first-letter伪元素同样会进行匹配。</li></ul>
</blockquote>
<p>由于伪元素无法被常规选择器选中，所以其样式一般直接由伪元素选择器进行指定。<del>无敌就是寂寞。</del></p>
<p><em>更复杂的伪元素情形这里就不做深入讨论了。</em></p>
<h3 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h3><p>写了这么多，再做总结似乎也显得没什么必要。那么，本文到此结束。以下诸多资料请自行参考。<del>排序有先后，阅读请注意。</del></p>
<hr>
<h3 id="参考资料"><a href="#参考资料" class="headerlink" title="参考资料"></a>参考资料</h3><ul>
<li><a href="https://www.w3.org/TR/REC-CSS1/#cascading-order" target="_blank" rel="external">Cascading Style Sheets, level 1</a></li><li><a href="https://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#specificity" target="_blank" rel="external">Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</a></li><li><a href="https://www.w3.org/TR/2011/REC-css3-selectors-20110929/#specificity" target="_blank" rel="external">Selectors Level 3</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity" target="_blank" rel="external">Specificity - CSS | MDN</a></li><li><a href="https://designshack.net/articles/css/what-the-heck-is-css-specificity/" target="_blank" rel="external">What the Heck Is CSS Specificity?</a></li><li><a href="http://juicystudio.com/article/selector-specificity.php" target="_blank" rel="external">Selector Specificity</a></li><li><a href="http://www.w3cplus.com/css/css-specificity-things-you-should-know.html" target="_blank" rel="external">你应该知道的一些事情——CSS权重</a></li><li><a href="https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/comment-page-2/#comments" target="_blank" rel="external">CSS Specificity: Things You Should Know</a></li><li><a href="https://www.smashingmagazine.com/2010/11/the-important-css-declaration-how-and-when-to-use-it/" target="_blank" rel="external">!important CSS Declarations: How and When to Use Them</a></li><li><a href="http://ofcss.com/2011/05/26/css-cascade-specificity.html" target="_blank" rel="external">深入解析CSS样式层叠权重值</a></li><li><a href="https://stuffandnonsense.co.uk/archives/css_specificity_wars.html" target="_blank" rel="external">CSS: Specificity Wars</a></li><li><a href="http://www.htmlhelp.com/reference/css/structure.html" target="_blank" rel="external">CSS Structure and Rules</a></li><li><a href="http://blog.cssforest.org/2011/05/19/%E9%87%8D%E6%96%B0%E8%AE%A4%E8%AF%86CSS%E7%9A%84%E6%9D%83%E9%87%8D.html" target="_blank" rel="external">重新认识CSS的权重</a></li></ul>
</div>
<div>
</div>
<div>
</div>
<footer class="post-footer">
<div class="post-tags">
<a href="/tags/frontend/" rel="tag">#前端</a>
<a href="/tags/css/" rel="tag">#css</a>
<a href="/tags/specificity/" rel="tag">#specificity</a>
</div>
<div class="post-nav">
<div class="post-nav-next post-nav-item">
<a href="/article/how-technology-hijacks-poeples-minds.html" rel="next" title="科技公司如何用“方便”绑架了你的生活？">
<i class="fa fa-chevron-left"></i> 科技公司如何用“方便”绑架了你的生活？
</a>
</div>
<div class="post-nav-prev post-nav-item">
<a href="/article/http-status-code.html" rel="prev" title="HTTP 状态码">
HTTP 状态码 <i class="fa fa-chevron-right"></i>
</a>
</div>
</div>
</footer>
</article>
<div class="post-spread">
</div>
</div>
</div>
<div class="comments" id="comments">
<div class="ds-thread" data-thread-key="article/css-specificity.html"
data-title="CSS权重" data-url="http://xovel.cn/article/css-specificity.html">
</div>
</div>
</div>
<div class="sidebar-toggle">
<div class="sidebar-toggle-line-wrap">
<span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
<span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
<span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
</div>
</div>
<aside id="sidebar" class="sidebar">
<div class="sidebar-inner">
<ul class="sidebar-nav motion-element">
<li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap" >
文章目录
</li>
<li class="sidebar-nav-overview" data-target="site-overview">
站点概览
</li>
</ul>
<section class="site-overview sidebar-panel ">
<div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
<img class="site-author-image" itemprop="image"
src="/images/xovel.jpg"
alt="xovel" />
<p class="site-author-name" itemprop="name">xovel</p>
<p class="site-description motion-element" itemprop="description">缓缓之间，风云静变</p>
</div>
<nav class="site-state motion-element">
<div class="site-state-item site-state-posts">
<a href="/archives">
<span class="site-state-item-count">46</span>
<span class="site-state-item-name">日志</span>
</a>
</div>
<div class="site-state-item site-state-categories">
<a href="/categories">
<span class="site-state-item-count">15</span>
<span class="site-state-item-name">分类</span>
</a>
</div>
<div class="site-state-item site-state-tags">
<a href="/tags">
<span class="site-state-item-count">117</span>
<span class="site-state-item-name">标签</span>
</a>
</div>
</nav>
<div class="feed-link motion-element">
<a href="/atom.xml" rel="alternate">
<i class="fa fa-rss"></i>
RSS
</a>
</div>
<div class="links-of-author motion-element">
<span class="links-of-author-item">
<a href="https://github.com/xovel" target="_blank" title="github">
<i class="fa fa-fw fa-github"></i>
github
</a>
</span>
<span class="links-of-author-item">
<a href="http://hdk4.com" target="_blank" title="hdk4.com">
<i class="fa fa-fw fa-adjust"></i>
hdk4.com
</a>
</span>
</div>
<div class="cc-license motion-element" itemprop="license">
<a href="http://creativecommons.org/licenses/by-nc-sa/4.0" class="cc-opacity" target="_blank">
<img src="/images/cc-by-nc-sa.svg" alt="Creative Commons" />
</a>
</div>
</section>
<section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
<div class="post-toc">
<div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-3"><a class="nav-link" href="#起因"><span class="nav-number">1.</span> <span class="nav-text">起因</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#CSS权重的定义"><span class="nav-number">2.</span> <span class="nav-text">CSS权重的定义</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#CSS权重的计算"><span class="nav-number">3.</span> <span class="nav-text">CSS权重的计算</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#CSS1"><span class="nav-number">3.1.</span> <span class="nav-text">CSS1</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#CSS2"><span class="nav-number">3.2.</span> <span class="nav-text">CSS2</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#CSS3"><span class="nav-number">3.3.</span> <span class="nav-text">CSS3</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#被忽略的"><span class="nav-number">3.4.</span> <span class="nav-text">被忽略的</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#逗号分隔符"><span class="nav-number">3.5.</span> <span class="nav-text">逗号分隔符,</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#同权重的情形"><span class="nav-number">3.6.</span> <span class="nav-text">同权重的情形</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#关于一个小BUG"><span class="nav-number">3.7.</span> <span class="nav-text">关于一个小BUG</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#目空一切的-important"><span class="nav-number">3.8.</span> <span class="nav-text">目空一切的!important</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#继承inherite"><span class="nav-number">3.9.</span> <span class="nav-text">继承inherite</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#“诡异”的伪元素"><span class="nav-number">3.10.</span> <span class="nav-text">“诡异”的伪元素</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#总结"><span class="nav-number">4.</span> <span class="nav-text">总结</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#参考资料"><span class="nav-number">5.</span> <span class="nav-text">参考资料</span></a></li></ol></div>
</div>
</section>
</div>
</aside>
</div>
</main>
<footer id="footer" class="footer">
<div class="footer-inner">
<div class="copyright" >
©
<span itemprop="copyrightYear">2016</span>
<span class="with-love">
<i class="fa fa-heart"></i>
</span>
<span class="author" itemprop="copyrightHolder">xovel</span>
</div>
<div class="powered-by">
由 <a class="theme-link" href="http://hexo.io" rel="external nofollow" target="_blank">Hexo</a> 强力驱动
</div>
<div class="theme-info">
主题 -
<a class="theme-link" href="https://github.com/iissnan/hexo-theme-next" rel="external nofollow" target="_blank">
NexT.Mist
</a>
</div>
</div>
</footer>
<div class="back-to-top">
<i class="fa fa-arrow-up"></i>
</div>
</div>
<script type="text/javascript">
if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
window.Promise = null;
}
</script>
<script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script>
<script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>
<script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>
<script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script>
<script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>
<script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
<script type="text/javascript" src="/js/src/utils.js?v=5.0.1"></script>
<script type="text/javascript" src="/js/src/motion.js?v=5.0.1"></script>
<script type="text/javascript" src="/js/src/scrollspy.js?v=5.0.1"></script>
<script type="text/javascript" src="/js/src/post-details.js?v=5.0.1"></script>
<script type="text/javascript" src="/js/src/bootstrap.js?v=5.0.1"></script>
<script type="text/javascript">
var duoshuoQuery = {short_name:"xovel"};
(function() {
var ds = document.createElement('script');
ds.type = 'text/javascript';ds.async = true;
ds.id = 'duoshuo-script';
ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
ds.charset = 'UTF-8';
(document.getElementsByTagName('head')[0]
|| document.getElementsByTagName('body')[0]).appendChild(ds);
})();
</script>
</body>
</html>