HTML 前端学习（3）—— CSS 选择器
2024-05-08 04:45:47
HTML 前端学习（3）—— CSS 选择器
- CSS 注释
- CSS 语法结构
- CSS 三种引入方式
- 行内式
- link 引入
- style
- CSS 基础选择器
- id 选择器
- 类选择器
- 元素（标签）选择器
- 通用选择器
- 基础选择器代码演示
- CSS 组合选择器
- 后代选择器
- 儿子选择器
- 毗邻选择器
- 弟弟选择器
- 组合选择器代码演示
- CSS 属性选择器
- 含有某个属性值
- 指定属性值为特定值的标签样式
- 某个标签的特定属性值
- 属性选择器代码演示
- 分组和嵌套
- 分组和嵌套代码演示
- 伪类选择器
- 伪类选择器代码演示
- 伪元素选择器
- 伪元素选择器代码演示
- 选择器的优先级
- 选择器相同的情况下
- 选择器不相同的情况下
- 选择器优先级代码演示
CSS 注释
/*单行注释*//*多行注释多行注释多行注释...*/通常我们在写 CSS 样式的时候也会用注释来划定样式区域（因为 HTML 代码多所以对应的CSS代码会很多）/* 这是首页的 CSS 样式文件 *//*顶部导航栏样式*/.../*左侧菜单栏注释*/.../*右侧菜单栏注释*/...
CSS 语法结构
选择器 {属性1: 值1;属性2: 值2;属性3: 值3;...}
CSS 三种引入方式
行内式
<h1 style="color: green;">123</h1>
link 引入
<link rel="stylesheet" href="03-MyCSS.css">
style
<style>h1 {color: red;}</style>
CSS 基础选择器
id 选择器
<head><style>#p1 {color: yellow;}</style></head><body><p id="p1">我叫奥特曼</p></body>
类选择器
<head><style>.p2 {color: aqua;}</style></head><body><p class="p2">我叫abc</p></body>
元素（标签）选择器
<head><style>div {color: #A00300;}</style></head><body><div>aoteman</div></body>
通用选择器
<head><style>* {color: green;}</style></head><body><h1>123</h1><p id="p1">我叫奥特曼</p><p class="p2">我叫abc</p><div>aoteman</div><h1>123</h1></body>
基础选择器代码演示
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
<!-- <link rel="stylesheet" href="03-MyCSS.css">--><style>* {color: green;}#p1 {color: yellow;}.p2 {color: aqua;}div {color: #A00300;}/*h1 {*//* color: red;*//*}*/</style></head>
<body><!--行内式--><!--<h1 style="color: green;">123</h1>--><h1>123</h1><p id="p1">我叫奥特曼</p><p class="p2">我叫abc</p><div>aoteman</div><h1>456</h1>
</body>
</html>
CSS 组合选择器
'''在前端 我们将标签的嵌套用亲戚关系来表述层级<div>div<p>div</p><p>div p<span>div p span</span></p><span>span</span><span>span</span></div>div 里面的 p span 都是 div 的后代p 是 div 的儿子p 里面的 span 是 p 的儿子 是 div 的孙子div 是 p 的父亲
'''
后代选择器
div span {color:red;}
儿子选择器
div>span {color: red;}
毗邻选择器
div+span { /*同级别紧挨着的下面的第一个*/color: red;}
弟弟选择器
div~span { /*同级别，下面所有的标签*/color: red;}
组合选择器代码演示
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/*!*后代选择器*!*//*div span {*//* color:red;*//*}*//*!*儿子选择器*!*//*div>span {*//* color: red;*//*}*//*!*毗邻选择器*!*//*div+span { !*同级别紧挨着的下面的第一个*!*//* color: red;*//*}*//*弟弟选择器*/div~span { /*同级别，下面所有的标签*/color: red;}</style>
</head>
<body><span>span1</span><span>span2</span><div>div<p>div</p><p>div p<span>div p span</span></p><span>span</span><span>span</span></div><span>span</span><span>span</span>
</body>
</html>
CSS 属性选择器
含有某个属性值
<head><style>[aoteman] {color: aqua;}</style></head><body><div aoteman="1">aoteman</div><p aoteman="1">奥特曼</p><h1 aoteman="2">alterman</h1><span aoteman="3">123</span></body>
指定属性值为特定值的标签样式
<head><style>[aoteman="1"] {color: red;}</style></head><body><div aoteman="1">aoteman</div><p aoteman="1">奥特曼</p><h1 aoteman="2">alterman</h1><span aoteman="3">123</span></body>
某个标签的特定属性值
<head><style>span[aoteman="3"] {color: green;}</style></head><body><div aoteman="1">aoteman</div><p aoteman="1">奥特曼</p><h1 aoteman="2">alterman</h1><span aoteman="3">123</span></body>
属性选择器代码演示
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>[aoteman] {color: aqua;}[aoteman="1"] {color: red;}span[aoteman="3"] {color: green;}</style>
</head>
<body><div aoteman="1">aoteman</div><p aoteman="1">奥特曼</p><h1 aoteman="2">alterman</h1><span aoteman="3">123</span>
</body>
</html>
分组和嵌套
div,p,span { /*逗号表示并列关系*/color: greenyellow;}#d1,.c1 {color: blue;}
分组和嵌套代码演示
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>div,p,span { /*逗号表示并列关系*/color: greenyellow;}#d1,.c1 {color: blue;}</style>
</head>
<body><div id="d1">div</div><p class="c1">p</p><span>span</span>
</body>
</html>
伪类选择器
a:link { /*访问之前的状态*/color: red;}a:hover { /*鼠标悬浮态*/color: aqua;}a:active { /*鼠标点击不松开的状态 激活态*/color: black;}a:visited { /*访问之后的状态*/color:grey;}
伪类选择器代码演示
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>a:link { /*访问之前的状态*/color: red;}a:hover { /*鼠标悬浮态*/color: aqua;}a:active { /*鼠标点击不松开的状态 激活态*/color: black;}a:visited { /*访问之后的状态*/color:grey;}</style>
</head>
<body>
<a href="https://www.sougou.com">点我</a>
</body>
</html>
伪元素选择器
p:first-letter {font-size: 48px;color: orange;}p:before { /*在文本开头 同 CSS 添加内容 用户无法选中*/content: "那就这样吧";color: blue;}
'''
before 和 after 通常都是来清楚浮动带来的影响，父标签塌陷的问题
'''
伪元素选择器代码演示
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>p:first-letter {font-size:48px;color: red;}p:after {content: "123";color: yellow;}p:before {content: "456";color: yellow;}</style>
</head>
<body><p>奥特曼</p>
</body>
</html>
选择器的优先级
选择器相同的情况下
/*1. 选择器相同，书写顺序不同就近原则：谁离标签近就听谁的*/p {color: red;}p {color:green;}
选择器不相同的情况下
/*2. 选择器不同 ...行内选择器 > id选择器 > 类选择器 > 标签选择器精确度越高越有效*/#c1 {color: red;}.d1 {color: green;}p {color: orange;}
选择器优先级代码演示
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/*1. 选择器相同，书写顺序不同就近原则：谁离标签近就听谁的*/p {color: red;}p {color:green;}/*2. 选择器不同 ...行内选择器 > id选择器 > 类选择器 > 标签选择器精确度越高越有效*/#c1 {color: red;}.d1 {color: green;}p {color: orange;}</style>
</head>
<body><p style="color: blue">奥特曼</p><p class="d1" id="c1" style="color: blue">见了鬼</p>
</body>
</html>
HTML 前端学习（3）—— CSS 选择器相关推荐
- 【前端学习】CSS入门
前端学习:CSS入门 文章目录 前端学习:CSS入门 前言 1.class01 1.我的第一个CSS 2.导入方式 3.基本选择器 (1)ID选择器 (2)标签选择器 (3)类选择器 4.层次选择器 ...
- Web前端学习之 CSS基础二
Web前端学习之 CSS基础二 1. 2. 主体 3. 完整代码如下所示 4. 结束语 1. /* 权重是0 */* {font-size: 35px;text-align: center;color ...
- (:◎)≡前端学习之CsS篇
前端学习之CSS篇 1.CSS简介 2.CSS语法规范 3.CSS选择器 (1)标签选择器 (2)类选择器 (3)id选择器 (4)通配符选择器 (5)选择器总结 4.CSS字体属性 5.CSS文本属 ...
- 前端学习之CSS第三天
前端学习之CSS第三天 一.圆角边框 border-radius 圆形 :正方形的盒子是圆形,长方形的盒子是椭圆 boder-radius:50% 圆角矩形:高度或者是宽度的一半 border-rad ...
- web前端学习中CSS，JS代码压缩
web前端要学习的知识有很多,前端基础要学习三个部分:HTML,CSS,JavaScript(简称JS),因此首先明确三个概念:HTML负责结构,网页想要表达的内容由html书写. CSS负责样式,网 ...
- Web前端学习html css（一）
10.15 1.1 导学 1.拨云见日 html ,css, 切图流程, PC企业布局, PC游戏布局 2.溯本求源 扩展html , 扩展css, html5新语法,css3新语法,兼容与hack ...
- python前端学习之css
01-css的引入方式 在HTML中引入css方式总共有三种: 行内样式 内接样式 外接样式 3.1 链接式 3.1 导入式 css介绍 现在的互联网前端分三层: HTML:超文本标记语言.从语义的角 ...
- jquery奇偶选择器_jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)
对此,我把CSS3标准中nth-child()用法大致介绍下: CSS3伪类选择器:nth-child() 简单的归纳下nth-child()的几种用法. 第一:nth-child(number) 直 ...
- 学习《CSS选择器Level-4》不完全版
1 概述 1.1 前言 选择器是CSS的核心组件.本文依据W3C的Selectors Level 4规范,概括总结了Level1-Level4中绝大多数的选择器,并做了简单的语法说明及示例演示.希望对 ...
- 前端学习之CSS模块
目录 CSS基础语法 CSS基本样式 基本样式 内联样式与内部样式 外部样式及两种写法 CSS中的颜色表示法 CSS背景样式 CSS边框样式 CSS文字样式 字体大小粗细样式 CSS段落样式 CSS复 ...
最新文章
- ueditor html显示图片,百度ueditor编辑器上传图片后img标签的title、alt属性优化简单方法...
- stm32 micropython vscode_在vscode里基于Pymakr插件进行esp32的micropython开发
- python 彻底解读多线程与多进程_python 多进程与多线程浅析
- Ubuntu下apt-get命令详解（转）
- Python_套接字、IPv4和简单的客户端/服务器编程
- 内存管理器剖析：ptmalloc，windows，macOS
- 二、Cocos2dx概念介绍（游戏开发中不同的坐标系，cocos2dx锚点）
- C#计算MD5结果不一致
- 黑马程序员_毕向东_Java基础视频教程第01天_20151010(六)
- Amazon，我们完全不能接受 — 因此我们必须变更 Elastic 许可协议
- 手机python代码查询四六级准考证_四六级查准考证号的网站是什么
- centos7 分辨率修改_centos系统修改屏幕分辨率问题
- 物理学的困惑: 弦理论崛起了, 科学却衰落了
- [wp7软件]相机 画图 截屏 photo 集合 软件（一）
- vue项目中获取当前设备 操作系统及版本，设备型号，ip,地区信息
- WinForm在窗体中嵌入窗体
- 常用的RAID模式及特点
- 宝塔 7.9.2 宝塔控制面板绕过 手机绑定认证 绕过官方认证
- 记一下网络电台收集网址
- 大厂女神节，到处都是企业文化的味道