首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么css转换不能与:target一起使用?

CSS转换(transform)和:target伪类不能一起使用的原因是,:target伪类是用于选择当前活动的目标元素,而CSS转换是用于对元素进行变换(旋转、缩放、平移等)的属性。

当使用:target伪类时,浏览器会将目标元素的样式应用于当前活动的目标元素。但是,CSS转换是基于元素的几何属性进行操作的,例如宽度、高度、位置等。而:target伪类只是改变了元素的样式,而没有改变元素的几何属性。

因此,当我们尝试同时使用CSS转换和:target伪类时,CSS转换会改变元素的几何属性,而:target伪类只会改变元素的样式,这可能导致元素的位置和大小不正确,从而破坏了转换效果。

解决这个问题的方法是,将转换应用于目标元素本身,而不是使用:target伪类。可以通过为目标元素添加一个类,并在CSS中使用该类来应用转换效果。例如:

HTML代码:

代码语言:txt
复制
<div id="targetElement" class="transformed">目标元素</div>

CSS代码:

代码语言:txt
复制
.transformed {
  transform: rotate(45deg);
}

这样,无论目标元素是否处于活动状态,转换效果都会被应用。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

为什么推荐使用BeanUtils属性转换工具

1 背景 之前在专栏中讲过“推荐使用属性拷贝工具”,推荐直接定义转换类和方法使用 IDEA 插件自动填充 get / set 函数。...如果转换为字符串,直接进行打印,并不会报错。...如果手动定义转换器,使用 IDEA 插件(如 generateO2O)自动转换使用 cglib 默认则不会映射 number 属性,B 中的 number 为 null。...如果手动定义转换器,使用 IDEA 插件(如 generateO2O)自动转换: 在编码阶段就可以非常明确地发现这个问题: ?...因此慎用属性转换工具,如果可能建议自定义转换类,使用 IDEA插件自动填充,效率也挺高, A 或 B 中任何属性类型匹配,甚至删除一个属性,编译阶段即可报错,而且直接调用 get set 的效率也是非常高的

1.6K30

为什么推荐使用BeanUtils属性转换工具

