伪类、伪元素及五星好评css实现

最新推荐文章于 2023-07-04 14:34:36 发布

哒玲

最新推荐文章于 2023-07-04 14:34:36 发布

阅读量1k

点赞数 3

分类专栏： css 文章标签：五星好评 css

本文链接：https://blog.csdn.net/zl13015214442/article/details/88421413

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1. 伪元素

伪元素本质上是创建了一个有内容的虚拟容器
在这里插入图片描述

//:before和:after一定要配合content使用:
<html>
<head>
  <meta charset=UTF-8">
  <style>
    p:before{
      content: 'Hello';
      color: red;
    }
    p:after{
      content: 'Tom';
      color: red;
    }
  </style>
</head>
<body>
<p>我是</p>
</body>
</html>

效果：
在这里插入图片描述

<html>
<head>
  <style>
    p:first-letter {
      color:#ff0000;
      font-size:xx-large;
    }
  </style>
</head>
<body>
<p>you can see this, what a good day!</p>
</body>
</html>

效果：
在这里插入图片描述
还有常见用法见伪元素清除浮动

2. 伪类
在这里插入图片描述

在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

3. 伪类实现五星好评

结构层主要由一个div盒子包裹五个星级，五个星星分别放在a标签里，对于普通的div/span/li等元素节点是不能直接获取焦点的，需要用到一个属性tabindex，所以这里用a标签：

<body>
<div class="rating">
  <a href="#5" title="Give 5 stars">★</a>
  <a href="#4" title="Give 4 stars">★</a>
  <a href="#3" title="Give 3 stars">★</a>
  <a href="#2" title="Give 2 stars">★</a>
  <a href="#1" title="Give 1 stars">★</a>
</div>
</body>

然后样式部分，先将五个星星一行排列，初始颜色设为暗灰色，实现划过和点击选中星星颜色变亮，通过a:hover和a:focus将当前星星选中，通过a:hover~a和
a:focus~a将当前元素之后的同级元素选中，然后通过direction: rtl将星星的顺序调为从右向左：

<head>
  <meta charset="utf-8">
  <title>五星好评</title>
  <style>
    a {
      color: #aaa;
      text-decoration: none;
      padding: 0 7px;
      font-size: 45px;
    }
    .rating {
      width: 300px;
      margin: 0 auto;
      direction: rtl;
    }
    a:hover,
    a:hover ~ a,
    a:focus,
    a:focus ~ a{
      color: orange;
      cursor: pointer;
    }
  </style>

实现效果：
在这里插入图片描述

哒玲

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
伪类、伪元素及五星好评css实现

结构层主要由一个div盒子包裹五个星级，五个星星分别放在a标签里，对于普通的div/span/li等元素节点是不能直接获取焦点的，需要用到一个属性tabindex，所以这里用a标签：&lt;body&gt;&lt;div class="rating"&gt; &lt;a href="#5" title="Give 5 stars"&gt;★&lt;/a&gt; &l
复制链接

扫一扫