详解 CSS 选择器

这篇具有很好参考价值的文章主要介绍了详解 CSS 选择器。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

详解 CSS 选择器

详解 CSS 选择器,前端,css,前端,学习,笔记

选择器的功能

选中页面中指定的标签元素。
要先选中元素,才能设置元素的属性,就好比策略类指挥游戏,比如海岛奇兵这类的, 需要先选中单位, 再指挥该单位行动。

CSS 选择器的种类

注:以下介绍的选择器只是CSS2标准下的常用选择器。
详细介绍CSS 选择器种类的网站链接:https://www.w3school.com.cn/cssref/css_selectors.asp

  1. 基础选择器: 单个选择器构成的
    • 标签选择器
    • 类选择器
    • id 选择器
    • 通配符选择器
  2. 复合选择器: 把多种基础选择器综合运用起来.
    • 后代选择器
    • 子选择器
    • 并集选择器
    • 伪类选择器

基础选择器

标签选择器

特点: 能快速为同一类型的标签都选择出来,但是不能差异化选择。

示例代码:
demo03.css

p {
    color: red;
    font-size: 15px;
}

详解 CSS 选择器,前端,css,前端,学习,笔记

运行效果:
详解 CSS 选择器,前端,css,前端,学习,笔记


类选择器

特点: 差异化表示不同的标签,可以让多个标签的都使用同一个标签。
语法细节:

  • 类名用 . 开头的
  • 下方的标签使用 class 属性来调用
  • 一个类可以被多个标签使用, 一个标签也能使用多个类
  • 多个类名要使用空格分割,这种做法可以让代码更好复用
  • 如果是长的类名,可以使用 - 分割, 不要使用纯数字, 或者中文, 以及标签名来命名类名

示例代码:

demo04.css

.eat {
    color: red;
}
.sleep {
    color: green;
}
.game {
    color: blue;
}
.play {
    font-size: 20px;
}

详解 CSS 选择器,前端,css,前端,学习,笔记

运行效果:
详解 CSS 选择器,前端,css,前端,学习,笔记


id 选择器

特点: id 选择器和类选择器类。
语法细节:

  • CSS 中使用 # 开头表示 id 选择器

  • id 选择器的值和 html 中某个元素的 id 值相同

  • html 的元素 id 不必带 #

  • id 是唯一的,不能被多个标签使用

示例代码:

demo05.css

#fe {
    color: red;
}
#server {
    color: green;
}

详解 CSS 选择器,前端,css,前端,学习,笔记

运行效果:

详解 CSS 选择器,前端,css,前端,学习,笔记


通配符选择器

特点: 使用 * 的定义, 选取所有的标签,通配符选择器在实际应用开发中用来针对页面中所有的元素默认样式进行消除,主要用来消除边距。

示例代码:

demo06.css

#hahaha {
    color: brown;
}
* {
    background-color: beige;
}

详解 CSS 选择器,前端,css,前端,学习,笔记

运行效果:

详解 CSS 选择器,前端,css,前端,学习,笔记


基础选择器总结

选择器 作用 注意事项
标签选择器 能选出所有相同的标签 不能差异化选择
类选择器 能选出一个或多个标签 根据需求选择, 最灵活, 最常用
id 选择器 能选出一个标签 同一个 id 在一个 HTML 中只能出现一次
通配符选择器 选择所有标签 特殊情况下使用

复合选择器

什么是复合选择器

将之前学习的基础选择器进行组合

后代选择器

又叫包含选择器, 选择某个父元素中的某个子元素。

语法:元素1 元素2 {样式声明}

语法细节:

  • 元素1和元素2要使用空格分割
  • 元素1是父级,元素2是子级,只选元素2, 不影响元素1

将有序列表的文字改成红色,有序列表的链接改成蓝色

示例代码:

详解 CSS 选择器,前端,css,前端,学习,笔记

运行效果:
详解 CSS 选择器,前端,css,前端,学习,笔记


伪类选择器

什么是伪类选择器

用来定义元素状态的

注:以链接伪类选择器为例进行讲解。

  • a:link=> 选择未被访问过的链接
  • a:visited=> 选择已经被访问过的链接
  • a:hover=> 选择鼠标指针悬停上的链接
  • a:active=> 选择活动链接(鼠标按下了但是未弹起)

不仅适用于a标签,还适用于其他标签。

实现一个链接的颜色变化:默认展示黑色,当鼠标悬停到上面的时候,此时展示红色;当鼠标按下去但是鼠标没有弹起来,此时展示绿色。
示例代码:
详解 CSS 选择器,前端,css,前端,学习,笔记

运行效果:
默认展示黑色详解 CSS 选择器,前端,css,前端,学习,笔记

鼠标悬停红色详解 CSS 选择器,前端,css,前端,学习,笔记

鼠标按下去没有弹起来,绿色详解 CSS 选择器,前端,css,前端,学习,笔记文章来源地址https://www.toymoban.com/news/detail-836508.html

