1. Common Selectors
1.1. type(类型)<element selector or simple>
particular type of element, such as a <p> <a>...
p {color: black;}
a {text-decoration: underline;}
1.2. descendant(后代).target the descendants of a particular element or group
of elements. A descendant selector is indicated by a space between two other selectors
p a {text-decoration: none;}
1.3. ID selector & class selector
will target elements with the corresponding ID
or class name. ID selectors are identified using a hash character; class selectors are identified
with a period.
#intro {font-weight: bold;}
.datePosted {color: green;}
<p id="intro">Some Text</p>
<p class="datePosted">24/3/2006</p>
1.4. Pseudo-classes
to style an element based on something other than the structure of the document
/* makes all unvisited links blue */
a:link {color:blue;}
/* makes all visited links green */
a:visited {color:green;}
/* makes links red when hovered or activated */
a:hover, a:active {color:red;}
/* makes table rows red when hovered over */
tr:hover {background-color: red;}
/* makes input elements yellow when focus is applied */
input:focus {background-color:yellow;}
2. The universal selector
like a wildcard, matching all the available elements
* {
padding: 0;
margin: 0;
}
3. Advanced selectors (IE 6 not support)
3.1. child selector
Whereas a descendant selector
will select all the descendants of an element, a child selector only targets the element’s
immediate descendants
#nav > li {font-weight: bold;}
“fake” a child selector that works in IE 6 and below by using the universal selector.
#nav li {font-weight: bold;}
#nav li * {font-weight: normal;}
3.2. adjacent sibling selectors
h1 + p {font-weight: bold;}
<h1>Main Heading</h1>
<p>First Paragraph</p>
<p>Second Paragraph</p>
3.3. Attribute selectors
attribute selector allows you to target an element based on the
existence of an attribute or the attribute’s value.
abbr[title] {border-bottom: 1px dotted #999;}
abbr[title]:hover {cursor: help;}
a[rel="nofollow"] {
background-image: url(nofollow.gif);
padding-right: 20px;
}
------------------------------------------------------------------------------
4. The cascade and specificity
two or more rules will target the same element. CSS handles such conflicts through a process known as the cascade.
So the cascade works in the following order of importance:
User styles flagged as !important
Author styles flagged as !important
Author styles
User styles
Styles applied by the browser/user agent
4.1 Specificity
specificity is not calculated in base 10 but a high, unspecified, base number
style > ID > class > type(element)
5. Inheritance
Certain properties, such as color or font size, are inherited by the
descendants of the elements those styles are applied to.
p, div, h1, h2, h3, ul, ol, dl, li {color: black;}
when you can just write this:
body {color: black;}
padding:10px 四个边均为10px
h1 {padding: 10px 2% 15px 20px} padding-top padding-right padding-bottom padding-left
