服务器之家
您的位置： 首页 编程语言 css

常用CSS选择器

476人浏览   2023-10-23 14:55:57

CSS (Cascading Style Sheets)

常用CSS选择器包括:

  • 元素选择器
  • 类选择器
  • ID选择器
  • 元素嵌套选择器
  • 元素组合选择器
  • 属性选择器,
  • 伪类选择器
  • 伪元素选择器
<!DOCTYPE html>
<style>
 /*选择<body>元素*/
 body{
 font-size:0.8em;
 
 }
 /*选择  的所有元素。*/
 .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 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>

浏览效果图

相关推荐