CSS3基础知识点---新增选择器
一、CSS3新增选择器1、E:nth-child(n)：匹配元素类型为E且是父元素的第n个子元素（2n 和2n-1可设置偶数行和奇数行）2、E:nth-last-child(n)：匹配元素类型为E且是父元素的倒数第n个子元素（与上一项顺序相反）3、E:first-child：匹配元素类型为E且是父元素的第一个子元素4、E:last-child：匹配元素类型为E且是父元素的最后一个子元素...
一、CSS3新增选择器
1、E:nth-child(n)：匹配元素类型为E且是父元素的第n个子元素（2n 和2n-1可设置偶数行和奇数行）
2、E:nth-last-child(n)：匹配元素类型为E且是父元素的倒数第n个子元素（与上一项顺序相反）
3、E:first-child：匹配元素类型为E且是父元素的第一个子元素
4、E:last-child：匹配元素类型为E且是父元素的最后一个子元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css" media="screen">
.iteam1 li,.iteam2 li{
background-color: gray;
margin-top: 10px;
}
/*匹配元素类型为li且是父元素ul的第2个子元素*/
.iteam1 li:nth-child(2){
background-color: red;
}
/*匹配元素类型为li且是父元素ul的倒数第2个子元素*/
.iteam1 li:nth-last-child(2){
background-color: green;
}
/*匹配元素类型为li且是父元素ul的第1个子元素*/
.iteam1 li:first-child{
background-color: blue;
}
/*匹配元素类型为li且是父元素ul的最后1个子元素*/
.iteam1 li:last-child{
background-color: orange;
}
/*偶数行*/
.iteam2 li:nth-child(2n){
background-color: green;
}
/*奇数行*/
.iteam2 li:nth-child(2n-1){
background-color: yellow;
}
</style>
</head>
<body>
<ul class="iteam1">
<li>哈哈</li>
<li>哈哈</li>
<li>哈哈</li>
<li>哈哈</li>
<li>哈哈</li>
<li>哈哈</li>
</ul>
<ul class="iteam2">
<li>haha</li>
<li>haha</li>
<li>haha</li>
<li>haha</li>
<li>haha</li>
<li>haha</li>
</ul>
</body>
</html>5、E:only-child：匹配元素类型为E且是父元素中唯一的子元素
6、E:nth-of-type(n)：匹配父元素的第n个类型为E的子元素
7、E:nth-last-of-type(n)：匹配父元素的倒数第n个类型为E的子元素（与上一项顺序相反）
8、E:first-of-type：匹配父元素的第一个类型为E的子元素
9、E:last-of-type：匹配父元素的最后一个类型为E的子元素
10、E:only-of-type：匹配父元素中唯一子元素是E的子元素
xxx-child和xxx-of-type是可以对应的，一般父元素内的子元素都是一样的时候用child比较好理解，子元素包含不同元素时用-of-type。
特别注意only-child 和only-of-type，下面有例子说明。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css" media="screen">
.box1 div,.box2 div,p{
width: 100px;
height: 50px;
background-color: gray;
font:18px/50px 'Microsoft Yahei';
text-align: center;
margin-top: 10px;
}
/*匹配元素类型为E且是父元素中唯一的子元素,这个元素在父级子是唯一存在，没有其他元素,如果父级中有其他类型元素则不生效*/
p:only-child{
background-color: red;
}
.box1 p:only-child{
background-color: red;
}
/*E:only-of-type：匹配父元素中唯一子元素是E的子元素，如果不唯一则不生效，可以允许有其他元素*/
.box1 p:only-of-type{
background-color: pink;
}
/*第四个子元素，而且该子元素的类型是div时则匹配,这个发现第四个元素不是div 则不匹配*/
.box1 div:ntf-child(4){
background-color: yellow;
}
/*父级下面第四个div元素，碰到不同的元素跳过,一直要数到第四个div元素*/
.box1 div:nth-of-type(4){
background-color: orange;
}
</style>
</head>
<body>
<p>外部</p>
<div class="box1">
<div>hello</div>
<div>hello</div>
<div>hello</div>
<p>world</p>
<!-- <p>sky</p> -->
<div>hello</div>
<div>hello</div>
<div>hello</div>
</div>
<div class="box2">
<p>world</p>
</div>
</body>
</html>1、E:empty 选择一个空的元素
12、E:enabled 可用的表单控件
13、E:disabled 失效的表单控件
14、E:checked 选中的checkbox
15、E:not(s) 不包含某元素
/*input 用属性选择器选择时type的值不要带引号*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css" media="screen">
div{
height: 50px;
margin-top: 10px;
}
div:empty{
background-color: yellow;
}
.box:empty{
background-color: green;
}
/*注意not后面括号的冒号*/
.list li:not(:nth-child(2)){
background-color: red;
}
.list li:not(:empty){
background-color: blue;
}
</style>
</head>
<body>
<div></div>
<div class="box"></div>
<ul class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li></li>
<li>5</li>
</ul>
</body>
</html>16、E:target 对应锚点的样式
<style type="text/css">
h2:target{
color:red;
}
</style>
......
<a href="#tit01">标题一</a>
......
<h2 id="tit01">标题一</h2>
<!-- 点击链接，h2标题变红 -->
17、E > F E元素下面第一层子集
18、E ~ F E元素后面的兄弟元素
19、E + F 紧挨着的兄弟元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
input:disabled{
background-color: red;
}
input:enabled{
background-color: green;
}
input:checked + label{
color: red
}
.box{
width: 150px;
height: 30px;
background-color: gold;
display: none;
}
input:checked +div{
display: inline-block;
}
</style>
</head>
<body>
<input type="text" name disabled>
<input type="text">
<br>
<input type="checkbox" name=""><label>这是一个label</label>
<br>
<input type="checkbox" name="" checked="checked"><div class="box">这是一个div元素</div>
</body>
</html>属性选择器：
1、E[data-attr] 含有data-attr属性的元素
提示：任何属性都可以使用这些选择器。
为了将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色，可以这样写：
a[href][title] {color:red;}
可以对所有带有 alt 属性的图像应用样式，从而突出显示这些有效的图像：
img[alt] {border: 5px solid red;}
属性与属性值必须完全匹配
请注意，这种格式要求必须与属性值完全匹配。
如果属性值包含用空格分隔的值列表，匹配就可能出问题。
<p class="important warning">This paragraph is a very important warning.</p>
p[class="important warning"] {color: red;}
如果需要根据属性值中的词列表的某个词进行选择，则需要使用波浪号（~）。
假设您想选择 class 属性中包含 important 的元素，可以用下面这个选择器做到这一点：
p[class~="important"] {color: red;}
<style type="text/css">
div[data-attr='ok']{
color:red;
}
</style>
......
<div data-attr="ok">这是一个div元素</div>
<!-- 点击链接，h2标题变红 -->
2、E[data-attr='ok'] 含有data-attr属性的元素且它的值为“ok”
3、E[data-attr^='ok'] 含有data-attr属性的元素且它的值的开头含有“ok”
4、E[data-attr$='ok'] 含有data-attr属性的元素且它的值的结尾含有“ok”
5、E[data-attr*='ok'] 含有data-attr属性的元素且它的值中含有“ok”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css" media="screen">
/*input 用属性选择器选择时type的值不要带引号*/
input[type=text] {
width: 140px;
/*outline: none;*/
}
</style>
</head>
<body>
<label for="">姓名</label>
<input type="text" name="" id="">
<label for="">密码</label>
<input type="password" name="" id="">
</body>
</html>
有“AI”的1024 = 2048，欢迎大家加入2048 AI社区
更多推荐
1
0- 0
已为社区贡献4条内容
所有评论(0)