CSS-01

最新推荐文章于 2024-01-25 11:41:22 发布

Uhisa

最新推荐文章于 2024-01-25 11:41:22 发布

阅读量63

点赞数

分类专栏：小白成长

本文链接：https://blog.csdn.net/NoNamePeople/article/details/119391637

版权

小白成长专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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>

截屏2021-08-04 18.28.29

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>

截屏2021-08-04 18.45.45

类选择器

格式:
.类名{
属性:值;
}

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>

截屏2021-08-04 18.59.32

后代选择器

作用: 找到指定标签的所有特定的后代标签, 设置属性

注意点:
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>

截屏2021-08-04 19.17.36

子代选择器

1.子元素选择器只会查找儿子, 不会查找其他被嵌套的标签
2.子元素选择器之间需要用>符号连接, 并且不能有空格
3.子元素选择器不仅仅可以使用标签名称, 还可以使用其它选择器
4.子元素选择器可以通过>符号一直延续下去

上面的例子，使用子代选择器：只选中div1下的p标签（只认儿子）

		<style>
			.div1>p{
					color: royalblue;
				}
		</style>

截屏2021-08-04 19.22.22

并集选择器

作用: 给所有选择器选中的标签设置属性
格式:
选择器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>

Uhisa

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS-01

CSS-01CSS的学习一共分为两大部分, 一个是CSS的选择器, 另一个是CSS的属性.标签选择器标签选择器选中的是当前界面中所有的标签, 而不能单独选中某一个标签只要是HTML中的标签就可以作为标签选择器(h/a/img/ul/ol/dl/input…)使用了标签选择器，无论div“隐藏”多深，都可以被选中，因为局限性太广，所以不太推荐使用 <style> div{ color: cornflowerblue; }
复制链接

扫一扫