css选择器

发布时间：2023-06-17 作者：admin 来源：文学

css选择器

id选择器：HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。

clss选择器：class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示

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向活动的链接添加特殊的样式。就是点击下去那一瞬间生效，比如说：

点击下去那一瞬间，连接会变成黄色，因为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>

👁️ 阅读量：0

🔖 本文标签：

🔥 最新发布文章