标签：char col 样式设置 meta back 注意 hover lan 使用
：hover的使用，即当鼠标指针移入元素时，所做出的样式设置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo01</title> <style> *{ margin: 0; padding: 0; } ul li{ width: 300px; margin-top: 10px; background: #ff0000; } ul li:hover{ background: #000000; } </style> </head> <body> <ul> <li></li> <li></li> <li></li> </ul> </body> </html>
以上情况存在于当鼠标指针移入元素，通过：hover使该元素自身改变新的样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo01</title> <style> *{ margin: 0; padding: 0; } .container{ width: 300px; height: 300px; border: 1px solid #ff9f5a; } .content{ width: 100px; height: 100px; background: #27e7ff; } .container:hover .content{ background: #000000; } </style> </head> <body> <div class="container"> <div class="content"></div> </div> </body> </html>
以上示例中，当存在父子关系的时候，可以通过父级的：hover使得子级的样式发生改变，写法为 .container:hover .content，hover后面有一个空格；但是，子级：hover改变不了父级的样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo01</title> <style> *{ margin: 0; padding: 0; } .container{ width: 300px; height: 300px; border: 1px solid #ff9f5a; } .content{ width: 100px; height: 100px; background: #27e7ff; } .container:hover +.content{ background: #000000; } </style> </head> <body> <div class="container"></div> <div class="content"></div> </body> </html>
以上示例，当两个元素不是父子关系，为同胞兄弟关系时，则通过 .container:hover .content这样的写法是无效的，则需要通过“+”号，即 .container:hover +.content才能显示出效果；但是要注意两个元素的先后顺序哦~
不足之处，请多多指教…
标签：char col 样式设置 meta back 注意 hover lan 使用
原文地址：http://www.cnblogs.com/Immortal-brother/p/7692571.html
