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

在这里插入图片描述

CSS

1. CSS介绍

1.1 什么是CSS?

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

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

在这里插入图片描述

1.2 基本语法规范

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

选择器决定针对谁修改(找谁)
声明决定修改啥(干啥)
声明的属性是键值对
使用:区分键值对,使用:区分键和值.

<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选择器

在这里插入图片描述

标签选择器

/*选择所有的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 等等，再使用交集；

并集

在这里插入图片描述

保存代码，打开页面：

在这里插入图片描述

并集

补充一个常用的标签：

<body><!-- 无序列表标签 --><ul><li></li></ul><!-- 有序列表标签 --><ol><li></li></ol></body>

在这里插入图片描述

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

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/26861.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！