zoukankan      html  css  js  c++  java
  • 关于设置img图片大小优先级的问题

      今天在学jquery时,对于 img 标签引入的图片设置大小时,出现了点问题。初学CSS时,都知道:内联样式优先级>嵌入样式优先级>外部引用样式优先级。首先看如下代码:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4 <meta charset="UTF-8">
     5 <title>test</title>
     6 <style>
     7     img{
     8            height:500px;
     9     }
    10 </style>
    11 </head>
    12 <body>
    13 <img height=300px style="height:200px" src="images/11509591.jpg" alt="小狗">
    14 </body>
    15 </html>

      代码运行后,图片 height=200px,也就是说内联样式优先级最高。再看如下代码:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>test</title>
     6     <style>
     7         img{
     8             height:500px;
     9         }
    10     </style>
    11 </head>
    12 <body>
    13     <img height=200px src="images/11509591.jpg" alt="小狗">
    14 </body>
    15 </html>

      代码运行后,图片 height=500px,也就是说嵌入样式优先级高于标签本身的属性。再研究下id选择器丶类class选择器和标签选择器的优先级,代码如下:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>test</title>
     6     <style>
     7         img{
     8             height:200px;
     9         }
    10         #pic{
    11             height:300px;
    12         }
    13         .po{
    14             height:400px;
    15         }
    16     </style>
    17 </head>
    18 <body>
    19     <img id='pic' class="po"  src="images/11509591.jpg" alt="小狗">
    20 </body>
    21 </html>

      运行后,图片 height=300px,也就是说id选择器优先级最高;再注释掉 10-12行代码,运行后height=400px,也就是类class选择器次之。

      综上:内联样式>嵌入样式>标签本身属性;

      选择器的优先级:id选择器>类class选择器>标签选择器

  • 相关阅读:
    perl的eval语句
    PythonWin运行出错解决办法
    python多重继承
    perl调用shell
    python正则表达式匹配中文
    perl学习2处理用户输入
    awk介绍
    perl学习3qw及数组的应用
    perl的多线程
    perl学习5子程序中自动识别参数
  • 原文地址:https://www.cnblogs.com/wangmengjun/p/7233336.html
Copyright © 2011-2022 走看看