Common selectors

Type selectors

p {color: black;}
a {text-decoration: underline;}
h1 {font-weight: bold;}

descendant selectors

li a {text-decoration: none;}

ID and class selectors

#intro {font-weight: bold;}
.datePosted {color: green;}
<p id="intro">Some Text</p>
<p class="datePosted">24/3/2006</p>

#mainContent h1 {font-size: 1.8em;}
#secondaryContent h1 {font-size: 1.2em;}
<div id="mainContent">
<h1>Welcome to my site</h1>
...
</div>
<div id="secondaryContent">
<h1>Latest news</h1>
...
</div>

Pseudo-classes

/* 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;}
???????
IE 6 對 :focus不支持

The universal selector

* {
padding: 0;
margin: 0;
}

Advanced selectors

Child and adjacent sibling selectors

#nav > li {font-weight: bold;}
<ul id="nav">
<li>Home</li>
<li>Services
<ul>
<li>Design</li>
<li>Development</li>
<li>Consultancy</li>
</ul>
</li>
<li>Contact Us </li>
</ul>

覆蓋
#nav li {font-weight: bold;}
#nav li * {font-weight: normal;}

共用
h1 + p {font-weight: bold;}
<h1>Main Heading</h1>
<p>First Paragraph</p>
<p>Second Paragraph</p>

Attribute selectors

<abbr title="Cascading Style Sheets">CSS</abbr>

abbr[title] {border-bottom: 1px dotted #999;}
abbr[title]:hover {cursor: help;}

a[rel="nofollow"] {
background-image: url(nofollow.gif);
padding-right: 20px;
}

.intro {border-style: solid;}
[class="intro"] {border-style: dotted;}

?