属性选择符：
E[att] 选择具有att属性的E元素。
<style type="text/css"> a[class]{ background-color: red;} </style> <body> <a href="" class="a">链接a</a> <a href="" id="b">链接b</a> </body>
E[att="val"] 选择具有att属性且属性值等于valu的E元素。
<style type="text/css"> a[class="1"]{ background-color: red;} </style> <body> <a href="" class="1">链接a</a> <a href="" class="2">链接b</a> </body>
E[att~="val"] 选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素。
<style> a[class~="id"]{color: red;} </style> <body> <ul> <li><a href="" class="id 1">链接a</a></li> <li><a href="" class="1">链接b</a></li> <li><a href="" class="1">链接b</a></li> </body>
E[att^="val"] 选择具有att属性且属性值为以val开头的字符串的E元素。
<style> a[title~="163"] {color:red;} </style> <body> <a href="http://www.163.com/" title="www 163 com">红色</a> <a href="http://www.baidu.com/" title="www baidu com">红色</a> </body>
E[att$="val"] 选择具有att属性且属性值为以val结尾的字符串的E元素。
<style> li[class$="a"] {color: #f00;} </style> </head> <body> <ul> <li class="abc">列表项目</li> <li class="acb">列表项目</li> </ul> </body>
E[att*="val"] 选择具有att属性且属性值为包含val的字符串的E元素。
<style type="text/css"> a[href*=".html"]{color:red;} a[href*=".php"]{color:green;} a[href*=".jsp"]{color:blue;} </style> <body> <a href="http://www.dreamdu.com/css.html?id=1&name=www">梦之都红色字体</a> <a href="http://www.dreamdu.com/css.php?id=2&name=dreamdu">梦之都绿色字体</a> <a href="http://www.dreamdu.com/css.jsp?id=3&name=com">梦之都蓝色字体</a> </body>
E[att|="val"] 选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素。
<style type="text/css"> a[title~="dreamdu"]{color:red;} </style> <body> <a href="http://www.dreamdu.com/" title="www dreamdu com">红色</a> </body>
font-family，font-size，font-weight，font-style
<style type="text/css"> p { font-family: "宋体";} h1 { font-size:14px ;} h2 { font-weight: normal ;} h3 {font-style: italic;} </style> </head> <body> <p>这是一个标签</p> <h1>这是一个标签</h1> <h2>这是一个标签</h2> <h3>这是一个标签</h3> </body>
font(字体样式缩写)
<style type="text/css"> /*p{font-style:italic; font-weight:bold; font-size:14px; line-height:22px; font-family:宋体;}*/ p {font:italic bold 14px/22px 宋体} </style> </head> <body> <p>这是一个标签</p> </body> </html>
text-decoration(文本装饰线条)，text-shadow(文字阴影)
<style type="text/css"> p { text-decoration: underline; text-shadow: 2px 2px #ff0000; } </style> </head> <body> <p>这是一个标签</p> </body>
width，height
<style type="text/css"> p { 300px;} div { height:100px; padding: 1px; border:1px solid;} </style> </head> <body> <p>这是一个标签这是一个标签这是一个标签这是一个标签</p> <div>这是一个标签</div> </body>
