index.html
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>CSS选择器[上]</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <!-- <b class="abc">这是一个加粗</b> <p id="abc">这是一个<b>段落</b></p> <b class="abc">这是一个加粗</b> <span class="abc def">这是一个什么都没有</span> <b class="abc">这是一个加粗</b> <i lang="en-us">HTML5</i> <a href="http://www.baidu.com">百度</a> <a href="javascript:void(0)">好搜</a> <a href="http://www.360.cn">360官网</a> <input type="text"> <input type="password"> <ul> <li>我是儿子 <ol> <li>我是孙子</li> <li>我是孙子</li> </ol> </li> <li>我是儿子</li> <li>我是儿子</li> </ul> --> <!-- <p>岁的老父空间岁的老父看似简单连反抗集散地发了看似简单连反抗三等奖联发科技送到路口附近送到路口附近三类贷款纠纷另外可减肥零售贷款纠纷绿色科技的法律看似简单连反抗四季的风</p> <div>岁的老父空间岁的老父看似简单连反抗集散地发了看似简单连反抗三等奖联发科技送到路口附近送到路口附近三类贷款纠纷另外可减肥零售贷款纠纷绿色科技的法律看似简单连反抗四季的风</div> --> <!-- <p>我ithis is ...</p> <span>this is ...</span> --> <a href="http://www.baidu.com">百度</a> </body> </html>
style.css
@charset "utf-8";
/** {
border: 1px solid red;
}*/
/*通用选择器还匹配到了html和body元素*/
/*p {
color: red;
}*/
/*#abc {
color: green;
}
.abc {
color: blue;
}*/
/*b.abc {
color: orange;
}*/
/*.abc {
color: red;
}
.def {
font-size: 30px;
}*/
/*[href] {
color: red;
}*/
/*[type="password"] {
border: 1px solid red;
}*/
/*[href^="http"] {
color: red;
}*/
/*[href$=".cn"] {
color: red;
}*/
/*[href*="baidu"] {
color: red;
}*/
/*[class~="def"] {
color: red;
}*/
/*[lang|="en"] {
color: red;
}*/
/*p,b,i,span {
color: red;
}*/
/*#abc,.abc,i,span {
color: blue;
}*/
/*p b {
color: red;
}*/
/*p > b {
color: red;
}*/
/*ul li {
border: 1px solid red;
}*/
/*ul > li {
border: 1px solid red;
}*/
/*p + b {
color: red;
}*/
/*p ~ b {
color: red;
}*/
/*p::first-line {
color: red;
}*/
p::first-letter {
color: red;
}
/*a::before {
content: '点击';
}*/
a::after {
content: '搜索';
}