复杂选择器1

来源：互联网发布：caffe官方教程中译本编辑：程序博客网时间：2024/06/03 07:09

!-- CSS高级-1
一、复杂选择器
1、兄弟选择器
1)相邻兄弟选择器
相邻兄弟选择器匹配指定元素的相邻兄弟元素，如果需要选择紧邻在某元素的下一个元素，而且二者有相同的父元素，可以使用该选择器，使用+作为连接符。
2)通用兄弟选择器
通用兄弟选择器是匹配某元素后面的所有兄弟元素，使用~作为连接符，也就是说，两种元素有相同的父元素，但是不必紧邻
2、属性选择器
将元素附带的属性用于选择器中，可以对带有指定属性的元素设置样式
3、伪类选择器
1）目标伪类
突出显示活动的html锚点，用于选取当前活动的目标元素，其语法为E:target选择匹配E的所有元素，其匹配元素被url指向，可以通过超链接处理另一个元素的样式
2）元素状态伪类（大多应用在表单元素）
:enabled，匹配每个已启动的元素
:disabled,匹配每个被禁用的元素
:checked,匹配每个被选中的input元素，注意，只用于单选或复选按钮
-->

<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
#name3{
width: 100px;
height: 30px;
border: 1px solid black;
}
a+img{
width: 100px;
height: 100px;
border: 1px solid black;
}
a~p{
width: 100px;
height: 30px;
background: gray;
}
/*//属性选择器，附带id属性的元素*/
[id]{
width: 200px;
height: 30px;
background: red;
}
/*div中包含id属性的元素*/
div[id]{

}
/*包含id属性和class属性的div*/
div[id][class]{

}
/*附带id属性且值为d1的div元素*/
div[id="d1"]{

}
/*带有class属性，且class包含c1单词，也就是说class的值是以空格隔开的单词列表*/
div[class~="c1"]
{

}
/*class的值以a开头的div元素*/
div[class^="a"]{

}
/*class值包含a*/
div[class*="a"]{

}
/*class的值以a开头的div元素a结尾 */
div[class$="a"]{

}
p:target{
width: 300px;
height: 50px;
border: 1px solid black;
}
#name3:target{
width: 300px;
height: 50px;
border: 1px solid black;
}
input:enabled{
font-size: 20px;
}
input:disabled{
background: gray;
color: white;
}
input:checked{
width: 100px;
}
</style>
</head>
<body>
<div>
<a href="">超链接</a>
<img src="">
<img src="" id="i1">
<p></p>
<b></b>
<p></p>
<div id="d1"></div>
<div class="c1 c3"></div>
</div>
<div>
<p></p>
</div>
<a href="#name6">锚点一</a>
<p id="name6"></p>
<a href="#name3">毛垫</a>
<div id="name3"></div>
<input type="text" disabled="disabled"value="12345"><br>
<input type="text" value="123">
<br>
<input type="radio" name="r1">按钮1
<input type="radio" name="r1" checked="checked" vlaue="0" id="dd1"><label for="dd1">按钮</label>
</body>
</html>

0 0