5

I have the following HTML structure:

<div class="content">
    <img src="#">
    <!-- Text content here -->
</div>

This forms the basis for a content page of a website I've made which uses a CMS to manage the content, with the ability to select an image and then a WYSIWYG editor for the text content. An example of the page's HTML that would be output by the CMS is:

<div class="content">
    <img src="#">
    <h1>Lorem</h1>
    <p>Lorem ipsum dolor</p>
</div>

Is there a CSS selector that will select the h1 in the example HTML above? I want to be able to remove the top margin of the heading if the text content section begins with a heading, but I can't do this with a class (since the text content is output by the CMS through a WYSIWYG editor).

4

5 回答 5

5

You can try this 

.content > img + h1{
 // css style
}

2nd option

.content > h1:first-child{
// here css
}

3rd 

.content h1:first-child{
// here style
}
于 2013-07-23T05:06:00.977 回答
2 
.content > h1:first-of-type {margin-top:0;}

that should do the trick

于 2013-07-23T05:07:50.613 回答
1

If I understand what you're asking, You would just use h1.

example

h1 {
    margin:0;
}

if you want the very first h1, you can use :first-child

What I normally do when I start coding is that I clean up the browser-made margins and padding.

h1, h2, h3, h4, h5, h6 {
    margin:0;
    padding:0;
}

CSS Selectors: http://www.w3schools.com/cssref/css_selectors.asp

于 2013-07-23T05:06:16.370 回答
0

Try:

.content h1:first-child {
    /* CSS */
}
于 2013-07-23T05:05:40.553 回答
0

or you can also use 

.content h1:first-of-type{
// here style
}
于 2013-07-23T05:08:12.840 回答