css 基础选择器

时间：2020-07-01 12:39:32 收藏：0 阅读：231

涉及到的选择器有：标签选择器，类选择器，ID选择器，通配符选择器。

标签选择器

使用HTML标签名称作为选择器，使用此选择器可以页面中某一类标签指定统一的css样式。

语法：

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

举例：

比较典型的是，为页面中所有的超链接a标签去掉下换线。

a {
    text-decoration:none;
}

优缺点：

优点：

能够快速为页面中同类型的标签统一样式。

缺点：

不能差异化选择不同的标签，比如说我想有一个选择器同时选div和span标签，怎么办？

类选择器

听这个选择器的名字就知道了，可以用它来选择一类的标签。

使用：

html：我们使用class属性来为html标签指定它所属的类。

<div class="head">我属于head类</div>
<span class="head">我属于head类</span>
<div class="body">我属于body类</div>

css：可以看到上面使用class属性为html标签指定了两个类，如果我们需要对head类的标签指定样式，可以这样写。

.head {
    属性:属性值;
    ....
}
/* 如果是body类 */
.body {
   属性:属性值;
   .... 
}

注意：

使用class属性指定的类名是有命名规范的。
- 长名称或词组可以使用中横线来为选择器命名。
- 不要纯数字、中文等命名，尽量使用英文字母来表示。

可以为同一个标签设置多个类。例如下面的div指定了两个类，这样这个div就会拥有两个类中所指定的样式。并且如果某一样式重复指定，浏览器会优先使用后面的类所指定的样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .test-class-one {
            border: 1px solid #000;
            height: 50px;
            width: 50px;
        }
        .test-class-two {
            height: 200px;
            width: 200px;
        }
    </style>
</head>
<body>
    <div class="test-class-one test-class-two">我是测试div</div>
</body>
</html>

技术图片

ID选择器

这个id由我们为页面的标签指定，是它的唯一标识。所以，同一个页面中的id不能重复。

通过id选择器我们可以精准地选择某一个标签。

指定id

<div id="idTest">我有唯一的id</div>

使用id选择器选择这个标签

#idTest {
	属性:属性值;
	...
}

通配符选择器

使用 * 通配所有标签，为所有标签指定一个统一的样式。

最典型的使用：

去除所有标签的内外边距。某一些标签会有默认的内外边距，如果不使用下面的css代码来进行去除，在我们布局的时候可能会受到影响。

* {
	margin: 0;
    padding: 0;
}

注意：

通配符选择器会匹配页面所有的元素，降低页面响应速度，不建议随便使用

基础选择器总结

选择器	作用	缺点	使用情况	用法
标签选择器	可以选出所有相同的标签，比如p	不能差异化选择	较多	p { color：red;}
类选择器	可以选出1个或者多个标签	可以根据需求选择	非常多	.nav { color: red; }
id选择器	一次只能选择器1个标签	只能使用一次	不推荐使用	#nav {color: red;}
通配符选择器	选择所有的标签	选择的太多，有部分不需要	不推荐使用	* {color: red;}

基础选择器我们一共学了4个，每个都有自己的价值，可能再某个地方都能用到。但是如果说，一定要找个最常用的，那么，肯定是类选择器。

团队约定

选择器

尽量少用通用选择器
尽量少用 ID 选择器
不使用无具体语义定义的标签选择器 div span

/* 推荐 */
.jdc {}
li {}
p{}

/* 不推荐 */
*{}
#jdc {}
div{}   因为div 没有语义，我们尽量少用