admin管理员组

文章数量:1794759

css选择器

css选择器

css选择器

  • id选择器：HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。
    • <style> #para1 { text-align:center; color:red; } </style> <p id="para1">Hello World!</p>
  • clss选择器：class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示
    • <style> .center { text-align:center; } </style> <p class="center">段落居中。</p>
  • hover选择器：算是交互式的，一般是鼠标移上去回发生效果。 定义和用法：:hover在鼠标移到链接上时添加的特殊样式。 提示: :hover 选择器器可用于所有元素，不仅是链接。 比如说下拉菜单功能，鼠标移上去会显示菜单：
    • <!DOCTYPE html> <html> <head> <title>下拉菜单实例|菜鸟教程(runoob)</title> <meta charset="utf-8"> <style> .dropdown { /*position: relative;*/ /*display: inline-block;*/ } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); padding: 12px 16px; } .dropdown:hover .dropdown-content { display:block } </style> </head> <body> <h2>鼠标移动后出现下拉菜单</h2> <p>将鼠标移动到指定元素上就能看到下拉菜单。</p> <div class="dropdown"> <span>鼠标移动到我这！</span> <div class="dropdown-content"> <p>菜鸟教程</p> <p>www.runoob</p> </div> </div> </body> </html>

    在dropdown-content那里设置了display：none，也就是把这两行隐藏了，然后给dropdown添加了hover选择器，效果是display：block，变为块级元素，所以就形成了鼠标移过去显示菜单的效果。 4. visited选择器： 定义和用法 :visited向访问过的链接添加特殊的样式。 其实就是你没点他的时候，他的样子，比如说：

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob)</title> <style> a:link {color:green;} a:visited {color:blue;} a:hover {color:red;} a:active {color:yellow;} </style> </head> <body> <p>将鼠标移上并点击此链接: <a href="//www.runoob/">runoob</a></p> </body> </html>

    现在我们看到的连接就是蓝色的，因为visited属性是蓝色的。 5. active选择器： 定义和用法 :active向活动的链接添加特殊的样式。 就是点击下去那一瞬间生效，比如说：

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob)</title> <style> a:link {color:green;} a:visited {color:blue;} a:hover {color:red;} a:active {color:yellow;} </style> </head> <body> <p>将鼠标移上并点击此链接: <a href="//www.runoob/">4399</a></p> </body> </html>

    点击下去那一瞬间，连接会变成黄色，因为active属性是黄色。 6. link选择器（说实话没看懂） 定义和用法 :link向未访问的链接添加特殊的样式。 放个例子吧，或许以后就懂了

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob)</title> <style> a:link { background-color:blue; } </style> </head> <body> <a href="//www.runoob/">runoob</a> <a href="//www.google">Google</a> <a href="//www.wikipedia">Wikipedia</a> <p><b>注意:</b>:link选择样式链接到你还没有去过的链接。</p> </body> </html>

    本文标签： 选择器css

    版权声明：本文标题：css选择器 内容由林淑君副主任自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1686969460a123685.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。