前端标签二

简介: 前端标签二

前端帮助文档提取:

链接:https://pan.baidu.com/s/1x1qWafCmcN00UvLslXYGpA

提取码:rpvv

元素选择符

在口语中,多称为元素选择器

image.png

3.16补充关系选择符:

后代选择器E F:在父标签的基础上,选择其子代标签(其中可包括子级、曾子级...),进而设置样式。

子代选择器E>F:在父标签的基础上,寻找符合条件的F(子级标签)进而设置样式。

image.png

注:兄弟选择器是选择本标签之后的兄弟(图上已标明)。

为了让选择器更方便的定位响应的标签,所以引入选择符更好的实现标签定位。

image.png


3.16伪类

下图为伪类的结构分类:

image.png


首次了解接触到的是超链接的悬停、点击以及默认样式显示等;

<style>

  a {  //清除a的默认样式

           color: inherit; //设置超链接的字体颜色为继承,进而改变超链接的默认字体样式

           text-decoration: none;//取消下划线

       }

       

       a:link {//未访问时a的字体颜色

           color: #f00;

       }

       

       a:visited {//已访问时a的字体颜色

           color: cadetblue;

       }

       

       a:hover {//未访问但是鼠标悬停时a的字体颜色

           color: aqua;

       }

       

       a:active {//未访问但是鼠标点击时a的字体颜色

           color: black;

       }

</style>

<body>

  <a href="www.baidu.com">我是超链接</a>

</body>

3.16部分伪类应用场景:

E:nth-child(an+b):匹配父元素的第n个子元素E,假设该子元素不是E,则选择符无效。

E:nth-of-type(an+b):匹配父元素的第n个子元素E,此处是按照类型匹配,所以注意区分按子元素匹配的差异。

此处的 E 表示标签选择,针对于不想过多定义 类选择器 的情况下的一种缓冲方式;其结合关系选择符后方可实现标签定位,不用定义类选择器的目的。

image.png

其中:E:nth-of-type(an+b),和E:nth-child(an+b)的区别就是E:nth-of-type(an+b)定位的是一类标签,所以针对上图的情形,h2标签和ul标签不属于一类,所以如果改为E:nth-of-type(an+b)写法,就是

.top-nav ul:nth-of-type(1) {

   width: 218px;

   outline: 1px solid green;

}

相关文章
|
3月前
|
存储 JavaScript 前端开发
前端xss攻击——规避innerHtml过滤标签节点及属性
前端xss攻击——规避innerHtml过滤标签节点及属性
232 4
|
3月前
|
前端开发
前端通过input标签封装Upload组件实现文件上传
前端通过input标签封装Upload组件实现文件上传
160 0
|
8月前
|
前端开发
【前端学习从青铜到王者】—HTML常用标签(二)
【前端学习从青铜到王者】—HTML常用标签(二)
|
10月前
|
编解码 移动开发 前端开发
前端【响应式图片处理】之 【picture标签】
前端【响应式图片处理】之 【picture标签】
96 0
|
10月前
|
Web App开发 移动开发 JavaScript
【前端用法】HTML5 Video标签如何屏蔽右键视频另存为的js代码以及如何禁用浏览器控件,Video 禁止鼠标右键下载
【前端用法】HTML5 Video标签如何屏蔽右键视频另存为的js代码以及如何禁用浏览器控件,Video 禁止鼠标右键下载
261 0
|
10月前
|
前端开发 JavaScript
前端基础 - JavaScript修改标签样式的属性值
前端基础 - JavaScript修改标签样式的属性值
50 0
|
10月前
|
前端开发
前端基础 - HTML常用标签
前端基础 - HTML常用标签
34 0
|
1月前
|
前端开发
前端使用 <el-descriptions>标签报错: <el-descriptions> - did you register the component correctly
前端使用 <el-descriptions>标签报错: <el-descriptions> - did you register the component correctly
69 0
|
2月前
|
数据采集 移动开发 前端开发
前端基本标签,快捷键
前端基本标签,快捷键
|
3月前
|
前端开发 搜索推荐 开发者
【Web 前端】什么是语义化标签?
【4月更文挑战第22天】【Web 前端】什么是语义化标签?