CSS选择器

标记选择器：

 

tagName{property:value}

 

p{color:blue;font-size:20px;}

 

<p>标记选择器</p>

 

类选择器：

 

.classValue{property:value}

 

.aa{color:blue;font-size:20px;}

 

<p class="aa">类选择器</p>

 

ID选择器：

 

#idValue{property:value}

 

#fontstyle{color:blue;font-weight:bold;}

 

<p id=fontstyle>ID选择器</p>

 

全局选择器：

 

*{property:value}

 

*{color:red;font-size:30px;}

 

<p>全局选择器</p>

 

组合选择器：

 

tagName.classValue{property:value}

 

p.firstpar{color:blue;}

 

<p class="firstpar">组合选择器</p>

 

继承选择器：

 

h1 strong{color:#004400;font-size:40px}

 

<h1>测试CSS<strong>继承</strong>效果</h1>

 

伪类：

 

a:link{color:red;}

a:visited{color:green;}

a:hover{color:blue;}

a:active{color:orange;}

 

<a href="http:www.baidu.com">www.baidu.com</a>

 

属性选择器：

 

p[align]{color:red}
[align="left"]{font-size:20px;font-weight:bolder;}
[lang^="en"]{color:blue;text-decoration:underline;}
[src$="gif"]{border-width:5px;boder-color:#ff9900;}

 

<h3 align="center">HHH</h3>

<p align=center>这是属性定义样式表</p>
<p align=left>这是属性定义样式表</p>
<p lang="en-us">这是属性前缀定义样式表</p>
<p>这是属性后缀定义样式表
<img src="2.gif" border="1"></p>

 

结构伪类选择器

 

tr:nth-child(even){background-color:#f5fafe;}
tr:last-child{font-size:20px;}

 

<table border=1 width=80%>
 <th>姓名</th><th>编号</th><th>性别</th>
    <tr><td>刘海松</td><td>006</td><td>男</td></tr>
    <tr><td>王峰</td><td>001</td><td>女</td></tr>
    <tr><td>李张力</td><td>002</td><td>男</td></tr>
    <tr><td>于辉</td><td>008</td><td>男</td></tr>
    <tr><td>张浩</td><td>004</td><td>女</td></tr>
    <tr><td>刘永权</td><td>003</td><td>男</td></tr>
</table>

 

UI元素状态伪类选择器：

 

input:enabled{border:1px;dotted #666;background:#ff9900;}
input:disabled{border:1px;dotted #999;background:#f2f2f2;}

 

<h3 align=center>用户登陆</h3>
<form method="post" action="">
 用户名：<input type=text name=name><br>
    密&nbsp;&nbsp;码：<input type=password name=pass disabled="disabled"><br>
    <input type=submit value="提交">
    <input type=reset value="重置">
</form>