CSS汇总之CSS选择器

要使用css对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器。

 一、通配符选择器

             语法:*{ }

     说明:通配符选择器可以选择页面上所有的html标签(包括body,html标签

     用途:练习阶段清除页面所有标签的默认样式(使用通配符清除默认样式仅在练习阶段使用)

 <style> * { margin: 0; padding: 0; color: red; background: lightblue; } </style> <div>这是一个div</div> <p>这是一个p标签</p>

效果:body区域的背景色渲染成了lightblue,div和p标签的字体颜色渲染成了红色

二、标签选择器

语法:标签名 {}

说明:通过html标签名选择标签设置样式,w3c也称作元素选择器或者类型选择器

用途:常用在某些标签的特殊样式 比如a、ul、ol等  

 

 <style> ul { list-style: none; } a { text-decoration: none; color: red; } </style> <ul> <li><a href="">链接</a></li> <li><a href="">链接</a></li> <li><a href="">链接</a></li></ul>  

 

效果:li的小圆点去掉和a标签的默认颜色改变

 

 三、id选择器

语法:#id名:{}   (#号和id名紧挨着)

说明:通过标签的id名选择标签设置样式, 整个页面中只能有唯一一个id名

     用途:id优先级较高,有时候用来层叠掉某些类样式

 <style> #dv { width: 200px; height: 200px; background-color: lightblue; color: orange; } </style> <div id="dv"> 这是一个div </div>

效果:通过id选择器选择标签设置样式

四、类选择器

语法:.类名 {}   (由.和类名组成,.紧跟在类名前边,与id选择器类似)

说明:通过标签的类名选择到元素

用途:开发中最常用的选择器,不同的标签设置了同一个类名时,可以拥有相同的样式,当然一个标签也可以拥有多个类名。

 <style> .common { font-size: 18px; color: orange; } .dv1 { width: 200px; height: 200px; background-color: lightblue; } .dv2 { border: 1px solid #ccc; width: 200px; height: 200px; } </style> <div class="dv1 common"> 这是div1 </div> <div class="dv2 common"> 这是div2 </div>

效果:两个div都拥有两个样式,且都引用了common样式,这时候div会把引用的类样式都渲染出来,我们通常把相同的样式提取出来

 五、属性选择器

                用法:[属性名] {}  ([]方括号内部直接写标签的属性名即可)

说明:希望选择有某个属性的元素,可以使用这种选择器,当然属性选择器还有其他用法。

<style> [class] { width: 200px; height: 200px; border: 1px solid black; }</style> <div class="dv1"> 这是div1 </div> <div class="dv2"> 这是div2 </div>

效果:具有class属性的标签都会渲染出相同的样式

 

标签选择器的其他用法(图表参考w3c)详细用法参考W3C

选择器描述
[attribute]用于选取带有指定属性的元素
[attribute=value]用于选取带有指定属性和值的元素
[attribute~=value]用于选取属性值中包含指定词汇的元素
[attribute|=value]用于选取带有以指定值开头的属性值的元素,该值必须是整个单词
[attribute^=value]匹配属性值以指定值开头的每个元素
[attribute$=value]匹配属性值以指定值结尾的每个元素
[attribute*=value]匹配属性值中包含指定值的每个元素

 六、后代选择器

语法:每一层选择器用空格隔开

说明:后代选择器可以选择作为某元素后代的元素,不管后代标签再结构中嵌套多深,都会选择到

/*选中div后代中的p*/div p { color: red;} 后代选择器不但可以选中儿子,还可以选中孙子等所有的后代元素。/*会选中box中的h3*/.box h3 { font-size: 50px;}<div class="box"> <div> <div> <div> <h3>我是多层嵌套的h3</h3> </div> </div> </div></div>

七、子代选择器

语法:父元素选择器 > 子元素选择器 { }

  说明:选择标签的直接子元素,无法选择孙子及后代元素 

 <style> h1 > strong { color: red; } </style> <h1>This is <strong>very</strong> <strong>very</strong> important.</h1> <h1> This is <em>really <strong>very</strong></em> important. </h1>

 效果:第一个h1的strong会变颜色,第二个h1下的strong不会变颜色

 

子代选择器与后代选择器的区别:子代选择器只能选择直接子元素,选择范围较小。后代选择器可以选择子孙后代元素,选择范围较大。

 

 八、相邻兄弟选择器

 语法:元素选择器 + 元素选择器 {}   (两者为相邻元素,且有相同父元素)

 说明:可选择紧接在另一元素后的元素,且二者有相同父元素 

 <style> .box { height: 100px; width: 100px; background-color: red; }/*h1和div 都会有20px的margin-top值 */ h1, div { margin-top: 20px; } </style> <h1>这里是标题</h1> <div class="box">box中的内容</div>

九、交集选择器

说明:同时选中两个选择器都具有的元素

语法:连续书写选择器,不要添加任何空格(和后代选择器进行区分) 

 <style> p.para { font-size: 50px; color: red; } </style> <p class="para">p</p> <p>我是p <span class="para">特殊</span></p> 

效果:会给第一个p标签中的内容添加样式,第二个p中的标签和内容都不会添加样式

交集选择器可以连续交集(选择器可以书写多个)如:  p.para.fs{}  能被选中的元素具有以下特点:是p标签且含有para 和 fs类样式

 十、并集选择器  

  语法:逗号隔开每一个选择器

说明:同时设置多个选择器相同的样式

<style>div, h3, p { font-size: 50px; color: red;}</style><div>div</div><h3>h3</h3><p>p标签</p>

效果:div,h3和p标签都会设置上样式,并集选择器中的单个选择器也可以使用类选择器,id选择器,属性选择器等。

 十一、伪类选择器

说明:CSS 伪类用于向某些选择器添加特殊的效果,工作中用的不太多

用法:详见W3C,伪类选择器

十二、伪元素选择器

 说明:CSS 伪元素用于向某些选择器设置特殊效果,before和after常用

用法:伪元素选择器 

总结:以上内容几乎涵盖工作当中的所有用法,其中常用的有类选择器、标签选择器、id选择器、属性选择器、伪元素选择器的before和after,有些不常用的没有给出具体效果,可以根据提供的代码,自行实验

相关文章