#css五种选择器
css选择器
概述
在 CSS 中，选择器（ Selector ）是⼀种模式，⽤于选择需要添加样式的元素。
css基础选择器
1. 标签选择器
⼀个完整的HTML页⾯是有很多不同的标签组成，⽽标签选择器，则是决定哪些标签采⽤相应的CSS样式，写法如下：
div{width:  300px;height: 300px;background-color: red;}
p{text-indent: 2em;color: blue;}
span{letter-spacing: 5px;font-size: 20px;}
2. 类选择器
类选择器（ “class 选择器” ）根据类名来选择，⽽这个类名是⾃定义的，但我们在定义这个类名的时候也应该尽量能反应被设置元素的实际功能。同⼀个类名的选择器理论上可以被任意多的标签元素使⽤。在CSS中，定义类名选择器应该以 . 作为开头，否则，浏览器将视为你⾃定义的标签名，写法如下：
.box{width:  300px;height: 300px;background-color: red;}
p.des{text-indent: 2em;color: blue;}
css选择器分为哪几类需要注意的是，由于类名可以被任意多的标签元素使⽤，因此当你需要为特定标签类名设置样式的时候，可以在 . 之前指定标签名，这样就可以选中你要设置的对应的标签名中拥有该class的元素了，如上述⽰例中的 “p.des { … }” 即表⽰选择所有p标签中类名为des的元素。
3. id选择器
ID 选择器即根据元素的ID属性值来选取元素，和类选择器类似，但值得注意的是，ID表⽰唯⼀标识符，即同⼀个页⾯只能出现⼀个ID。定义⼀个ID选择器以# 开头，如下所⽰：
#box{width:  300px;height: 300px;background-color: red;}
#des{text-indent: 2em;color: blue;}
4. 通⽤选择器
通⽤选择器使⽤ * 表⽰，它的作⽤是选择页⾯中所有的标签元素。但业内很多Web前端优化师都认为该选择符存在性能问题，⽽且它⼀旦使⽤后⽗选择器与后代选择器的搭配容易出现浏览器不能解析的情况，所以⼀般在⾼质量的Web页⾯中基本是看不到该选择符的，就算是平时也不推荐⼤家使⽤。
5. 后代选择器
后代选择器是对某元素所嵌套的指定元素进⾏选择，每个选择符之间⽤ 空格 进⾏分割，多个嵌套层次应该以多个空格进⾏分割。如下所⽰：
<div class="container">
<article>
<h1>Napoléon Bonaparte</h1>
<p>Adversity is the midwife of genius.</p>    </article>
</div>
/
*index.css*/
.container article{text-align: center;}
.container h1{color: #000000;}
.container p{color: #008800;}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。