difference between body and * in css
what is the differe开发者_开发百科nce between
body{
background: #4b4b4b;
}
and
*{
background: #4b4b4b;
}
which has higher priority?
The body selector has higher priority, but the * selector applies more broadly, so in <body>foo<p>bar</p></body> the body selector will determine the background of the text foo, but the * selector will determine the background of the <p> element.
Note, also that many browsers create an element around the <body> that includes its margins and scrollbars, so the * selector may also determine the color of that region.
body selects the body element, * selects all elements.
Out of those two, body has higher priority.
What is the difference?
body is an element selector (selects an element body) while * is a universal selector (selects all elements).
Which has higher specificity (the proper term for priority)?
When calculating specificity of a selector (Think of it as a binary number):
- If it's an inline style declaration you add
1000. - For every id attribute value you add
0100. - For every class attribute value, attribute selection or pseudo-class you add
0010 - For every element and pseudo element you add
0001. - For every combinator or universal selector you add
0000. - If it's an inherited declartion it has no specificity.
Thus the specificity of body is 0001 and the specificity of * is 0000. body wins.
Some HTML elements have a default background color, such as <input>, <select>, etc. Using * will affect them as well instead of only the <body> and all children with a transparent background.
- do not use * universal selector and it is not a standard way
- body background applies only full body background and * background means apply same background to all element inside body
- now a days in css3 uses reset css and main style css separately
加载中,请稍侯......
精彩评论