HTML/CSS/Style Basics/Selector priority — различия между версиями
Admin (обсуждение | вклад) м (1 версия) |
|
(нет различий)
| |
Текущая версия на 08:17, 26 мая 2010
Содержание
- 1 Cascade Order
- 2 !important has higher priority
- 3 Latter one overwrite the former one
- 4 select elements by type, class, and/or ID
- 5 Selectors choose the element to apply formatting to
- 6 Six selector groups listed from highest to lowest priority:
- 7 Some properties in CSS are inherited to children elements
- 8 Specificity, !important
- 9 Specificity means that more specific selectors are given priority over less specific selectors
- 10 Style is overwritable
- 11 the id selector is more specific than the element selector
Cascade Order
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
* {
border: 0px solid black;
}
div {
border: 2px solid black;
}
* .c10 {
border: 4px solid black;
}
#i100 {
border: 6px solid black;
}
* {
border: 8px solid black !important;
}
div {
border: 10px solid black !important;
}
* .c10 {
border: 12px solid black !important;
}
#i100 {
border: 14px solid black !important;
}
</style>
</head>
<body>
<div id="i100" class="c10">!important has highest priority.</div>
</body>
</html>
!important has higher priority
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Specificity, !important</title>
<style rel="stylesheet" type="text/css">
body {
font-size: 24px;
}
p {
background: lightblue !important;
}
p {
background: none;
}
</style>
</head>
<body>
<p>
This paragraph has a lightblue background.
</p>
<p>
This paragraph also has a lightblue background.
</p>
</body>
</html>
Latter one overwrite the former one
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Specificity</title>
<style rel="stylesheet" type="text/css">
body {
font-size: 24px;
}
p {
background: none;
}
p {
background: yellow;
}
</style>
</head>
<body>
<p>
a yellow background.
</p>
<p>
a yellow background.
</p>
</body>
</html>
select elements by type, class, and/or ID
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
p {
border: 2px solid black;
}
* .my-class1 {
padding: 10px;
}
* .my-class2 {
letter-spacing: 0.11em;
}
#my-id {
background-color: #ccc;
}
</style>
</head>
<body>
<h1>Type, Class, and ID Selectors</h1>
<p>The type selector, <code>p</code>, adds a border to all paragraphs.</p>
<p class="my-class1">
The class selector, <code>*.my-class1</code>, adds padding.</p>
<p class="my-class1 my-class2">
The class selector, <code>*.my-class2</code>, adds letter-spacing.</p>
<p class="my-class1 my-class2" id="my-id">
The ID selector, <code>#my-id</code>, adds a background color. </p>
</body>
</html>
Selectors choose the element to apply formatting to
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/xhtml; charset=windows-1252" />
<meta http-equiv="content-language" content="en-us" />
<title>Selectors and Grouping</title>
<style type="text/css" media="all">
p {
font-family: Arial;
font-size: 14pt;
}
h1 {
color: black;
border: 5px solid black;
}
h2 {
color: orange;
border: 4px solid orange;
}
h3 {
color: blue;
border: 3px solid blue;
}
h1, h2, h3 {
letter-spacing: 5px;
padding: 10px;
border: 3px solid red;
}
</style>
</head>
<body>
<h1>
Heading 1
</h1>
<h2>
Heading 2
</h2>
<h3>
Heading 3
</h3>
<p>
This is a test.
</p>
</body>
</html>
Six selector groups listed from highest to lowest priority:
1. group contains rules with !important.
2. group contains rules embedded in the style attribute.
3. group contains rules that have one or more ID selectors.
4. group contains rules that have one or more class, attribute, or pseudo selectors.
5. group contains rules that have one or more element selectors.
6. group contains rules that have only a universal selector.
Some properties in CSS are inherited to children elements
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Inheritance</title>
<style rel="stylesheet" type="text/css">
body {
font-size: 24px;
}
div,
div * {
color: crimson;
text-align: right;
border: 1px solid crimson;
padding: 10px;
}
</style>
</head>
<body>
<div>
<h1>Inheritance</h1>
<p>
The <h1> heading and the
<p> element inherit color and alignment from the
<div>, but not the border and the padding.
</p>
</div>
</body>
</html>
Specificity, !important
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Specificity, !important</title>
<style rel="stylesheet" type="text/css">
body {
font: 24px sans-serif;
}
p {
background: pink !important;
}
</style>
</head>
<body>
<p style="background: lightblue;">
a pink background.
</p>
</body>
</html>
Specificity means that more specific selectors are given priority over less specific selectors
<html>
<head>
<title>Specificity</title>
<style type="text/css">
body {
background-color: red;
font-size: 1.3em;
color: white;
font-family: Arial, sans-serif;
}
p {
color: navy;
}
p b {
color: white;
}
b#cyan {
color: cyan;
}
</style>
</head>
<body>
<h1>Specificity:</h1>
<p><i><b id="cyan">Specificity</b></i> means that more <b>"specific"</b>
selectors are given priority over less specific selectors.</p>
</body>
</html>
Style is overwritable
<html>
<head>
<title>Practice</title>
<style>
body {
font-size: 2em;
}
p {
color: blue;
}
p {
color: red;
}
p {
color: green;
}
p {
color: magenta;
}
</style>
<body>
<p>This is magenta colored text</p>
</body>
</html>
the id selector is more specific than the element selector
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Specificity</title>
<style rel="stylesheet" type="text/css">
body {
font-size: 24px;
}
p#none {
background: red;
}
p {
background: yellow;
}
</style>
</head>
<body>
<p>
This paragraph has a yellow background.
</p>
<p id="none">
the id selector is more specific than the element selector.
</p>
</body>
</html>