<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3选择器--结构性伪类选择器</title>
</head>
<body>
<p>
你好
</p>
<div>
hello前端教育
</div>
<h1>
人间有味是清欢寂寒，瑟动青春里一抹韵色，永远定格的守望尽情地享受独处漫时光，初秋闲笔,如歌行板,桂花香海上生明月，天涯共此时蒹葭青衣，刀马花旦你是我心中，永远的少年浅秋薄念，独自凉清秋，绽放成一树静美九月，活出月亮般宁静当爱已成往事种一朵温暖，在流年时光可知，秋已凉你是我眉心的一记暖痕念起，便是这个季节最浓的色彩倾心四季，绣光阴咦！！！
</h1>
<b> </b>
<i></i>
<style>
/*before 伪元素用于在某个元素之前插入一些内容*/
/* p:before{
content:"前端HTML5_1606班";
}*/
p:after{
content:'前端1601';
}
/*after 伪元素用于在某个元素之后插入一些内容*/
div:after{
content: "前端HTML5_1606班";
}
/*first-line 为某个元素中的第一行文字使用样式*/
h1:first-line{
color:red;
background-color: yellow;
}
/*first-letter 用于为某个元素中的文字首字母(欧美文字)或者第一个字(中文、日文、韩文等汉子)使用样式*/
h1:first-letter{
font-size: 90px;
}
/*root 根节点 root == html*/
:root{
background:rgb(246, 200, 246);
/*换皮肤*/
/*background: orange;*/
}
/*not 反选（让选中的东西不执行以下的代码）*/
/*如果不写body 则把body也算在里面了*/
body :not(h1){
background-color: pink;
}
/*empty 选择元素为空(连空格都不能有)*/
:empty{
display: block;
width:100px;
height:30px;
background-color: red;
margin-top: 20px;
}
/*target 使用target选择器对页面中某个target元素样式（该元素的ID被当做页面中的超链接来使用）
该样式只在用户点击了页面中的超链接，并且跳转到target元素后起作用
*/
:target{
background:greenyellow;
}
/* h1::selection{
}*/
h1::selection{
background:darkolivegreen;
color:#fff;
}
h1::-moz-selection{
background:darkolivegreen;
color:#fff;
}
ul{
list-style: none;
}
ul li:before{
content:counter(c);
}
ul li{
counter-increment: c;
/*margin-left: 4px;*/
}
</style>
<p id="menu">
<a href="#text1">IHELLO</a>
<a href="#text2">IHELLO</a>
<a href="#text3">IHELLO</a>
<a href="#text4">IHELLO</a>
</p>
<div id="content">
<div id="text1">hello前端教育</div>
<div id="text2">hello前端教育</div>
<div id="text3">hello前端教育</div>
<div id="text4">hello前端教育</div>
</div>
<ul>
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
<li>第四个</li>
</ul>
</body>
</html>
网友评论