CSS选择器：如何在div中引用属性

Question

<div id ="group">
    <img src= ' ' id = '1'>
    <img src= ' ' id = '2'>
    .......
</div>

I would like to reference all the img in the div id 'group' , how to mark it in css? Also, Which is better? Assign all to img / create a class eg. #img.groupItem and reference it everytime? Thanks

The source code:

<div id="book">
    <img alt="flip book" src="demo/medium/Web081112_P001_medium.jpg">
    <img alt="flip book" src="demo/medium/Web081112_P002_medium.jpg">
    <img alt="flip book" src="demo/medium/Web081112_P003_medium.jpg">
</div>

After running the javascript:

<div id="page" style="display: block; width: 1180px; height: 767px; left: 50%; top: 50%; margin: -413.5px auto 0px -590px; cursor: default;">
    <div id="book" style="position: relative; width: 1180px; height: 767px; transform: translate3d(0px, 0px, 0px);">
        <div class="turn-page-wrapper" page="1" style="position: absolute; overflow: hidden; width: 590px; height: 767px; top: 0px; right: 0px; left: auto; bottom: auto; z-index: 0; display: none;">
            <div id="cover" class="turn-page p1" style="width: 590px; height: 767px;">
            </div>
        </div>
        <div class="turn-page-wrapper" page="2" style="position: absolute; overflow: hidden; width: 590px; height: 767px; top: 0px; left: 0px; right: auto; bottom: auto; z-index: 7;">
            <div style="position: absolute; top: 0px; left: 0px; overflow: hidden; z-index: auto; width: 968px; height: 968px;">
                <div class="turn-page p2" style="width: 590px; height: 767px; position: absolute; top: 0px; left: 0px; bottom: auto; right: auto;">
                    <img alt="flip book" src="demo/medium/Web081112_P001_medium.jpg">
                </div>
            </div>
        </div>
    </div>
</div>

The html code is like that for a single img , I used the answer provided here but still not work. I believe this is the problem caused by generate html code?

Answer 1

CSS was meant to apply global styling with the help of selectors .

The descendant selector is what you are looking for:

#group img {
    // code
}

Answer 2

You can create a selector to reference those, yes:

#group img { width: 32px; height: 32px }

However, if possible, it's better to just create a class for what you want to do:

.icon { width: 32px; height: 32px }

Basically you want to decide if this really is something you only want to apply at that location. Is that HTML structure how it always is going to be? What if you change the ID? What if you use a div with a background image instead of an img tag? Those are the sorts of questions you want to be asking yourself.