CSS 选择器

来源：互联网发布：淘宝流量钱包规则编辑：程序博客网时间：2024/06/05 20:55

CSS选择器包括元素选择器、id选择器、class选择器、属性选择器

1.元素选择器

用标签名作为选择器，选中所有相应的元素。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"        "http://www.w3.org/TR/html4/loose.dtd"><html><head>   <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">   <title>css选择器</title>   <style>      div{         background: #aaaaaa;         color:red;         width:200px;         height:200px;      }      p{         font-size: 17px;         color:#000;      }   </style></head><body><div>我是一个盒子</div><p>我是一个段落</p></body></html>

2.id选择器

顾名思义，就是根据id来选择元素，其样式定义为：#id{ 样式 } ，id名不能重复。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"        "http://www.w3.org/TR/html4/loose.dtd"><html><head>   <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">   <title>css选择器</title>   <style>     #demo{         background: #aaaaaa;         color:red;         width:200px;         height:200px;      }   </style></head><body><div id="demo">我是一个盒子</div></body></html>

3.class选择器

跟id选择器一样，是根据class类名来选择元素。其样式定义为： .classname{ 样式 }

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"        "http://www.w3.org/TR/html4/loose.dtd"><html><head>   <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">   <title>css选择器</title>   <style>     div.demo{         background: #aaaaaa;         color:red;         width:200px;         height:200px;      }   </style></head><body><div class="demo">我是一个盒子</div></body></html>

4.属性选择器

根据某个属性的特征来选择，话不多说，上代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"        "http://www.w3.org/TR/html4/loose.dtd"><html><head>   <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">   <title>css选择器</title>   <style>      div{         background: #f73287;         width:100px;         height:200px;         display: inline-block;         margin:15px;      }      div[title="div1"]{         background: #f76e07;         width:100px;         height:200px;      }   </style></head><body><span class="demo">   <div title="div1">1212</div>   <div title="div2">12121</div>   <div >12121</div>   <div title="a div">12121</div></span></body></html>

运行效果：

title~='div': 选中属性值包含指定完整单词div的元素。

title^=’div‘: 选中title属性值以div开头的元素。

title$=’div‘: 选中title属性值以div结尾的元素。

title*=’div‘: 选中title属性值包含div的元素。

阅读全文

1 0