选择器

1. 子选择器

  使用大于符号 >，用于选择指定标签元素的 第一代 子元素。

.food >li { border:1px solid red; } <ul class="fruit"> <li>香蕉</li> <li>苹果</li> <li>梨</li> </ul>

2. 后代选择器

    加入空格，用于选择指定标签元素下的后辈元素。

.first span{color:red;} <p class="first">今天<span>老师</span>给我们看了一节课电影。</p>

3. 伪类选择器

a:link 正常连接的样式

a:hover 鼠标放上去的样式

a:active 选择链接时的样式

a:visited 已经访问过的链接的样式

---

样式优先权重

1. 特殊性

  标签的权值为1，class选择符为10，ID选择符为100。   继承其实也有权重，但很低。

2. 层叠

  html文件中,同一个元素可以有多个css样式存在。   当有相同权重的样式存在时，处于最后面的css样式会被应用。

3. 重要性

  有些时候需要为某些样式设置最高权值，此时可以使用 !important

p{color:red!important;} p{color:green;} <p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>

注意：    !important要写在分号的前面

4. 总结

    浏览器默认样式 < 网页制作者样式 < 用户自己设置的样式< !important