【17】CSS基础(2)——选择器③选择器权重

★文章内容学习来源:拉勾教育大前端就业集训营

【17】CSS基础(2)——选择器③选择器权重

★最后有选择器部分的思维导图总结

一、为什么比较选择器权重?

因为:权重高的会层叠权重低的。(关于层叠性,后面会继续分享)

二、权重比较

(一)基础选择器的权重;

1.比较方法:根据选择范围,范围越大权重越小:
*<标签选择器<类选择器<id选择器
示例

<DOCTYPE html>
<html>
    <head>
       <title>基础选择器权重比较示例title>
       <style>
             .run {
      
                 color: blue;
             }
             span {
         /*虽然是后写的,当时标签选择器权重比类选择器权重小*/
                 color: red; /*所以最后颜色也是显示blue*/
             }
       style>
    head>
    <body>
            <p >今天做了瑜伽p>
            <span class="run">跑了步span>
    body>
html>

【17】CSS基础(2)——选择器③选择器权重_第1张图片

(二)高级选择器的权重;

1.比较步骤:
①依次比较组成高级选择器的id 的个数,类的个数,标签的个数,如果前面能够比较出大小就不再比较后面,如果前面相等就往后比较,直到比较出大小。
★比较顺序∶(id 个数类的个数标签的个数
②如果选择器权重都相同,需要比较CSS中代码的书写顺序,后写的层叠先写的。

示例1

<DOCTYPE html>
<html>
    <head>
       <title>高级选择器权重比较示例title>
       <style>
             .exercise  p.run {
         /*两个类,一个标签*/
                 color: blue;
             }
             .exercise .run {
         /*两个类*/
                  color: red;
              }
       style>
    head>
    <body>
        <div>
            <div>
               <p >今天真开心p>
               <p>学习使我快乐p>
               <p>继续加油p>
            div>
            <div class="exercise">
                <p>今天做了瑜伽p>
                <p class="run">跑了步p>
            div>
            <div>
                <p>今天吃了大盘鸡p>
                <p>喝了胡萝卜汁p>
            div>
        div>
    body>
html>

【17】CSS基础(2)——选择器③选择器权重_第2张图片
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
示例2

<DOCTYPE html>
<html>
    <head>
       <title>高级选择器权重比较示例title>
       <style>
             .exercise  p.run {
       /*两个类 一个标签*/
                 color: blue;
             }
            div .exercise .run {
       /*两个类,一个标签*/
                  color: red;    /*都一样权重,后写的层叠先写的*/
              }
       style>
    head>
    <body>
        <div>
            <div>
               <p >今天真开心p>
               <p>学习使我快乐p>
               <p>继续加油p>
            div>
            <div class="exercise">
                <p>今天做了瑜伽p>
                <p class="run">跑了步p>
            div>
            <div>
                <p>今天吃了大盘鸡p>
                <p>喝了胡萝卜汁p>
            div>
        div>
    body>
html>

【17】CSS基础(2)——选择器③选择器权重_第3张图片


选择器部分总结


★下篇继续:CSS基础(3)——层叠性和继承性…

你可能感兴趣的:(前端学习中,css)