基本语法结构
!CSS没有限制空格的使用
CSS通常对于字母大小写不敏感(class和id选择器 例外)
插入样式表的方式存在优先级的差异:内联样式>内部样式表>外部样式表
<style>header{ background: red; }</style> <header><h4>一个无序列表:</h4></header> <section> <ul> <li>咖啡</li> <li>茶</li> <li>牛奶</li> </ul> </section>
<style>.red{ background: red; }</style> <header class="red"><h4>一个无序列表:</h4></header> <section> <ul> <li class="red">咖啡</li> <li>茶</li> <li>牛奶</li> </ul> </section>
<style>#blue{ background: blue; }</style> <header id="blue"><h4>一个无序列表:</h4></header> <section> <ul> <li>咖啡</li> <li>茶</li> <li>牛奶</li> </ul> </section>
可以将选择器组合使用,比如若是当初想让指定的某一li元素中的内容变蓝
<style>li.red{ background: red; }</style> <header id="blue"><h4>一个无序列表:</h4></header> <section> <ul> <li class="red">咖啡</li> <li>茶</li> <li>牛奶</li> </ul> </section>
得到这项之后的全部变红。
<style> li.red~ li { background: red; }</style> <header id="blue"><h4>一个无序列表:</h4></header> <section> <ul> <li class="red">咖啡</li> <li>茶</li> <li>牛奶</li> </ul> </section>
伪类本质上基于用户如何交互界面来设置元素样式地方法
<style> li:hover { background: red; } input:focus{background:blue;} </style> <header id="blue"><h4>一个无序列表:</h4></header> <section> <ul> <input type="text"> <li class="red">咖啡</li> <li>茶</li> <li>牛奶</li> </ul> </section>
hover悬停:鼠标在哪一部分上,那一部分就会泛红
focus:聚焦就会变蓝色
通过nth-child括号中的数字可以进行调整第几个出现效果
<style> [data-yellow="true"]{ background: yellow; } </style> <header data-yellow="true"><h4>一个无序列表:</h4></header> <section> <input type="text"> <ul> <li class="red">咖啡</li> <li>茶</li> <li>牛奶</li> </ul> </section>