Web前端-HTML&CSS笔记之05
时间:2021-09-06
本文章向大家介绍Web前端-HTML&CSS笔记之05,主要包括Web前端-HTML&CSS笔记之05使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
CSS选择器
关系选择器
- 父元素
- 直接包含子元素的元素叫做父元素
- 子元素
- 直接被父元素包含的元素是子元素
- 祖先元素
- 直接或间接包含后代元素的元素叫做祖先元素
- 一个元素的父元素也是它的祖先元素
- 后代元素
- 直接或间接被祖先元素包含的元素叫做后代元素
- 子元素也是后代元素
- 兄弟元素
- 拥有相同父元素的元素是兄弟元素
<html>
<head>
</head>
<body>
<div>
我是一个div
<p>
我是div中的p元素
<span>我是p元素中的span</span>
</p>
<span>我是div中的span</span>
</div>
<div class="box">
我是div外面的div
<span>我是第三个span</span>
</div>
</body>
</html>
- 为div的子元素span设置一个字体颜色红色(为div直接包含的span设置字体颜色)
- 使用子元素选择器
- 作用:选中指定父元素的指定子元素
- 语法:父元素 > 子元素
- 使用子元素选择器
div > span{
color:red;
}
- 如果想选中 第三个span怎么写?
div.box > span {
color:pink;
}
- 后代颜色选择器
- 作用:选中指定元素内的指定后代元素
- 语法:祖先 后代(祖先 空格 后代)
- 把div元素 的后代元素span 设置成红色怎么写呢?
div span {
color:red;
}
-
- 选择下一个兄弟
- 语法:前一个 + 下一个
- 选择下一个兄弟
#选择紧挨着p元素的下一个span元素!
p + span {
color:red;
}
- 选择下面所有的兄弟
- 语法 :兄 ~ 弟
- 效果:选中 前一个元素后面的所有的兄弟元素
#选中p元素后面兄弟元素中所有的span元素
p ~ span {
color:orange;
}
属性选择器
<html>
<head>
</head>
<body>
<p title="abc">醉里挑灯看剑 </p>
<p title="abcdef">梦回吹角连营 </p>
<p title="helloabc">八百里分麾下炙</p>
<p>五十弦翻塞外声</p>
</body>
</html>
[属性名]选择含有指定属性的元素
<style>
p[title]{
color:red;
}
</style>
[属性名=属性值]选择含有指定属性和属性值的元素
p[title=abc]{color:red;}
[属性名^=属性值]选择属性值以指定值开头的元素
p[title^=ab]{color:red;}
[属性名$=属性值]选择以指定属性值结尾的元素
p[title$=ef]{color:red;}
[属性名*=属性值]选择属性值中含有某值的元素
p[title*=e]{color:red;}
伪类选择器
即不存在的类,特殊的类
-
伪类用来描述一个元素的特殊状态
- 比如:第一个子元素、被点击的元素、鼠标移入的元素....
-
伪类一般使用 : 开头
-
:first-child 第一个子元素
-
:last-child 最后一个子元素
-
:nth-child() 选中第n个子元素
特殊值有
- n 第n个 n 的范围0到正无穷
- 2n 或 even 表示选中所有偶数位的元素
- 2n+1 或 odd 表示选中所有奇数位的元素
-
以上这些伪类都是根据所有的子元素进行排序!
- 还有一些
- :first-of-type
- :last-of-type
- :nth-of-type()
以上这几个伪类的功能和上述类似,不同点是他们是在相同类型元素中进行排序
- :not() 否定伪类 。作用就是将符合条件的元素从选择器中去除
总之 child 是所有元素排序 of-type 是同类元素排序
#练习<ul>
<span>我是一个span</span>
<li>第零个</li>
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
<li>第四个</li>
<li>第五个</li>
</ul>
# ul > li:first-child{color:red;} 没有变色的因为ul后面第一个不是 li元素而是个span
# ul > li:last-child{color:red;} "第五个" 会变为红色
# ul > li:nth-child(2){color:red;} "第零个" 会变红
# ul > li:first-of-type{color:red;} "第零个" 会变红
# ul > li:nth-of-type(2){color:red;} "第一个" 会变红
# ul > li:not(:nth-of-type(6)){color:red;} 除了 ”第五个“ 和 ”我是一个span”都红
超链接的伪类
:link 用来表示没访问过的链接(正常的链接)
:visited 用来表示访问过的链接
上面这两个是专属于a元素的。 hover 和 active 所有元素都可以用。
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a:link{ color:red; }
</style>
</head>
<body>
<a href="https://www.baidu.com">访问过的连接</a>
<a href="https://www.baidu.com">没访问的连接</a>
</body>
</html>
:hover 表示鼠标移入
a:hover{ color:red; font-size:50px;}
:active 用来表示鼠标点击
a:active{
color:yellowgreen;
}
伪元素选择器
伪元素,便是页面中的一些特殊的并不真实存在的元素(特殊的位置)
伪元素的使用 ::
- ::first-letter 表示第一个字母 p::first-letter{font-size:20px;}
- ::first-line 表示第一行
- ::selection 表示选中的内容 P::selection{color:red;}
- ::before 元素的开始位置
- ::after 元素的最后
::first-letter 表示第一个字母 p::first-letter{font-size:20px;}
::first-line 表示第一行
::selection 表示选中的内容 P::selection{color:red;}
::before 元素的开始位置
::after 元素的最后
before和after 必须结合content属性来使用
div::before{
content:"abc";
color:red;
}
#content的内容 用单引号或者双引号皆可。而且里面的内容是无法在网页中被选中的。
before和after在这几个标签中是最常用的重点记一下噻。
CSS学习暂告段落~
原文地址:https://www.cnblogs.com/sonemacho/p/15235635.html
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- MLQuant:基于XGBoost的金融时序交易策略(附代码)
- 探索在网页中使用“标注”
- 笔试题:了解穷举算法吗?如何用代码实现
- 硬核看房利器——Web 全景的实现
- 超级播放器tcplayer如何设置logo
- 【Flutter 实战】1.20版本更新及新增组件
- 手把手教你使用Python实现常用的假设检验 !
- Oracle 每日一题系列合集
- Arrow更好用的python时间序列处理库,你用过吗?
- 死信队列监听补充
- 手把手教你用Python查询你的物流信息
- Selenium自动登录淘宝,我无意间发现了登录漏洞!
- 【DB宝20】在Docker中分分钟即可拥有OGG Director环境
- mq监听死信队列后如何处理
- 【小白学PyTorch】7 最新版本torchvision.transforms常用API翻译与讲解