html之css、重要标签

css:层叠样式表

标签选择器

后代选择器

代码

<div id="div1" class="c1">
    <div>
        <p class="c2">哎呀，厉害了</p>
    </div>
    <p class="c2">忘记你了，O(∩_∩)O哈哈~</p>
</div>
<span>啦啦啦~</span>
<p class="c3">你猜他是谁？</p>

#div1 p{
    background-color: darkgreen;
}

div1后面需要加一个空格代表后代

子代选择器

代码

#div1>p{
    background-color: darkgreen;
}

‘>’代表子代

毗邻选择器

代码

#div1+p{
    background-color: darkgreen;
}

用‘+’代表毗邻，必须两个同级标签紧紧的紧紧的紧紧的挨着，向下起作用

兄弟选择器

代码

#div1~p{
    background-color: darkgreen;
}

用‘~’代表兄弟，只要是同级标签就可以，不需要紧挨着，向下起作用

重要标签

1. form 表单（name和value）
2. label 标签
3. ol 有序列表
4. ul 无序列表
5. table 表格
6. div（块级标签）和span（内联标签）

多选框

<select name="sel" id="s1" multiple="multiple">
    <option value="big" selected="selected">大哥</option>
    <option value="small">小哥</option>
    <option value="black">黑社会</option>
    <option value="bigsmall">大小哥</option>
</select>

属性名和属性值相同时，可以只写属性名，如下：

<select name="sel" id="s1" multiple>
    <option value="big" selected>大哥</option>
    <option value="small">小哥</option>
    <option value="black">黑社会</option>
    <option value="bigsmall">大小哥</option>
</select>