CSS层叠顺序不工作

多样式将级联成一个：可以指定CSS层叠顺序不工作

样式：

inside an HTML element 
inside the head section of an HTML page 
in an external CSS file

提示：即使多个外部样式表可以在一个HTML文档中被引用。层叠订单

如果为HTML元素指定了多种样式，将使用什么样式？

一般来说，我们可以说，所有的风格将“连带”到一个新的“虚拟”的风格由下面的规则表，其中排名第四的具有最高优先级：

Browser default 
External style sheet 
Internal style sheet (in the head section) 
Inline style (inside an HTML element)

因此，内联样式（在HTML元素中）具有最高的优先级，这意味着它将覆盖头标记内或外部样式表或浏览器中定义的样式（默认值）。参考文献Here。

但这里CSS中工作得相反：

<head> 
<style> 
.thumbnail 
{ 
float:left; 
width:110px; 
height:90px; 
margin:5px; 
} 
</style> 
</head> 

<img class="thumbnail" src="klematis_small.jpg" width="107px" height="100px"> 
<img class="thumbnail" src="klematis2_small.jpg" width="107px" height="80px">

宽度和IMG的高度从内部样式表采取即，一个在头部标记中定义的宽度和高度的

来源

2013-05-10 Maizere Pathak.Nepal

'width =“107px”'不是css。 – 2013-05-10 19:30:28

值应是数字width="107"或％width="100%"和属性是内嵌样式将style="width:107px"

来源

2013-05-10 19:29:12

width和您的img元素中的是HTML属性。
你引用的参考是关于HTML属性的风格，如：
```
<img style='width: 1337px; height: 42px' (...)> 
```

前者具有低优先级：它会通过可能适用相信任何CSS指令风格;它是HTML代码。后者具有相当高的优先级。

来源

2013-05-10 19:29:27 FelipeAls

@FelipseAls我错了，感谢信息 – 2013-05-10 19:32:42

不客气。另一个例子是textarea的'rows'和'cols'属性被CSS中的宽度和高度覆盖。虽然在这里他们没有相同的名字，所以它不那么令人困惑;） – FelipeAls 2013-05-10 19:35:45

我想你是错的。您在img元素中使用的是HTML属性，而不是内联样式。内联样式具有最高特异性（除了获得更高特异性的用!important表示的任何CSS声明外），但html属性没有如此高的特异性，因为它们甚至不是CSS。

来源

2013-05-10 19:30:44

“style”属性以外的html标签内部的属性不是css的一部分。

CSS级联和优先级规则相当复杂，但这里是我所走的一般优先级决不会涵盖所有内容。

一般CSS优先级：使用样式标签使用元素ID使用元素类或标签名应用

样式应用

样式直接应用于元素

Style标签
CSS包含或样式标签优先级：

当涉及到在页面中包含CSS优先级从最后到第一。如果这两种风格都包含在这个序列中，那么主体颜色将是红色的。
```
<style> 

    body { 
     background-color: blue; 
    } 

</style> 

<style> 

    body { 
     background-color: red; 
    } 

</style> 
```

来源

2013-05-10 19:39:23 zachzurn

CSS层叠顺序不工作

回答

相关问题