11.CSS选择器
2018-01-04 本文已影响0人
Lv_0
-
选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>选择器</title>
<style type="text/css">
/*元素选择器*/
div{
background-color: gray;
padding: 0.5em;
font-family: "楷体";
border: solid 2px white;
border-radius: 1em;
}
h3{
font-family: "微软雅黑";
}
/*组合选择器*/
#groupH3,#groupP{
color: white;
}
/*类选择器*/
.classH3{
color: red;
}
p.classP{
color: red;
}
/*id选择器*/
#idH3,#idP{
color: orange;
}
/*属性选择器*/
p[title]{
color: yellow;
}
/*后代选择器*/
.posterity p{
color: green;
}
/*子选择器*/
.children > p{
color: blue;
}
/*相邻选择器*/
.nearby h3+p{
color: indigo;
}
</style>
</head>
<body>
<div>
<h3>类型选择器</h3>
<p>元素选择器,又叫类型选择器(type selector),匹配所有类型的标签元素,例:p{}</p>
</div>
<div>
<h3 id="groupH3">选择器分组</h3>
<p id="groupP">同样布局的元素,同时设定,例:h3,p{}</p>
</div>
<div>
<h3 class="classH3">类选择器</h3>
<p class="classP">
01. 通过.classValue访问元素,设置其布局,例:.classH3{};<br />
02. 可与通配符*结合使用;<br />
03. 可与元素选择器结合使用,例如p.classP
</p>
</div>
<div>
<h3 id="idH3">id选择器</h3>
<p id="idP">
01. 通过#idValue访问元素,设置其布局,例:#idH3{};<br />
02. 可与通配符*结合使用;<br />
03. 在一个Html文档中,一个id只能使用一次,元素的id值不可重复;<br />
04. id选择器不能结合使用,例:class="class01 class02",但id不可
</p>
</div>
<div>
<h3 title="propH3">属性选择器</h3>
<p title="propP1">
01. 通过[属性名]访问元素,设置其布局,例:[title]{};
</p>
<p title="propP2">
02. 支持通配符*,例:*[title]{};
</p>
<p title="propP3" class="attrP3">
03. 支持多属性匹配,例:[title][class]{},访问元素,设置其布局;
</p>
<p title="propP4">
04. 可与元素选择器结合,例:p[title]{};
</p>
<p title="propP5" class="attrP5">
05. 值等匹配,例:p[title="propP5"]{},支持多值匹配p[title="propP5"][class="attrP5"]{};
</p>
<p title="propP6">
06. 值包含匹配,例:p[title~="prop"]{},只要包含此值即可匹配上;
</p>
<p title="propP7">
07. 值开头匹配,例:p[title|="prop"]{},匹配项必须是一个单词,以此单词开头才可匹配上;
</p>
<p title="propP8">
08. 值开头匹配,例:p[title^="prop"]{},匹配属性值以指定值开头的每个元素;
</p>
<p title="propP9">
09. 值结尾匹配,例:p[title$="P9"]{},匹配属性值以指定值结尾的每个元素;
</p>
<p title="propP10">
10. 值包含匹配,例:p[title*="ropP"]{},匹配属性值中包含指定值的每个元素;
</p>
</div>
<div class="posterity">
<h3>后代选择器</h3>
<p>
01. 通过空格实现后代选择器,例:div p{};<br />
02. 后代选择器又称为包含选择器,例:.posterity p{};<br />
03. 后代选择器支持多层结构,例:body div p{};<br />
04. 后代选择器选择其所有的后代,无论其嵌套多深,中间是否包含其他元素,例:body p{};
</p>
</div>
<div class="children">
<h3>子选择器</h3>
<p>
01. 通过>实现子选择器,例:div > p{};<br />
02. 子选择器只能选择其子代元素,不包含非子代的嵌套元素;<br />
03. 子选择器支持多层结构,例:body .children > p{};<br />
</p>
</div>
<div class="nearby">
<h3>相邻选择器</h3>
<p>
01. 通过+实现相邻选择器,例:h3 + p{};<br />
02. 相邻选择器只能选择同级且父元素为同一个且在其之后的元素;<br />
03. 相邻选择器支持多层结构,例:body .nearby h3 + p{};<br />
</p>
</div>
</body>
</html>
image.png
-
伪类&伪元素
伪类
:active 向被激活的元素添加样式,a:active 必须被置于 a:hover 之后，才是有效的 :focus 向拥有键盘输入焦点的元素添加样式 :hover 当鼠标悬浮在元素上方时，向元素添加样式,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的 :link 向未被访问的链接添加样式 :visited 向已被访问的链接添加样式 :first-child 向元素的第一个子元素添加样式,例: p:first-child,是指第一个p元素:lang 向带有指定 lang 属性的元素添加样式 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>选择器</title> <style type="text/css"> div{ margin: 1em; } div span:first-child{ color:gray; } .clsDiv{ background-color: cadetblue; padding: 0.5em; width: 2em; border-radius: 1em; border: 2px solid cornflowerblue; } .clsDiv:hover{ background-color: mediumslateblue; color: white; border: 2px solid slateblue; } </style> </head> <body> <div> <span>Name :</span> <span>Yoyo</span> </div> <div class="clsDiv">变色</div> </body> </html>
test26.gif
伪元素
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>选择器</title> <style type="text/css"> .poetry:first-line{ color: red; } .letter:first-letter{ color: red; } .before:before{ content: ":first"; } .after:after{ content: ":after"; } </style> </head> <body> <p class="poetry"> :first-line<br /> 窗前明月光;<br /> 疑是地上霜;<br /> 举头望明月;<br /> 低头思故乡.<br /> </p> <p class="letter">:first-letter</p> <p class="before"></p> <p class="after"></p> </body> </html>
image.png
