HTML/CSS/Style Basics/Selector priority
Содержание
Cascade Order
<source lang="html4strict">
<!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>
</body> </html>
</source>
!important has higher priority
<source lang="html4strict">
<!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>
This paragraph has a lightblue background.
This paragraph also has a lightblue background.
</body>
</html>
</source>
Latter one overwrite the former one
<source lang="html4strict">
<!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>
a yellow background.
a yellow background.
</body>
</html>
</source>
select elements by type, class, and/or ID
<source lang="html4strict">
<!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>
Type, Class, and ID Selectors
The type selector, p, adds a border to all paragraphs.
The class selector, *.my-class1, adds padding.
The class selector, *.my-class2, adds letter-spacing.
The ID selector, #my-id, adds a background color.
</body> </html>
</source>
Selectors choose the element to apply formatting to
<source lang="html4strict">
<!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>
Heading 1
Heading 2
Heading 3
This is a test.
</body>
</html>
</source>
Six selector groups listed from highest to lowest priority:
<source lang="html4strict">
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.
</source>
Some properties in CSS are inherited to children elements
<source lang="html4strict">
<!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>
Inheritance
The <h1> heading and the <p> element inherit color and alignment from the <div>, but not the border and the padding.
</body>
</html>
</source>
Specificity, !important
<source lang="html4strict">
<!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>
a pink background.
</body>
</html>
</source>
Specificity means that more specific selectors are given priority over less specific selectors
<source lang="html4strict">
<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>
Specificity:
Specificity means that more "specific" selectors are given priority over less specific selectors.
</body> </html>
</source>
Style is overwritable
<source lang="html4strict">
<html> <head> <title>Practice</title> <style> body {
font-size: 2em;
} p {
color: blue;
} p {
color: red;
} p {
color: green;
} p {
color: magenta;
} </style> <body>
This is magenta colored text
</body> </html>
</source>
the id selector is more specific than the element selector
<source lang="html4strict">
<!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>
This paragraph has a yellow background.
the id selector is more specific than the element selector.
</body>
</html>
</source>
