search

zxdfe / FE-Interview

Every step counts
34 stars 1 forks source link

第3题：I'am here 的字体大小是多少？ #3

Open zxdfe opened 1 year ago

zxdfe commented 1 year ago 
<style type="text/css">
  #a {font-size:12px}
  div p{ font-size:13px } 
  div .c{ font-size:14px }
  .a .b .c{ font-size:15px }
  #b { font-size:16px }
</style>

<body>
  <div id="a" class="a">
    <div id="b" class="b">
      <p id="c" class="c">I’am here</p> 
    </div>
  </div>
</body>
z1291231323 commented 1 year ago

15px

zxdfe commented 1 year ago 
<style type="text/css">
  #a {font-size:12px}    //100   ==> 继承 ，权重为0
  div p{ font-size:13px }  // 2
  div .c{ font-size:14px }  //11
  .a .b .c{ font-size:15px }  //30
  #b{ font-size:16px }  // 100    ==> 继承，权重为0
</style>

<body>
  <div id="a" class="a">
    <div id="b" class="b">
      <p id="c" class="c">I’am here</p>  // 15px
    </div>
  </div>
</body>

CSS权重计算规则

1. 计算优先级的前提是选择器作用于相同的元素 2. 继承来的样式权重优先级最低，可视为0

HPinocchio commented 1 year ago

div .c 会找不到目标吗?

rupoly commented 1 year ago

15px， .c的权重最高

Moooodena commented 1 year ago

15px，算一下权重就好，第一个和最后一个都是继承，没有权重；

lemon-912 commented 1 year ago 

15px 记住继承权重为0 再依次算就行
BlueSky-Engineer commented 1 year ago

15px

DengZhaoQuan commented 1 year ago 

<style type="text/css">
  #a {font-size:12px}  //继承权重为0
  div p{ font-size:13px } // 1, 1
  div .c{ font-size:14px } //1, 10
  .a .b .c{ font-size:15px } // 10,10,10  √√√
  #b { font-size:16px } // 继承权重为0
</style>

<body>
  <div id="a" class="a">
    <div id="b" class="b">
      <p id="c" class="c">I’am here</p>  //15px
    </div>
  </div>
</body>
WLNCJL commented 1 year ago 
<style type="text/css">
  #a {font-size:12px} 权重为100
  div p{ font-size:13px }  权重为2
  div .c{ font-size:14px }  权重为11
  .a .b .c{ font-size:15px }  权重为30
  #b { font-size:16px }  权重100
</style>

<body>
  <div id="a" class="a">
    <div id="b" class="b">
      <p id="c" class="c">I’am here</p> 
    </div>
  </div>
</body>

通过权重判断以及去掉继承的，I’am here 的字体大小为15px

xcop32221 commented 1 year ago

15px

chenjiefe commented 1 year ago

15px

stevenhuanghr commented 1 year ago

.a .b .c的权重是300，其余都没有它大，所以字体大小为15px

Qian-e commented 1 year ago

15px

NeoArcle commented 1 year ago

a ----> id选择器，c继承，权重最低

div p ----> 标签选择器，c 继承，权重低 div .c ----> 标签选择器+类选择器，权重较低 .a .b .c ----> 类选择器+类选择器+类选择器，权重最高

b ----> id选择器，c继承，权重最低

因此 class .c 的css样式字体大小为15px

oldnaVuppe commented 1 year ago

15px

Cremei commented 1 year ago

b 100 --> 0

a 100 --> 0

但是#a和#b都没有选到I’am here的p标签，继承权重为0 div p 2 div .c 11 .a .b .c 30 .a .b .c{ font-size:15px } ==> 15px

类型 权重
!important 10000
行内(内联)样式,style="" 1000
ID选择器， #id 100
Class、伪类、属性选择器 :hover [type="text"] 10
标签选择器、伪元素选择器，如p、div、::before 1
通用选择器*； 子选择器 > ; 相邻选择器 + ； 同胞选择器 ~ ；继承选择器 0