属性选择器，伪类选择器

傷城~ 2023-10-03 22:54 133阅读 0赞 
  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="UTF-8">
  5.                 <title></title>
  6.                 <style type="text/css">
  7.                         /*属性选择器*/
  8.                         input[type="password"]{
  9.                                 background-color: red;
  10.                         }
  11.                         input[type="text"][value="zhaoss1"]{
  12.                                 background-color: yellow;
  13.                         }
  15.                 </style>
  16.         </head>
  17.         <body>
  18.                 <form>
  19.                         用户名：<input type="text" value="zhaoss1" />
  20.                         用户名2：<input type="text" value="zhaoss2" />
  21.                         密码：<input type="password" value="123123" />
  22.                         <input type="submit" value="登录" />
  23.                 </form>
  24.         </body>
  25. </html>

伪类选择器 向某些选择器添加特殊效果。

  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="UTF-8">
  5.                 <title></title>
  6.                 <style type="text/css">
  7.                         .mycls:hover{
  8.                                 color: red;
  9.                         }
  10.                 </style>
  11.         </head>
  12.         <body>
  13.                 <h1 class="mycls">我是标题</h1>
  14.         </body>
  15. </html>

一般伪类选择器都用在超链接上：

  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="UTF-8">
  5.                 <title></title>
  6.                 <style type="text/css">
  7.                         /*设置静止状态*/
  8.                         a:link{
  9.                                 color: yellow;
  10.                         }
  11.                         /*设置鼠标悬浮状态*/
  12.                         a:hover{
  13.                                 color: red;
  14.                         }
  15.                         /*设置触发状态*/
  16.                         a:active{
  17.                                 color: blue;
  18.                         }
  20.                         /*设置完成状态*/
  21.                         a:visited{
  22.                                 color: green;
  23.                         }
  24.                 </style>
  25.         </head>
  26.         <body>
  27.                 <a href="index.html">超链接</a>
  28.         </body>
  29. </html>

练习：百度导航栏

ab43c99145c91235c065f9907459be91.png

  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="UTF-8">
  5.                 <title></title>
  6.                 <style type="text/css">
  7.                         ul{
  8.                                 list-style-type: none;/*将无序列表前面的图标取消*/
  9.                         }
  10.                         li{
  11.                                 float:left;/*向左浮动*/
  12.                                 margin-left: 20px;/*设置间隔20px*/
  13.                         }
  14.                         a{
  15.                                 text-decoration: none;/*去掉下划线*/
  16.                                 font-size: 13px;/*字号*/
  17.                                 color: black;/*字体颜色*/
  18.                         }
  19.                         a:hover{
  20.                                 color: #0000FF;
  21.                         }
  22.                         div{
  23.                                 /*定位：*/
  24.                                 position: absolute;/*绝对定位*/
  25.                                 right:200px;
  26.                         }
  27.                 </style>
  28.         </head>
  29.         <body>
  30.                 <div>
  31.                         <ul>
  32.                                 <li>
  33.                                         <a href="aaaa">新闻</a>
  34.                                 </li>
  35.                                 <li>
  36.                                         <a href="aaaa">hao123</a>
  37.                                 </li>
  38.                                 <li>
  39.                                         <a href="aaaa">地图</a>
  40.                                 </li>
  41.                                 <li>
  42.                                         <a href="aaaa">视频</a>
  43.                                 </li>
  44.                         </ul>
  45.                 </div>
  46.         </body>
  47. </html>

发表评论

表情：
评论列表 （有 0 条评论，133人围观）

还没有评论，来说两句吧...

相关阅读