CSS——选择器

CSS基础选择器

导读

目录

 

CSS选择器的作用

选择器分类

标签选择器

类选择器

id选择器

通配符选择器

基础选择器总结

---

CSS选择器的作用

选择器就是根据不同需求把不同的标签选出来,即选择标签

以上CSS的作用:

1.找到所有h1标签,选择器

2.设置标签的样式

 

选择器分类

选择器分为基础选择器和复合选择器两大类

• 基础选择器是由单个选择器组成的
• 基础选择器包括:标签选择器、类选择器、id选择器和通配符选择器

 

标签选择器

标签选择器(元素选择器)是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式

语法

标签名{

    属性1:属性值1;

    属性2:属性值2;

    属性3:属性值3;

...

 }

作用

标签选择器可以把某一类标签全部选择出来,比如所有的<div>和<span>标签

优点

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

缺点

不能设计差异化样式,只能选择全部的当前标签

 

类选择器

类选择器:差异化不同标签

HTML：class表示

CSS："."表示

语法

<div class='red'>变红色</div>

结构需要用class属性来调用class类

注意

1.类选择器使用"."（英文点号）进行标识，后面紧跟类名（自定义）

2.可以理解为给这个标签起了一个名字，来表示

3.长名称或词组可以使用中横线来为选择器命名

4.不要使用纯数字、中文等命名，尽量使用英文字母来表示

5.命名要有意义，尽量使别人一眼就知道这个类名的目的

6.命名规范：

头：head

内容：content/container

尾：footer

导航：nav

侧栏：sidebar

栏目:column

页面外围控制整体布局宽度：wrapper

左右中：left right center

登录条：loginbar

标志：logo

广告：banner

页面主体：main

热点：hot

新闻：news

下载：download

子导航：subnav

...

类选择器口诀：样式点定义 结构类调用 一个或多个 开发最常用

 

总结

1.多类名使用方式

<div class="red font20">亚瑟</div>

（1）在标签class属性中写多个类名

（2）多个类名中间必须用空格分开

（3）这个标签就可以分别具有这些类名的样式

2.多类名开发中使用场景

（1）可以把一些标签元素相同的样式（共同的部分）放到一个类里面

（2）这些标签都可以调用这个公共的类，然后再调用自己独有的类

（3）从而节省CSS代码，统一修改也非常方便

 

id选择器

id选择器：指定特定id的元素样式

HTML：id属性设置

CSS："#"定义

#id名{

         属性1：属性值1；

         ...

      }

例如

#nav{

    color:red;

   }

id选择器的口诀：样式#定义，结构id调用，只能调用一次，切勿被人使用

id选择器和类选择器的区别

①类选择器（class）可以同时被多次调用

②id选择器只能被调用一次

③类选择器在修改样式中用的最多，id选择器一般用于页面唯一性的元素上，经常和Javascript搭配使用

 

通配符选择器

通配符选择器用"*"定义，表示选取页面中所有元素（标签）

语法

*{

   属性1：属性值1；

}

• 通配符选择器不需要调用，自动给所有元素使用样式

 

基础选择器总结

基础选择器	作用	特点	使用情况	用法
标签选择器	选出所有相同标签	不能差异化选择	较多	p{ color: red }
类选择器	可以选出一个或多个标签	可以根据需求选择	非常多	.nav{ color: red;}
id选择器	一次只能选择一个标签	id属性只能在HTML文档中出现一次	一般和js搭配	#nav{ color: red;}
通配符选择器	选择所有的标签	选择的太多，有部分不需要	特殊情况下使用	* {color: red}

 

 

 

 

 

 

• 每个基础选择器都有使用场景，都需要掌握
• 如果是修改样式，类选择器使用最多

 

（本文是根据b站黑马程序员pink老师做的笔记）