I have two width declarations. Which one will get applied?
Let's say we have a HTML page which has the structure as
<html>
<body>
<table id="myTable">
</table>
</body>
</html>
Now I have a CSS defined as;
#myTable {width:100%;width:900px;}
Now my question is this table is indirectly also affected by the viewport (or available browser space) S开发者_开发知识库o what out of the 2 values (px or %) would win ? That is how much space would the table actually take in the layout ? If current browser space is, say 1000px, would it take that value (which means 100% overriding 900 px value) At a broader level, can we generalize this working that % or px value always wins ? Would this depend on the DOCTYPE that is set ?
So what out of the 2 values (px or %) would win ?
The pixel width would win, but not because it is defined with a pixel unit.
Since the two rules appear in the same ruleset, their selectors have equal specificity (because they are identical), so the last one wins.
The choice of units is irrelevant.
px will win it will go with 900px instead of 100% of width i dont know the reason but i have test it
px will win the reason behind that is the last value is in px. Whenever a css file is detected it is checked from top to bottom and whatever it found in the last is applied. for example
we have
#home {width:100%;color:#fffccc;}
Then again at the bottom we define
#home {width:100%;color:red;}
The element with id home will have red as color for their font.
In CSS, always the last defined style wins unless the before one has !important.
For example
.myClass{
width: 200px;
width: 400px;
}
In this case the width would be 400px as it the rule that appears last when the CSS is parsed.
.myClass{
width: 200px !important;
width: 400px;
}
In this case the width would be 200px as it the rule is made important
加载中,请稍侯......
精彩评论