标签：
<1><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style>
p:first-line { /*伪元素： 本来p元素的第一行是一句文字，并不是一个元素，但是这里将p元素的第一行伪装成一个元素了，然后给它设置样式; */
font-size:30px;
font-family:Arial;
color:red;
}
p:first-letter { /*这里将p标签这个元素的第一个字母伪装成一个元素，然后给他设置样式*/
font-size:3cm;
}
:root { /*将样式绑定到页面的根元素中，所有根元素是指位于文档中最顶层结构的元素，即<html> 即将HTML的背景设置为黄色*/
background-color:yellow;
}
</style>
</head>
<body>
<p>
Aaaaaaaaaaa<br/>
bbbbbbbbbbb<br />
ccccccccccc<br />
</p>
</body>
</html>
<2>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style>
p:before { /*在p元素前面追加一个“你好”文字*/
content:"你好！";
}
p:after { /*在p元素后面追加一个“大家好”文字*/
content:"大家好！"
}
</style>
</head>
<body>
<p>
Aaaaaaaaaaa
</p>
</body>
</html>
<3>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style>
li:not(.two) { /*排除某个元素； 这里不同于Jquery的伪选择器; 这里括号里是一个“选择器”*/
color:red;
font-size:30px;
}
</style>
</head>
<body>
<ul>
<li>aaaaaaaaaaa</li>
<li class="two">aaaaaaaaaaa</li>
<li>aaaaaaaaaaa</li>
</ul>
</body>
</html>
<4>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style>
li:empty { /*将空的li元素隐藏掉*/
display:none;
}
</style>
</head>
<body>
<ul>
<li>aaaaaaaaaaa</li>
<li></li>
<li>aaaaaaaaaaa</li>
</ul>
</body>
</html>
标签：
原文地址：http://blog.csdn.net/fanbin168/article/details/46137877
