CSS基础选择器

最新推荐文章于 2023-06-22 15:09:42 发布

小熊空间

最新推荐文章于 2023-06-22 15:09:42 发布

阅读量113

点赞数

分类专栏：前端文章标签： css 前端

本文链接：https://blog.csdn.net/wjnhub/article/details/106407145

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

CSS基础选择器

完整选择器文档
根据不同的需求吧不同的标签选择出来

基础选择器	作用	特点	使用情况	用法
标签选择器	某一类相同标签	不能差异化选择	较多	p {color: red;}
类选择器	单独一个或者某几个标签	可以更具需求选择	非常多	.maozi {color: red;}
id选择器	一次只能选择一个标签	唯一性，只出现一次	一般和js搭配	#blue {color:blue; }
通配符选择器	选择所有标签	选择太多，有部分不需要	特殊情况使用	* {color: red;}

标签选择器

为页面中某一类标签全部指定统一的CSS样式，不能差异化设置

标签名 {
	属性1: 属性值1;
	属性2: 属性值2;
	...
}

类选择器

为单独一个或者某几个标签设置样式，可以差异化设置(最常用)

.类名 {
	属性1: 属性值1;
	属性2: 属性值2;
	...
}

举例：

<ul>
    <li>小明</li>
    <li class="maozi">小红</li>
    <li>小丽</li>
    <li class="maozi">小张</li>
</ul>

<style>
    .maozi {
        color: red;
    }
</style>

注意

类选择器用“.”进行标示，后面紧跟类名（自己起的名字）
长名称或词组可以用短横线分割
不要使用纯数字、中文等命名，尽量使用英文字母表示
名字尽量能简单易懂

实现一个简单视图
在这里插入图片描述
代码：

<body>
    <div class="red"></div>
    <div class="green"></div>
    <div class="red"></div>
</body>

<style>
    .red {
        width: 100px;
        height: 100px;
        background-color: red;
    }
    .green {
        width: 100px;
        height: 100px;
        background-color: green;
    }
</style>

多类名使用
class属性中写多类名，中间用空格分开
可以把公共样式和独有样式分开，提高代码复用率

<body>
    <div class="red font35">多类名使用</div>
</body>

<style>
    .red {
        color: red;
    }
    .font35 {
        font-size: 35px;
    }
</style>

再用多类名实现上图

<body>
    <div class="red box"></div>
    <div class="green box"></div>
    <div class="red box"></div>
</body>

<style>
    .red {
        background-color: red;
    }
    .green {
        background-color: green;
    }
    .box {
        width: 100px;
        height: 100px;
    }
</style>

id选择器

跟类选择器区别： 唯一性，只能被调用一次，经常和JavaScript配合使用
语法

#id名 {
	属性1: 属性值1;
	...
}

<body>
    <div id="blue">我是蓝色</div>
</body>

<style>
#blue {
        color: blue;     
    }
</style>

通配符选择器

不需要调用，自动给所有元素使用样式
语法

* {
	color: red;
}

小熊空间

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录