1 背景 之前在专栏中讲过“推荐使用属性拷贝工具”,推荐直接定义转换类和方法使用 IDEA 插件自动填充 get / set 函数。...推荐的主要理由是: 有些属性拷贝工具性能有点差 有些属性拷贝工具有“BUG” 使用属性拷贝工具容易存在一些隐患(后面例子会讲到) 2 示例 首先公司内部就遇到过 commons 包的 BeanUtils...打断点可以看到,属性拷贝之后 B 类型的 second 对象中 ids 仍然为 Integer 类型: 如果转换为字符串,直接进行打印,并不会报错。...---- 如果手动定义转换器,使用 IDEA 插件(如 generateO2O)自动转换: public final class A2BConverter { public static B...之前对各种属性映射工具的性能进行了简单的对比,结果如下: 因此慎用属性转换工具,如果可能建议自定义转换类,使用 IDEA插件自动填充,效率也挺高, A 或 B 中任何属性类型匹配,甚至删除一个属性,

76120

『设计模式』适配器模式(Adapter)

适配器模式(Adapter) 适配器模式把一一个类的接口变换成客户端所期待的另一种接口,从而使原本接口匹配而无法在一起工作的两个类能够在一起工作。...这就带来了一个问题:我们在应用程序中已经设计好了接口,与这个第三方提供的接口不一致,为了使得这些接口兼容的类(不能在-起工作)可以在一起工作,Adapter模式提供了将一个类(第三方库)的接口转化为客户...Adapter模式有对象适配器和类适配器两种形式的实现结构 类适配器采用“多继承”的实现方式带来了不良的高耦合,所以一般推荐使用。 对象适配器采用“对象组合”的方式,更符合松耦合精神。...使用情况 系统需要使用现有的类,而此类的接口不符合系统的需要。 想要建立一个有以重复使用的类,该类可能与其它不相关的类或不可预见的类(即那些接口可能不一定兼容的类)协同工作。...本质 转换匹配,复用功能。

69120

掌握设计模式之适配器模式

大概意思就是将一个已存在类的接口转换为另一个接口去使用,使得在不需要修改原有代码的情况下使得原本接口兼容的类,能与其他类正常工作。...这里强调了不改动原有系统的源代码的情况下,对兼容的接口进行适配,其实就是一层转换转换成已有系统所采用的接口方式。...Adapter 适配者:需要要新建,并且要把 Adaptee 被适配者类转换Target 目标类,转换方式一般采用类继承或者对象组合的方式....适配器模式应用场景 了解那么多关于适配器的使用,我们再来总结下使用适配器模式的常见场景: 当已存在类的接口无法满足的所需要接口的功能,即接口之间兼容。...当需要创建一个可重用的类,而该类能与多个不同类一起工作。 大多数使用第三方库的应用程序可以使用适配器作为应用程序和第三方库之间的一个中间层,使应用程序与三方库解耦。

56620

为什么我用 JavaScript 来编写 CSS

作为替代,我用 JavaScript 编写了所有的 CSS。 我知道你在想什么:“为什么有人会用 JavaScript 编写 CSS 呢?!” 这篇文章我就来解答这个问题。...如下是它与 React 一起使用的例子: import styled from 'styled-components' const Title = styled.h1` color: palevioletred...为什么我喜欢 CSS-in-JS? 主要是 CSS-in-JS 增强了我的信心。我可以在产生任何意外后果的情况下,添加、更改和删除 CSS。我对组件样式的更改不会影响其他任何内容。...如果删除组件,我也会删除它的 CSS。不再是只增不减的样式表了!✨ 信心:在产生任何意外后果的情况下,添加、更改和删除 CSS,并避免无用代码。 易维护:再也不需要寻找影响组件的 CSS 了。...谁在使用 CSS-in-JS? 有上千家公司在生产中使用 CSS-in-JS,包括 Reddit、Patreon、Target, Atlassian、Vogue、GitHub、Coinbase 等等。

1.3K50

适配器模式(javascript版)3

//适配器模式(不同的) //思想:因为旧接口兼容啊所以须要适配器适配一下,兼容才能插到里面 //先写两个类。...->中国插头` //当前旧--转换器---新的可以插上的插头 //返回给对象 } } //我告诉你我要的插头new Target() let target = new...一个适配允许通常因为接口兼容而不能在一起工作的类工作在一起,做法是将类自己的接口包裹在一个已存在的类中。...我们国家的电器使用普通的扁平两项或三项插头,而去外国的话,使用的标准就不一样了,比如德国,使用的是德国标准,是两项圆头的插头。怎样解决这个问题呢?只要使用一个电源转化器就行了。...第一为什么直接买德国的插头充呢,因为德国的插头是圆有的啊,因为插头是圆的,所以插槽也是圆圆的,中国是扁平两项或三项插头 !

25420

移动端页面按手机屏幕分辨率自动缩放的js

maximum-scale ='+phoneScale +',user-scalable=no,">'); 18 } 19       做手机端页面最头疼的就是物理分辨率和逻辑分辨率的转换了...在手机端的样式也会因此大乱,在页面头部加入以上一段js之后,在手机端就可以正常显示了, var phoneScale = phoneWidth/750; 除以的为设计图设计的页面宽度,750是按iphone6来设计(根据自己使用需求来修改...980px; opera:850px; Andriod webkit:800px; IE:974px; 然后会把这个980px虚拟窗口装进宽度为750px的iphone6中,当然这样的话必须缩放,这就是为什么在手机中展现电脑端页面没有出现横向滚动条...但WebKit从去年开始取消了对target-densitydpi的支持。(所以现在建议写该属性了) 想实现target-densitydpi=device-dpi的效果有什么方法?...提交此次补丁的WebKit开发者说可以用responsive images 和 CSS device units来替代。

5.4K80

开发一个在线 Web 代码编辑器,如何?今天来教你!

本篇文章我希望和大家一起,尝试创建一个在线的 Web 代码编辑器,并在 HTML、CSS 和 JavaScript 的帮助下实时显示结果。我在本文的最后也放置了源代码的下载链接。...Iframes 如何在 React 中工作 iframe 通常与纯 HTML 一起使用。将 iframe 与 React 一起使用不需要很多更改,主要是将属性名称转换为驼峰式。...但有一点值得注意,就是我们希望在每次输入时都重新渲染组件,这就涉及到后续优化的地方。...你可能会问:为什么我们需要使用 setTimeout() ? 如果我们在没有它的情况下编写它,那么每次在编辑器中按下一个键,我们的 iframe 都会更新,这通常不利于性能。...写在最后 本文创建的 Web 代码编辑器还有很多可以改进的地方,希望你能在此基础上做很多的扩展,丰富编辑器的功能与界面!

11.7K30

【实战】快来和我一起开发一个在线 Web 代码编辑器

本篇文章我希望和大家一起,尝试创建一个在线的 Web 代码编辑器,并在 HTML、CSS 和 JavaScript 的帮助下实时显示结果。我在本文的最后也放置了源代码的下载链接。...Iframes 如何在 React 中工作 iframe 通常与纯 HTML 一起使用。 将 iframe 与 React 一起使用不需要很多更改,主要是将属性名称转换为驼峰式。...但有一点值得注意,就是我们希望在每次输入时都重新渲染组件,这就涉及到后续优化的地方。...你可能会问:为什么我们需要使用 setTimeout() ? 如果我们在没有它的情况下编写它,那么每次在编辑器中按下一个键,我们的 iframe 都会更新,这通常不利于性能。...写在最后 本文创建的 Web 代码编辑器还有很多可以改进的地方,希望你能在此基础上做很多的扩展,丰富编辑器的功能与界面!

45220

美团前端一面高频面试题

(3)减少使用@import,建议使用link,因为后者在页面加载时一起加载,前者是等待页面加载完成之后再进行加载。选择器性能:(1)关键选择器(key selector)。...String 类型的值转换如同使用 Number() 函数进行转换,如果包含非数字值则转换为 NaN,空字符串为 0。Symbol 类型的值不能转换为数字,会报错。...如果有并且返回基本类型值,就使用该值进行强制类型转换。如果没有就使用 toString() 的返回值(如果存在)来进行强制类型转换。...在实际的缓存机制中,强缓存策略和协商缓存策略是一起合作使用的。浏览器首先会根据请求的信息判断,强缓存是否命中,如果命中则直接使用资源。...如果命中则根据头信息向服务器发起请求,使用协商缓存,如果协商缓存命中的话,则服务器返回资源,浏览器直接使用本地资源的副本,如果协商缓存命中,则浏览器返回最新的资源给浏览器。

62630

时下最流行前端构建工具Webpack 入门总结

历史上也出现了一系列构建工具,一些常见的如下: 常见的构建工具 其中,Webpack 凭借其强大的功能与良好的使用体验,还有有庞大的社区支持,在众多构建工具中脱颖而出成为时下最流行的构建工具。...该 loader 可以搭配svgo-loader一起使用,svgo-loader 是 svg 的优化器,它可以删除和修改 SVG 元素,折叠内容,移动属性等,具体展开描述。...不要将 style-loader 和 mini-css-extract-plugin 针对同一个 CSS 模块一起使用!...10. postcss-loader PostCSS 是一个允许使用 JS 插件转换样式的工具。...// 建议 mini-css-extract-plugin 与 css-loader 一起使用 // 将 loader 与 plugin 添加到 webpack 配置文件中 const MiniCssExtractPlugin

1.1K30
领券