关系选择符:
属性选择符:
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title></title>
<style>
/* 关系选择符 */
/* 包含选择符 E F 选择所有被E元素包含的F元素*/
.one p{
color: #FF0000;
}
/* 子选择符 E>F 选择所有作为E元素的子元素F*/
.one>h1{
color: darkmagenta;
}
/* 相邻选择符 E+F 选择紧贴在E元素之后F元素,元素E与F必须同属一个父级*/
.Adjacent+p{
color: blue;
}
/* 兄弟选择符 E~F 选择E元素后面的所有兄弟元素F,元素E与F必须同属一个父级*/
.Brothers~p{
color: palegoldenrod;
}
/* 属性选择符 */
/* E[att] 具有att属性E元素改变样式*/
p[style]{
color: aquamarine;
}
/* E[att="val"] 具有att属性且属性值等于val的E元素*/
p[class="outer"]{
color: mediumaquamarine;
}
/* E[att~="val"] */
/* 具有att属性且属性值为一用空格分隔的字词列表,
其中一个等于val的E元素(包含只有一个值且该值等于val的情况)*/
p[class~="first"]{
font-size: 30px;
}
/* E[att^="val"] 具有att属性且属性值为以val开头的字符串的E元素*/
h3[class^="val"]{
color: #FFFF00;
}
/* E[att$="val"] 具有att属性且属性值为以val结尾的字符串的E元素*/
h3[class$="val"]{
color: #66CDAA;
}
/* E[att*="val"] 具有att属性且属性值为包含val的字符串的E元素*/
p[class*="val"]{
color: cadetblue;
}
/* E[att|="val"] */
/* 具有att属性,其值是以val开头并用连接符"-"分隔
的字符串的E元素;如果值仅为val,也将被选择*/
p[class|="img"]{
color: darkorange;
}
</style>
</head>
<body>
<div class="one">
<h1>这是第一个div的第一个h1 紫色</h1>
<p>这是第一个div的第一个p 红色</p>
<p>这是第一个div的第二个p 红色</p>
<h1>这是第一个div的第二个h1 紫色</h1>
</div>
<br/><br/>
<h2 class="Adjacent">这是相邻选择符</h2>
<p>h2相邻的p 蓝色</p>
<p>h2不相邻的p</p>
<br/><br/>
<div>
<h2 class="Brothers">这是兄弟选择符</h2>
<p>h2相邻的p</p>
<p>h2不相邻的p</p>
</div>
<br/><br/>
<p style="">这是具有style属性的一个p</p>
<p class="outer">这是具有class属性且为outer的一个p</p>
<p class="first second">这是具有class属性且为 first second的一个p</p>
<p class="second first">这是具有class属性且为 second first的一个p</p>
<div class="">
<h3 class="valtitle">这是具有class属性且以val开头的一个h3</h3>
<h3 class="classval">这是具有class属性且以val结尾的一个h3</h3>
<p class="classvaltit">这是具有class属性且包含val的一个p</p>
</div>
<div class="">
<p class="img">这是具有class属性且为img的一个p</p>
<p class="img-title">这是具有class属性且以img开头带有-分隔符的一个p</p>
<p class="imgtitle">这是具有class属性且为imgtitle的一个p</p>
</div>
</body>
</html>