css选择器操作大全：常用CSS选择器
css选择器操作大全：常用CSS选择器
CSS (Cascading Style Sheets)
常用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>
浏览效果图
