css 基础选择器

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

涉及到的选择器有:标签选择器,类选择器,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 {
   属性:属性值;
   .... 
}

注意:

  1. 使用class属性指定的类名是有命名规范的。

    • 长名称或词组可以使用中横线来为选择器命名。
    • 不要纯数字、中文等命名, 尽量使用英文字母来表示。
  2. 可以为同一个标签设置多个类。例如下面的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个, 每个都有自己的价值, 可能再某个地方都能用到。但是如果说,一定要找个最常用的,那么,肯定是类选择器。


团队约定

选择器

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

/* 不推荐 */
*{}
#jdc {}
div{}   因为div 没有语义,我们尽量少用
评论(0
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!