常用CSS选择器包括:
- 元素选择器
- 类选择器
- ID选择器
- 元素嵌套选择器
- 元素组合选择器
- 属性选择器,
- 伪类选择器
- 伪元素选择器
<!DOCTYPE html>
<style>
/*选择<body>元素*/
body{
font-size:0.8em;
}
/*选择 class="mycls" 的所有元素。*/
.mycls {
color:red;
}
/*选择id="myid"的元素*/
#myid {
text-decoration:none;
}
/*选择在div中的所有p元素*/
div p {
color:aqua;
}
/*选择所有span和p元素*/
span, p {
color:antiquewhite;
}
/*选择父元素为article的div元素*/
article>div{
color:yellow;
}
/*选择紧接section元素的div元素*/
section+div{
color:darkmagenta;
}
/*选择带有type属性的所有元素*/
[type]{
color:fuchsia;
}
/*选择type="tel"的所有元素*/
[type="tel"] {
color:brown;
}
/*选择属性title中包含"tilt"的所有元素*/
[title~="tilt"]{
color:chartreuse;
}
/*选择属性title中以"rotation"开头的所有元素*/
[title^="rotation"]{
color:dimgrey;
}
/*选择属性src中以".pdf"结尾的所有a元素*/
a[title$=".pdf"]{
color:forestgreen;
}
</style>
<p class="mycls">Class Selector</p>
<a id="myid" href="#">A link</a><br>
<div><p>Paragraph(P) inside div</p></div>
<span>Span</span><p>A paragraph</p>
<article><div>Div in article</div></article>
<section>Section</section><div>Div</div>
<input type="text" name="name" id="name" value="my name">
<input type="text" name="number" id="number" value="my number"><br>
<input type="tel" name="tel1" id="tel1" value="my name">
<input type="tel" name="tel2" id="tel2" value="my number"><br>
<input type="number" title="param tilt x" name="tiltx" id="tiltx" value="52.3">
<input type="number" title="param tilt y" name="tilty" id="tilty" value="30.5"><br>
<input type="number" title="rotation x" name="rx" id="rx" value="52.3">
<input type="number" title="rotation y" name="ry" id="ry" value="30.5"><br>
<a title="Link to readme.pdf" href="#">Link pdf</a>