复合选择器总结

选择器 作用 注意事项
后代选择器 选择后代元素 可以是孙子元素
链接伪类选择器 选择不同状态的链接 掌握 a:hover 等的写法

到了这里,关于详解 CSS 选择器的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • HTML5+CSS3+移动web 前端开发入门笔记(二)HTML标签详解

    排版标签用于对网页内容进行布局和样式的调整。下面是对常见排版标签的详细介绍: 标题使用至标签进行定义。定义最大的标题,定义最小的标题。具有align属性,属性值可以是:left、center、right。 将给定的HTML代码转换为Markdown格式的标题标签如下所示: 效果演示: H3:

    2024年02月07日
    浏览(69)
  • 『 前端三剑客 』:CSS选择器

    上一篇文章我们介绍了 html 的常用标签及用法 , 这次我们来介绍 css 来对页面进行美化处理 css 全称 : 层叠样式表 (Cascading Style Sheets). 主要作用 : 能够对网页中元素位置的排版进行像素级精确控制, 实现美化页面 的效果. 能够做到 页面的样式和结构分离 . 一 . 基本语法 基本语

    2024年02月09日
    浏览(44)
  • 【前端|CSS系列第1篇】CSS零基础入门之CSS的基本概念和选择器

    欢迎来到CSS零基础入门系列的第一篇博客!在这个系列中,我们将一起学习CSS(层叠样式表)的基础知识,探索如何为网页添加样式和布局。本篇博客将重点介绍CSS的基本概念和选择器,帮助你理解CSS的核心概念。 CSS,即层叠样式表(Cascading Style Sheets),是一种用于控制网

    2024年02月12日
    浏览(56)
  • 前端面试题-(浏览器内核,CSS选择器优先级,盒子模型,CSS硬件加速,CSS扩展)

    内核 描述 Trident(IE内核) 主要用在window系统中的IE浏览器中,由微软研发并投入使用 Gecko(Firefox内核) 主要用于Firefox浏览器中,特点是代码完全公开,开发程度高 Webkit(Safari内核) 苹果产品中的safari浏览器使用的就是webkit内核,其特点是不受ie,firefox等内核的约束,比较安全。

    2024年01月25日
    浏览(74)
  • 前端成神之路-CSS(选择器、背景、特性)

    目录 前端成神之路-CSS(选择器、背景、特性) CSS 第二天 1. CSS复合选择器 1.1 后代选择器(重点) 1.2 子元素选择器 1.3 交集选择器 1.4 并集选择器(重点) 测试题 1.5 链接伪类选择器(重点) 1.6 复合选择器总结 2. 标签显示模式(display)重点 2.1 什么是标签显示模式 2.2 块级

    2024年02月08日
    浏览(43)
  • 前端02:CSS选择器等基础知识

    CSS基础选择器、设置字体样式、文本样式、CSS的三种引入方式、能使用Chrome调试工具调试样式 HTML专注做结构呈现,样式交给CSS,即结构(HTML)和样式CSS相分离 CSS主要由量分布构成,选择器以及一条或多条声明 选择器:给谁改样式 声明:改什么样的样式 在head最后写上styt

    2023年04月25日
    浏览(43)
  • 【前端从0开始】CSS3新增选择器

    1 什么是CSS3 CSS3是CSS(层叠样式表)技术的升级版本,于1999年开始制订,2001年5月23日W3C完成了CSS3的工作草案,主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效(阴影)、多栏布局(display:flex)、2D3D和动画等模块 2 CSS选择器 选择器 例子 例子描

    2024年02月11日
    浏览(42)
  • 【CSS】CSS选择器全解指南【CSS基础知识详解】

    👨‍💻个人主页:@花无缺 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅! 本文由 花无缺 原创 本文章收录于专栏 【CSS】 【CSS专栏】 已发布文章 📁【CSS基础认知】 CSS注释用于解释代码,给代码添加解释性说明,便于以后代码的维护和理解 浏览器会忽略注释内的所有内容 CSS注释

    2024年02月01日
    浏览(85)
  • 详解 CSS 选择器

    详解 CSS 选择器 选中页面中指定的标签元素。 要先选中元素,才能设置元素的属性,就好比策略类指挥游戏,比如海岛奇兵这类的, 需要先选中单位, 再指挥该单位行动。 注:以下介绍的选择器只是CSS2标准下的常用选择器。 详细介绍CSS 选择器种类的网站链接:https://www.w3s

    2024年02月22日
    浏览(35)
  • 编程笔记 html5&css&js 037 CSS选择器

    CSS用于处理网页的样式,就像一个人的装扮,拿来一个衣物或饰品,你得知道穿着在什么部位,不能把袜子当成口罩,CSS里面是一些属性和值,用在网页的哪个地方,就叫选择器。 CSS 选择器用于“查找”(或选取)要设置样式的 HTML 元素。 我们可以将 CSS 选择器分为五类:

    2024年01月21日
    浏览(58)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包