【CSS—前端快速入门】CSS 选择器


CSS


1. CSS介绍


1.1 什么是CSS?


CSS(Cascading Style Sheet),层叠样式表,用于控制页面的样式;

CSS 能够对网页中元素位置的排版进行像素级精确控制,实现美化页面的效果;能够做到页面的样式和

结构分离;


1.2 基本语法规范


选择器 +{一条/N条声明}

  • 选择器决定针对谁修改(找谁)
  • 声明决定修改啥(干啥)
  • 声明的属性是键值对
  • 使用:区分键值对,使用:区分键和值.
html 复制代码
<style>
	p{
	/*设置字体颜色 */
		color: red;
	/*设置字体大小 */
		font-size: 30px;
}
</style>

<p>hello</p>

注意:

  • CSS 要写到 style标签中 (后面还会介绍其他写法)
  • style 标签可以放到页面任意位置,一般放到 head 标签内.
  • CSS 使用 /**/作为注释 (使用 ctrl +/快速切换).

保存代码,查看页面:在这里插入图片描述


1.3 引入方式


|----------|
| 行内样式 |



|----------|
| 内部样式 |




|----------|
| 外部样式 |


我们再创建一个新文件,用于写入选择器,然后在原文件的 head 内通过上述语法引入新文件的信息:


写好后,保存两个文件,重新打开页面:


值得一提,选择器的生效优先级遵从就近原则


1.4 规范


样式大小写

  • 虽然 CSS 不区分大小写,我们开发时统一使用小写字母

空格规范

  • 冒号后面带空格
  • 选择器{ 之间也有一个空格.

2. CSS选择器



标签选择器


html 复制代码
/*选择所有的a标签,设置颜色为红色/

a{
	color: red;
}

/*选择所有的div标签,设置颜色为绿色*/

div {
	color: green;
}

保存代码,打开页面:


要修改 div3 的颜色,我们可以设置 a { } 选择器,来选择所有 a 标签,并设置颜色:



类选择器


class 选择器的概念和规范使用如下:

  • 可以为每一个标签都添加 class 属性
  • class 的值不要求唯一
  • 在使用class 选择器时,需要在 class 选择器前加一个 . ,如 .class 名{ }

保存代码,打开页面:


ID 选择器


ID 的概念和规范使用如下:

  • 一个页面中的 ID 值原则性上要求是唯一

  • 可以为每个标签都设置 ID

  • 可以为 ID 赋任何值,哪怕是标签名( div , span , title...)

  • 在使用 ID 选择器时,需要在 ID 选择器前加一个 # ,如 # id 名{ },避免 ID 是标签名的时候,编译器误以为使用的是标签选择器


保存代码后,打开页面:


通配符选择器


通配符的概念和通配符选择器的使用如下:

  • 通配符:*,表示选择所有,如SQL 中的 select*

  • 通配符选择器的使用: *{ },表示选择当前页面的所有元素;

  • 通配符选择器的优先级较前面几种选择器,优先级是比较低的;

保存代码,打开页面:


复合选择器


复合选择器,是由多个单选择器组成的多选择器,又分为并集交集的形式:

  • 并集形式,选择器用 , 隔开;

  • 交集形式,选择器用空格隔开;

  • 如果要精细选择某个部分,就可以为这个部分的标签添加特征属性,如 ID , class 等等,再使用交集;


|--------|
| 并集 |


保存代码,打开页面:


|--------|
| 并集 |


补充一个常用的标签:

html 复制代码
<body>
    
    <!-- 无序列表标签 -->
    <ul>
        <li></li>
    </ul>
    
    <!-- 有序列表标签 -->
    <ol>
        <li></li>
    </ol>
    
</body>


如果要只想让有序列表的超链接字体改为红色,我们就可以使用复合选择器的交集形式:


相关推荐
无名客01 小时前
npm run dev 启动项目 报Error: listen EACCES: permission denied 0.0.0.0:80 解决方法
前端·javascript·vue.js
零点七九1 小时前
vue npm install卡住没反应
前端·vue.js·npm
墨菲安全1 小时前
NPM组件 @0xme5war/apicli 等窃取主机敏感信息
前端·npm·node.js·主机信息窃取·npm恶意包·npm投毒
Komorebi_99991 小时前
vue create 项目名 和 npm init vue@latest 创建vue项目的不同
前端·vue.js·npm
好好研究4 小时前
使用JavaScript实现轮播图的自动切换和左右箭头切换效果
开发语言·前端·javascript·css·html
程序视点8 小时前
IObit Uninstaller Pro专业卸载,免激活版本,卸载清理注册表,彻底告别软件残留
前端·windows·后端
前端程序媛-Tian9 小时前
【dropdown组件填坑指南】—怎么实现下拉框的位置计算
前端·javascript·vue
嘉琪0019 小时前
实现视频实时马赛克
linux·前端·javascript
烛阴9 小时前
Smoothstep
前端·webgl
若梦plus10 小时前
Eslint中微内核&插件化思想的应用
前端·eslint