CSS-01
CSS的学习一共分为两大部分, 一个是CSS的选择器, 另一个是CSS的属性.
标签选择器
- 标签选择器选中的是当前界面中所有的标签, 而不能单独选中某一个标签
- 只要是HTML中的标签就可以作为标签选择器(h/a/img/ul/ol/dl/input…)
- 使用了标签选择器，无论div“隐藏”多深，都可以被选中，因为局限性太广，所以不太推荐使用
<style>
div{
color: cornflowerblue;
}
</style>
<body>
<div>我是一个div</div>
<div>
<div>
<div>我是孙子元素div</div>
</div>
</div>
</body>
id选择器
格式： #id名称{
属性:值;
}
1.id就像一个人的身份证，在同一个界面中不能重复
2.使用id选择器时，不要忘了“#”
3.id名称的规范格式：
3.1 id的名称只能由字母/数字/下划线，a-z 0-9 _
3.2 id名称不能以数字开头
3.3 id名称不能是HTML标签的名称，不能是a h1 img input …
*5.在企业开发中一般情况下如果仅仅是为了设置样式, 建议不使用id ,因为id是留给js使用的
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
<style>
/* id选择器 */
#div1{
color: cornflowerblue;
}
#div2{
color: blueviolet;
}
#div3{
color: yellowgreen;
</style>
类选择器
格式:
.类名{
属性:值;
}
1.类名：class可以重复，就像人的名字
2.使用id选择器时，不要忘了“.”
3.类名的命名规范和id一致
4.类名就是专门用来设置样式的
5.绑定多个类名：<标签名称 class=“类名1 类名2 …”> 空格隔开
<div class="div4">div4</div>
<div class="div5">div5</div>
<div class="div5">div6</div>
<style>
/* 类选择器 */
.div4{
color: bisque;
}
.div5{
color: chocolate;
}
</style>
后代选择器
作用: 找到指定标签的所有特定的后代标签, 设置属性
注意点:
1.后代选择器必须用空格隔开
2.后代不仅仅是儿子, 也包括孙子/重孙子, 只要最终是放到指定标签中的都是后代
3.后代选择器不仅仅可以使用标签名称, 还可以使用其它选择器
4.后代选择器可以通过空格一直延续下去(建议最多三层)
<style>
/*div1下的所有的p标签都会设置成蓝色*/
.div1 p{
color: royalblue;
}
/*设置完后，div2下的所有p标签设置成绿色*/
/*.div1 .div2 p*/
.div2 p{
color: green;
}
</style>
<div class="div1">
<p>苹果</p>
<p>香蕉</p>
<p>雪梨</p>
<div class="div2">
<p>篮球</p>
<p>足球</p>
<p>橄榄球</p>
</div>
</div>
子代选择器
1.子元素选择器只会查找儿子, 不会查找其他被嵌套的标签
2.子元素选择器之间需要用>符号连接, 并且不能有空格
3.子元素选择器不仅仅可以使用标签名称, 还可以使用其它选择器
4.子元素选择器可以通过>符号一直延续下去
上面的例子，使用子代选择器：只选中div1下的p标签（只认儿子）
<style>
.div1>p{
color: royalblue;
}
</style>
并集选择器
作用: 给所有选择器选中的标签设置属性
格式:
选择器1,选择器2{
属性:值;
}
注意点:
1.并集选择器必须使用,来连接
2.选择器可以使用标签名称/id名称/class名称
<div class="div1">我是一个div标签</div>
<p class="div1">我是p标签</p>
<p class="p1">我是p标签</p>
<p class="p2">我是p标签</p>
<style>
/* 并集选择器 */
.div1,.p2{
color: seagreen;
}
</style>
扫一扫
1626
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
