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

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>

实现效果：

伪类、伪元素及五星好评css实现相关推荐

学习笔记（10）伪类伪元素
目录 1,伪类 2,伪元素 3,伪类伪元素的区别 3.1,相同点 3.2,不同点 1,伪类 w3c的定义:CSS伪类是用来添加一些选择器的特殊效果. 伪类是指原本存在的标签,在满足某些条件的情况下,就 ...
【web】伪类伪元素
伪类伪元素伪类选择器可以理解为描述元素的某种状态常用伪类 a标签的4种伪类(要按顺序书写:link.visited.hover.active) :link:元素链接点击前的样式 :visited ...
CSS：基本概念、选择器、伪类伪元素
基本概念 HTML使用结构化标记的理由:易于建立内容索引.增加文档可用性.增加可访问性.易于维护. 元素(element):文档结构的基础,每个元素生成一个框(box)其中包含元素的内容, 元素的两 ...
CSS3——对齐组合选择符伪类伪元素导航栏下拉菜单
水平&垂直对齐元素居中对齐 .center {margin: auto;width: 50%;border: 3px solid green;padding: 10px; } 文本居中对齐 ...
伪类伪元素如何区分
前段时间在写网页的时候,使用了CSS的伪元素:after来实现样式,故而重温了一下伪类和伪元素.平时实现的时候便是拿出来用,但是真正区分两者的概念的时候却有点混淆了. 首先,查看一下W3S对伪类和伪元 ...
CSS3 属性选择器伪类选择器盒模型圆角阴影 CSS定位和浮动
HTML是网页的裸框架,但是现在已经是2020年了,你再做出一个80年代的网页来,恐怕是没HR要你了.所以学习CSS的重要性可想而知,CSS用途很广,是一门独立的编程语言,能美化网页,也能进一步提高自 ...
伪类---伪元素知识汇总
文章目录一.伪类 1.anchor伪类 1.1 anchor伪类 1.2 anchor伪类的种类 1.3 使用时的注意事项 2.搭配使用 2.1 结合CSS类配合使用 2.2 搭配元素使用 2.2. ...
html中p标签的伪类选择器,表单标签和css伪类选择器
一.表单标签和input标签 1.表单标签:form 这个标签作为一个容器,来收集和提交这个标签中其他相关标签的数据,一般不单独使用 active属性:设置提交路径(接口) method属性:设置请求 ...
自学前端第十五天:伪类伪元素和属性选择器和精灵图
#一.基础伪类选择器(也是交集选择器一种,优先级也要叠加) 1.概念:某个选择器的镜像,当光标移动到盒子时会触发新的一面不同的效果,但是是短暂的而已 2.作用:伪类选择器用于向某些选择器添加特殊的效果 ...

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

伪类、伪元素及五星好评css实现相关推荐

最新文章

热门文章