CSS设置transform: skewY后子元素a#buy反向倾斜无效如何解决？

问题根因 #

你遇到的问题是两个原因共同导致的：

1. CSS规范中，transform 属性默认不对 display: inline 的非替换元素生效，<a> 标签默认就是行内元素，所以你设置的倾斜校正不生效。
2. 你写的多元素选择器写法不严谨，逗号分隔的每个选择器都是独立作用的，你现有写法里只有p#name是限定在div.offers div#offer1下的，剩下的p#price/p#wear/a#buy都是全局匹配规则，不过如果你的页面内这些id是唯一的，这个问题暂时不会影响功能，但不符合代码规范。

修复方案 #

你只需要给a#buy设置块级/行内块级的display属性即可，同时可以优化选择器写法避免潜在问题，修正后的CSS代码如下：

/* 先修正选择器，所有子元素都限定在offer1容器内 */
div.offers div#offer1 p#name, 
div.offers div#offer1 p#price, 
div.offers div#offer1 p#wear, 
div.offers div#offer1 a#buy {
    transform: skewY(-8deg);
}
/* 给a标签设置行内块属性，让transform生效 */
div.offers div#offer1 a#buy {
    display: inline-block;
    /* 如果需要调整按钮的位置、宽高也可以在这里加，比如：
    padding: 4px 12px;
    margin-top: 10px;
    */
}

如果想简化代码，也可以直接给所有子元素统一设置规则，不用逐个写选择器：

div.offers div#offer1 > * {
    transform: skewY(-8deg);
}
div.offers div#offer1 a#buy {
    display: inline-block;
}

内容的提问来源于stack exchange，提问作者IAmAze