第六章 高级选择器
关系选择器
属性选择器
伪类选择器
选择器的权重
6.1关系选择器
<style type="text/css">
.container{
width: 500px;
min-height: 350px;
border:palevioletred dotted 1px;/*solid左右各一像素*/
}
/*包含选择器：.container下面的所有后代都会匹配此样式,但是自己这层不会被设置匹配到*/
.container div{
min-height: 150px;
border:darkblue dotted 1px;
}
子选择器：只会匹配直接的后代元素
.container>div{
min-height: 150px;
border:darkblue dotted 1px;
}
/*相邻选择器
- 紧接在另一个元素之后
- 二者要有相同的父元素
- 只能选择到后面的div自己不包含在内*/
.container-1-1+div{//杠1不是减1
min-height: 150px;
border:darkblue dotted 1px;
}
/*兄弟选择器：会匹配当前选择器的所有兄弟元素*/
.container-1-1~div{
min-height: 150px;
border:darkblue dotted 1px;
}
</style>
</head>
<body>
<div class="container">
<div class="container-1">
<div class="container-1-1">container-1-1</div>
<div calss="container-1-2">container-1-2</div>
</div>
</div>
6.2属性选择器
<style type="text/css">
p[lang='en']{
color: cornflowerblue;
}
p[lang='zh-CN']{
color: deeppink;
}
/*匹配lang属性取值中任意位置zh的元素*/
p[lang*='zh']{
color: indigo;
}
/*支匹配属性取值的开头是zh的元素*/
p[lang^='zh'] {
color: pink;
}
/*支匹配属性取值的结尾是zh的元素*/
p[lang$='zh'] {
color: pink;
}
/*匹配的属性取值必须是完整而且唯一的单词，
或者用-分隔* 适合lang属性，有横线分隔符的属性不适合href属性*/
p[lang|]{
color: deeppink;
}
/*匹配的属性值必须是一个完整的单词不适合href属性，适合class属性*/
p[lang~='zh']{
color: deeppink;
}
/*匹配所有以jpg结尾的图片路径*/
img[src$=".jpg"]
{
}
</style>
</head>
<body>
<nav>
<p lang="en" title="first_p">第一段</p>
<p lang="zh-CN" title="first_p">第二段</p>
<p lang="zh-SI" title="first_p">第三段</p>
<p lang="zh-JP" title="first_p">第三段</p>
<img src="images/xxx.jpg"/>
</nav>
</body>
6.3伪类选择器
<style type="text/css">
/*.div_simple1>h1:before{*/
/* !*默认情况下，这里会插入一个文本节点*!*/
/* content: "h1标签前插入的内容";*/
/*}*/
/*.div_simple1>h1:after{*/
/* !*默认情况下，这里会插入一个文本节点*!*/
/* content: "h1标签后插入的内容";*/
/*}*/
div.div_simple1{
width: 500px;
min-height: 350px;
border: deeppink dotted 1px;
}
.div_simple1 div{
width: 200px;
border: #00a1d6 dotted 1px;
}
.div_simple1:after{
content: " ";
display: block;/*成为块级元素，后面的参数设置为了after不显示*/
clear: both;
font-size: 0;
line-height: 0;
height: 0;
}
.fl{
float: left;
}
.fr{
float: right;
}
/************** first-child***********/
.div_simple2 h1:first-child{
color: deeppink;
}
.div_simple2 p:last-child{
color: deeppink;
}
/*选择器匹配父元素的第N个子元素,N从1开始，不论元素的类型，
N可以是数字、关键词或者公式
odd奇数关键字，even偶数关键字*/
.div_simple3 h1:nth-child(2){
color: #00a1d6;
}
/*公示：an+b：n是计数器，从0开始，b是偏移量*/
/**/
.div_simple3 h1:nth-child(2n){
color: #212121;
}/*2n为偶数，2n+1为奇数*/
/*表示第N个类型为div的子元素，不管有多少匹配的元素，只要不是div就不算数*/
.div_simple4 div:nth-of-type(2n){
background: deeppink;
}
/************nth--child(n)*********/
</style>
</head>
<body>
<div class="div_simple1">
<h1>伪类选择器之before和after</h1>
<div class="fl">段落文本1</div>
<div class="fr">段落文本2</div>
<!--父级容器中的子元素漂浮之后，就会产生父容器没有被自动撑大的bug，只撑大到h1-->
<div style="clear: both"></div>
</div>
<div class="div_simple2">
<h1>伪类选择器之:first-child-1</h1>
<h1>伪类选择器之:first-child-2</h1>
<h1>伪类选择器之:first-child-3</h1>
<p>段落文本1</p>
<p>段落文本2</p>
<p>段落文本3</p>
</div>
<div class="div_simple3">
<h1>伪类选择器之:nth--child(n)1</h1>
<h1>伪类选择器之:nth--child(n)2</h1>
<h1>伪类选择器之:nth--child(n)3</h1>
<p>段落文本1</p>
<p>段落文本2</p>
<p>段落文本3</p>
</div>
<div class="div_simple4">
<div>第一个子元素</div>
<p>第二个子元素</p>
<section>第三个子元素</section>
<div>第四个子元素</div>
<p>第五个子元素</p>
<section>第六个子元素</section>
</div>
两个伪类
table tr:nth-child(2n):hover{
color: pink;
cursor: pointer;
}
table tr:nth-child(2n+3):hover{//第一行不选中
color: deeppink;
cursor: pointer;/*使鼠标经过时变成手*/
}
6.4选择器权重&案例&总结
每一位从第一位开始比，每个数字之间有逗号，不能进位
4327
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
