css3

问题 Is it possible to use the CSS3 selector :first-of-type to select the first element with a given class name? I haven't been successful with my test so I'm thinking it's not? The Code (http://jsfiddle.net/YWY4L/): p:first-of-type {color:blue} p.myclass1:first-of-type {color:red} .myclass2:first-of-type {color:green} <div> <div>This text should appear as normal</div> <p>This text should be blue.</p> <p class="myclass1">This text should appear red.</p> <p class="myclass2">This text should appear

问题 Is it possible to set the opacity of a background image without affecting the opacity of child elements? Example All links in the footer need a custom bullet (background image) and the opacity of the custom bullet should be 50%. HTML <div id="footer"> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> <li><a href="#">Link 5</a></li> </ul> </div> CSS #footer ul li { background: url(/images/arrow.png) no-repeat 0

问题 i want to design a web site.but tell me what are the sizes i can use for responsive website design. that sizes must contain for mobile,tablets,pcs and other devices.. i want to use them in media queries.. :D EX for Mobile: @media only screen and (min-width: 500px) { } EX for Tablet: @media only screen and (min-width: 800px) { } Give me some resources that you have about responsive website design and about the sizes which i can use for responsive website design .. :D like that i want to know

问题 i want to design a web site.but tell me what are the sizes i can use for responsive website design. that sizes must contain for mobile,tablets,pcs and other devices.. i want to use them in media queries.. :D EX for Mobile: @media only screen and (min-width: 500px) { } EX for Tablet: @media only screen and (min-width: 800px) { } Give me some resources that you have about responsive website design and about the sizes which i can use for responsive website design .. :D like that i want to know

问题 I am working with the CSS grid. I thought that I could make one single grid item to a hyperlink, if I wrapped it in an a tag. But I can see that this solution is not working. The whole grid consist of around 30 grid elements made with the CSS grid. Building the grid up with flex boxes is therefore not a good solution. Does anybody have an idea on how I can turn the whole grid column into a hyperlink? .item2 { grid-row: 1 / 1; grid-column: 7/13; height: 340px; display: flex; justify-content:

问题 Hi so I was making a website and I just realized that it when I want to position the html element, it will position the element using the right side of it. Here's an example of what I mean. I was trying to position an image in the center using percentages. Trimmed down version of my css code: .image{position:absolute;right:50%; So when I loaded the website, it shows up with the right corner of the picture at 50%, not the center of the image at 50%. Is there anyway to position using center of

问题 Browser support: I need this to work with IE8+. CSS3 + polyfill solution accepted, but CSS only solution even better. I have a series of divs positioned side-by-side. I want their height to be equal to the heighest div in the "row". The key here is that the number of divs next to another varies (from 4 by row to 3 by row). This is because this is a responsive design, in which we set the width of a product to 25% by default, but 33% when in smaller screen size. See the code below, and the

问题 This question already has answers here : Limit text length to n lines using CSS (13 answers) Applying an ellipsis to multiline text (25 answers) Closed 2 years ago . I have this style .ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } which renders like this: If i remove white-space: nowrap; I get like this: But I want the ellispes from 3rd line(or before only if text is shorter) 回答1: Well there are multiple ways to do so, check the snippet below for certain ones.

问题 Closed. This question is off-topic. It is not currently accepting answers. Want to improve this question? Update the question so it's on-topic for Stack Overflow. Closed 6 years ago . I'm trying to figure out how the card swipe/flip effect was done as seen on this site: http://catalystconference.com/ (under the "Our Favorites" and similar sections). Can this be accomplished using only CSS? 回答1: Don't rely on text-indent, because it forces the browser to actually render the negative space that

问题 So basically I have an image of a sunset I want to use as my banner for my webpage but I just want to use a portion of it, not the whole image. I figured out how to clip the image to the size I want; now I'm just trying to figure out how I can reposition the image so that the portion of the image I want to be seen is displayed in my chosen clip size. Thanks in advance. <html> <head> <style> #banner { position: absolute; display: block; margin-left: 15%; clip: rect(8px, 960px, 200px, 0px); } <