css3总结
目录：
1、属性选择器
p[style]{ 有style属性的p标签
color:red;
}
p[class=red]{ class的值为red的p标签
background-color: blue;
}
p[class=‘red‘]{ class的值为red的p标签
background-color: blue;
}
p[class*=‘red‘]{ class的值包含red就可以，class=darkred也匹配
background-color: blue;
}
p[class^=‘red‘]{ class的值以red开头
background-color: blue;
}
p[class$=‘red‘]{ class的值以red结尾
background-color: blue;
}
p[class=red][style]{} 可以同时指定多个属性2、兄弟伪类
* +: 获取当前元素的相邻的满足条件的元素
* ~：获取当前元素的满足条件的兄弟元素
* 例子：
.first + li{} 添加了first类样式，后面的相邻li元素,如果先相邻的不是li元素，返回空（注意：获取的是E后面的指定相邻li）
.first ~ li{} 添加了first类样式的，后面的其他兄弟li元素（注意：获取的是E后面的指定li）
<!DOCTYPE html>
<html>
<head>
<title>标题</title>
<meta charset="utf-8">
<style type="text/css">
.one + li {
color :red;
}
.two + li {
color :red;
}
.three + li {
background-color: #ccc; /* 只有第4个li背景色变了,说明 + 获取之后的相邻指定元素 */
}
.one ~ li {
font-size: 20px; /* 第2、3、4 li字体变大 */
}
.two ~ li {
color :blue; /* 第3、4 li元素颜色变蓝,说明~获取之后的所有指定元素 */
}
</style>
</head>
<body>
<div>
<ul>
<li class="one">第1个li</li>
<span>span文本</span>
<li class="two">第2个li</li>
<li class="three">第3个li</li>
<li>第4个li</li>
</ul>
</div>
</body>
</html>3、相对于父元素的结构伪类
* E:first-child: 查找E元素的父级元素的第一个E元素，如果第一个子元素不是E元素，就匹配不上
* E:last-child: 查找E元素的父级元素的最后一个E元素，如果最后一个子元素不是E元素，就匹配不上
* E:first-of-type: 查找E元素的父级元素的第一个E元素，如果第一个子元素不是E元素，过滤掉，总之选择第一个E元素
* E:last-of-type: 查找E元素的父级元素的最后一个E元素，如果最后一个子元素不是E元素，过滤掉，总之选择最后一个E元素
* E:nth-child(索引||even||odd)
- 索引从1开始
- even 偶数，第2、4···
- odd 奇数，第1、3···
* E:nth-of-type(索引||even||odd||-n+5)
- 取前5个
* E:nth-last-of-type(-n+5)
- 取后5个
* E:empty{} 文本为空，空格都没有
demo1
<!DOCTYPE html>
<html>
<head>
<title>标题</title>
<meta charset="utf-8">
<style type="text/css">
li:nth-of-type(2) {
color :red;
}
li:nth-last-of-type(-n+2) { /*获取后两个li*/
font-size: 30px;
}
li:empty {
background-color: red;
}
.ul2 li:nth-of-type(3) { /* .ul2限定了<ul class="ul2"> */
color: blue;
}
</style>
</head>
<body>
<div>
<ul>
<li class="one">第1个li</li>
<li class="two">第2个li</li>
<li class="three">第3个li</li>
<li>第4个li</li>
</ul>
<ul class="ul2">
<li class="one">第1个li</li>
<li class="two">第2个li</li>
<li class="three">第3个li</li>
<li></li>
</ul>
</div>
</body>
</html>
demo2
<!DOCTYPE html>
<html>
<head>
<title>标题</title>
<meta charset="utf-8">
<style type="text/css">
.a:nth-of-type(-n+2) {
color: blue;
}
</style>
</head>
<body>
<div>
<ul>
<li class="a">第1个li</li>
<li class="a">第2个li</li>
<li class="a">第3个li</li>
<li>第4个li</li>
</ul>
<ul>
<li class="a">第1个li</li>
<li class="a">第2个li</li>
<li class="a">第3个li</li>
<li></li>
</ul>
</div>
</body>
</html>
4、伪类样式target
* E:target{} 当目标元素作为锚点触发时，调用此样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#divId{
position: fixed;
left: 20px;
top:50px;
width: 150px;
height: 300px;
border: 2px solid red;
}
#content{
width: 800px;
margin:0 auto;
}
h2:target{
color: red;
}
</style>
</head>
<body>
<div id="divId">
<ul>
<li><a href="#h1Id">标题一</a></li>
<li><a href="#h2Id">标题二</a></li>
<li><a href="#h3Id">标题二</a></li>
</ul>
</div>
<div id="content">
<h2 id="h1Id">标题一</h2>
<p>一大段文字一大段文字一大段文字一大段文字</p>
<h2 id="h2Id">标题二</h2>
<p>一大段文字一大段文字一大段文字一大段文字</p>
<h2 id="h3Id">标题三</h2>
<p>一大段文字一大段文字一大段文字一大段文字</p>
</div>
</body>
</html>
5、
---