css3

问题 I've implemented a flip rotation using css: .flip-card { position: relative; z-index: 1; -webkit-perspective: 1000px; -moz-perspective: 1000px; -o-perspective: 1000px; perspective: 1000px; } .flip-card-content { width: 100%; height: 100%; -webkit-transform-style: preserve-3d; -webkit-transition: all 0.5s ease-in-out; -moz-transform-style: preserve-3d; -moz-transition: all 0.5s ease-in-out; -o-transform-style: preserve-3d; -o-transition: all 0.5s ease-in-out; transform-style: preserve-3d;

问题 Yesterday I ran into this: One of my :hover -states stopped working. I found out that If I change this: div.item {} div.item:hover {} div.item:nth-child(even) {} to this: div.item {} div.item:nth-child(even) {} div.item:hover {} it works again. I've created a demo on jsfiddle to show both cases. Can somebody explain, why the :hover -state is overwritten by the selector? 回答1: The selectors have the same specificity, so the one that comes last takes priority. 回答2: To override the equal

问题 I have multiple @font-face fonts in my stylesheet, is there a way of only load the ones being used on that page? Other than loading a separate stylesheet for each page that features that font. 回答1: I don't know how browsers are really implementing it, but CSS Fonts Module Level 3 says in its "Font loading guidelines" section, that browsers must download only the fonts that are used in the current page : The @font-face rule is designed to allow lazy loading of fonts, fonts are only downloaded

问题 Yesterday I ran into this: One of my :hover -states stopped working. I found out that If I change this: div.item {} div.item:hover {} div.item:nth-child(even) {} to this: div.item {} div.item:nth-child(even) {} div.item:hover {} it works again. I've created a demo on jsfiddle to show both cases. Can somebody explain, why the :hover -state is overwritten by the selector? 回答1: The selectors have the same specificity, so the one that comes last takes priority. 回答2: To override the equal

问题 Let's say I have this <ul> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> <li>test</li> </ul> ul { column-count: 2; } and I want to align first column to right and the second to left, is there any way to target one of those columns using css selectors? 回答1: As of now, there is no way to target nth column with pure css. 回答2: It is not clear if you want to align the whole column or the elements inside. If you want the first one, Zach Saucier answer would be the way. If it

问题 Is there currently any data in a javascript mouse event that would allow me to easily find or calculate a mouse position relative to the 3D space of a transformed element? To illustrate visually, At left is the div without a 3d matrix, at right is the div after 3d transformation. o is the origin of the mouse event + /| / | +-----+ + | | | | | | o| => | o| | | | | +-----+ + | \ | \| + In the script below, clicking the same pixels in the div will report an event.layerX which is in the 2d

问题 I've been trying to use a SVG as a background-image for an element scaling it using the background-size -property. This works great in most current browsers, but Internet Explorer seems to misinterpret the values, showing the image in a much smaller size when I use only one value, and an incorrect ratio with two values. I've put up an example at http://jsfiddle.net/c7DEw/1/ The width and height of the svg have been set to 100%. I figured it had something to do with the viewBox and enable

问题 I have to create a hexagon and I really want it to be full HTML and CSS. It is almost done, except the fact that it is not fully symmetric. The left corner is not aligned with the right corner. The current css: .hexagon.outer { width: 318px; height: 452px; position: relative; } .hexagon.outer, .hexagon.outer:before, .hexagon.outer:after { background-repeat:no-repeat; background-color: #585858; } .hexagon.outer:before, .hexagon.outer:after { content: ""; position: absolute; width: 262px;

问题 I have a ul tag with display: flex . I need it ordered by column with flex-direction: column; , but it does not work. css for the container #nav li.four_columns ul.sub-menu { width: 600px; display: flex; -webkit-flex-direction: column; flex-direction: column; justify-content: flex-start; align-items: flex-start; flex-flow: wrap; } css for the child #nav li.four_columns ul.sub-menu li { flex-basis: 25%; /* white-space: nowrap; */ /* overflow: hidden; */ /* text-overflow: ellipsis; */ /* border

问题 I'm attempting to make a SCSS mixin for a CSS transform and I want to pass in arguments. However, when using a variable the parentheses of my position value are removed. How it should look once compiled: transform: translateX(-100px); my mixin: @mixin fadeup ($direction, $value) { transform: translate#{$direction} ($value); } when called: @include fadeup(X, 100px); which sadly outputs: transform: translateX 100px; So the parentheses surrounding the 100px value are missing, and so it won't