css3

问题 I have code like this: <style> h2 ~ p:nth-of-type(2n+3) { font-weight: 600; } </style> <div> <h2>Cats</h2> <p>Normal cat</p> <p>Normal cat</p> <p>Weird cat</p> <p>Normal cat</p> <p>Weird cat</p> <p>Normal cat</p> <h2>Dogs</h2> <p>Normal dog</p> <p>Normal dog</p> <p>Weird dog</p> <p>Normal dog</p> <p>Weird dog</p> <p>Normal dog</p> </div> I can not change HTML or use jQuery or JS. I need to use CSS to make weird dogs and cats bolder. But when i display above code not only weird cats and dogs

问题 When I use CSS3 transitions on an element's width/height or top/right/bottom/left, and I adjust the page zoom using CTRL + , CTRL - or CTRL 0 , the browser animates the change to these attributes. Is there a way to use these transitions, but prevent the browser from using them only when zooming? EDIT: Sample HTML: <div></div> Sample CSS: div { background:red; height:200px; width:200px; -moz-transition:1s; -webkit-transition:1s; transition:1s; } div:hover { height:300px; width:300px; } Code

问题 I would like to make a CSS background on "div" with a specific design and this design should be responsive (width and height). You can view the example generated with the properties "border" inside "div" with properties "position absolute" and separated the other "div", but this example isn't correct because when I increase the screen, the width isn't 100%. Image (color purple and transparent): Code: .trape { min-height: 250px; border-top: 50px solid transparent; border-bottom: 50px solid

问题 I have a facebook page with age restriction (above 21) so I am aware that the like box won't be visible on my website unless the user is logged in on facebook and authenticate that he/she is above 21. My problem is I have a div container in which I am showing the faces along with like button, but that is visible only after the user is logged in on FB. Without it my div container is empty and it looks awful. Is there any way to show a sample image on the div container if the user is not logged

问题 I'm curious to the behaviour of using calc() in setting a CSS variable. Example: #test { --halfWidth: calc(100% / 2); } Now, if the #test element, say a div , was 500px wide, I would like the --halfWidth variable to be set to 250px. But, as far as I can tell the var(--halfWidth) code used elsewhere simply drops in the calc(100% / 2) string instead of 250px . Which means that I can't use the calculation of say element A and use it in element B later on, since it would simply set for example

问题 I am having trouble getting flex to center elements (with margin) when it wraps. It looks perfect when the screen is wide But it is not centering it when it wraps (because of the right-margin of the first button) Here is my code: https://jsfiddle.net/dLz7120k/2/ footer { display: flex; flex-flow: row wrap; justify-content: center; } button { margin: 0 20px 10px 0; } button:last-child { margin-right: 0; } Is there any way to make it ignore the right-margin of the first button when it wraps? (I

问题 This is a chevron : .shape { height: 200px; width: 300px; position: absolute; overflow: hidden; } .shape:before, .shape:after { content: ""; position: absolute; width: 150px; height: 120px; background: red; top: 10px; } .shape:before { transform-origin: 0% 100%; transform: skewY(20deg); } .shape:after { transform-origin: 100% 100%; transform: skewY(-20deg); right: 0; } <div class="shape"></div> What I basically need to create is this : How can we stretch the chevron on hover? 回答1: A slightly

问题 How can I allow users to change web page -built with bootstrap- font size when clicking on a button? I would like to change all components font size relatively. Is this possible? Thanks, 回答1: This is usually done with Javascript and cookies. Here's an example using jQuery: Quick and Easy jQuery Font Resizer Tutorial 回答2: Bootstrap uses global @baseFontSize parameter that controls font size of all elements, but changing it would require re-compilation of the css with less. 来源： https:/

问题 The following css animation works perfect in Chrome, Mozilla, Opera browsers but doesn't work in Internet Exporer 10 and 11. What's wrong? Please see http://jsfiddle.net/bm72w3n3/ .changed { -webkit-animation:target-fade 5s 1; -moz-animation:target-fade 5s 1; animation:target-fade 5s 1; } @-webkit-keyframes target-fade { 0% { text-shadow: 0 0 10px yellow; } 100% { -webkit-transition: text-shadow 0.2s linear; } } @-moz-keyframes target-fade { 0% { text-shadow: 0 0 10px yellow; } 100% { -moz

问题 here is the codepen I want to add vertical spacing ONLY to elements between line 1 and line 2. Alternatively, only to between line 1 and line 2, and line 2 and line 3. The flex items are random, so the amount, size of each, is dynamic. I cannot add margins to all, because that would ruin the layout in case there is no second row at all. HTML <div class="flexContainer"> <div class="flexItem">a a a aaaaaaa a ax</div> <div class="flexItem">bbbx</div> <div class="flexItem">c c c c c cx</div> <div