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;
}
用‘~’代表兄弟,只要是同级标签就可以,不需要紧挨着,向下起作用
重要标签
- form 表单(name和value)
- label 标签
- ol 有序列表
- ul 无序列表
- table 表格
- 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>