Rumah > hujung hadapan web > html tutorial > css类选择器类名覆盖优先级实例详解

css类选择器类名覆盖优先级实例详解

零下一度
Lepaskan: 2017-06-24 13:47:56
asal
2316 orang telah melayarinya
  • code

    <style>
       .a{
      background: red;
       }
       .b{
      background: yellow;
       }
    </style>
    <div class="a b">A</div>
    Salin selepas log masuk
  • 渲染效果
    css类选择器类名覆盖优先级实例详解

    最初以为更改元素中class类里面的类名顺序,渲染效果就会根据类名顺序依次渲染

  • code

    <style>
       .a{
      background: red;
       }
       .b{
      background: yellow;
       }
    </style>
    <div class="b a">A</div>
    Salin selepas log masuk
  • 渲染效果
    css类选择器类名覆盖优先级实例详解

    更改元素class里面类名的顺序并不能影响渲染顺序

  • code

       <style>
       .b{
      background: yellow;
       }
       .a{
      background: red;
       }
       </style>
    <div class="a b">A</div>
    Salin selepas log masuk
  • 渲染效果
    css类选择器类名覆盖优先级实例详解

    更改样式表里类的顺序 渲染顺序受到影响

    结论:两个类中有同样的属性覆盖顺序是css样式表从下往上的顺序

Atas ialah kandungan terperinci css类选择器类名覆盖优先级实例详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan