当前位置: 首页 > article >正文

CSS新手入门笔记整理:CSS基本选择器

id属性

id属性具有唯一性,也就是说,在一个页面中相同的id只能出现一次。在不同的页面中,可以出现两个id相同的元素。

语法

<div id="text">
......
</div>

class属性

class,顾名思义,就是“类”,它与C++、Java等编程语言中的“类”相似。我们可以为同一个页面的相同元素或者不同元素设置相同的class,然后使相同class的元素具有相同的CSS样式。

语法

<div class="text">
......
</div>

选择器

选择器,就是指用一种方式把你想要的那个元素选中。只有把它选中了,才可以为这个元素添加CSS样式。

格式

选择器
{
  属性1:取值1;
  ......
  属性n:取值n;
}

元素选择器

元素选择器,就是选中相同的元素,然后对相同的元素定义同一个CSS样式。

格式

div {color:red;text-align:center;}

id选择器

格式

#para1{text-align:center;color:red;}

class选择器(类选择器)

格式

.center {text-align:center;}
p.center {text-align:center;}

后代选择器

后代选择器,就是选择元素内部中某一种元素的所有元素:包括子元素和其他后代元素(如“孙元素”)。

父元素和后代元素必须要用空格隔开,表示选中某个元素内部的后代元素。


群组选择器

群组选择器,指的是同时对几个选择器进行相同的操作。

对于群组选择器,两个选择器之间必须要用英文逗号(,)隔开,不然群组选择器就无法生效。


层次选择器

层次选择器,指的是通过元素之间的层次关系来选择元素。层次选择器在实际开发中是相当重要的。常见的层次关系包括父子、后代、兄弟、相邻等关系。

层次选择器

说明

语法

M N

后代选择器,选择M 元素内部后代的N元素(所有N元素)

M N{属性:属性值;}

M>N

子代选择器,选择M 元素内部子代的 N元素(所有第1级N素)

M>N{属性:属性值;}

M~N

兄弟选择器,选择M 元素后所有的同级N元素

M~N{属性:属性值;}

M+N

相邻选择器,选择 M 元素相邻的下一个N 元素(M、N 是同级元素)

M+N{属性:属性值;}



http://www.kler.cn/a/145214.html

相关文章:

  • 如何获得微软MVP徽章
  • 【Proteus仿真】【51单片机】篮球比赛计分器
  • Linux内核--内存管理(十二)内存映射
  • hdlbits系列verilog解答(exams/m2014_q4f)-47
  • 多维代码特征提取技术浅析
  • Vue环境的搭建
  • Python与设计模式--组合模式
  • Linux内核--内存管理(一)任务空间管理
  • 车载通信架构 —— 传统车内通信网络MOST总线(光纤传输、专精多媒体)
  • Mapper 编写有哪几种方式, 使用MyBatis的mapper接口调用时有哪些要求,接口绑定有两种实现方式, MyBatis高级查询
  • 优化前端性能
  • 在线音频视频剪辑网站推荐
  • ES6之class类
  • Typescript基础面试题 | 02.精选 ts 面试题
  • Liunx Ubuntu Server 安装配置 Docker
  • 串口通信基础知识介绍
  • JAVA编程规范-集合、并发(阿里手册)
  • A-莲子的软件工程学【算法必会题目】(JavaPythonC++实现)
  • 【深度学习】基于深度学习的超分辨率图像技术一览
  • CleanMyMac X好不好用?有哪些优势