css 跳转页面后,菜单成选中状态

html-css014

css 跳转页面后,菜单成选中状态,第1张

$(".XXX").click(function(

$(".XXX").removeClass(".current")

$(this).addClass(".current")

))

一般这样就能解决问题了

先点击你选择的,所有的.XXX的class 取消.current(class),然后给当前的div添加.XXX(class)

【这是我的学习笔记,你也可以拿去用】

1 元素选择器:比如p{xxxx},选择文档中所有的p元素;

2 类选择器:比如.center_bar{xxxx},选择文档中使用了类center_bar的元素;

3 id选择器:比如.button1{xxxx},选择文档中使用了button1的元素;

4 或选择器:用逗号连接多个选择器;

5 与选择器:多个选择器紧挨在一起;

6 后代选择器:用空格连接多个选择器;

7 子代选择器:用大于号连接多个选择器,它其实是后代选择器的特殊情况;

8 属性选择器:

(1) 比如p[id],选择标签上有属性“id”的p元素;

(2) 比如p[id="button1"],选择标签上有属性“id”并且id的值为“button1”的p元素;

(3) 比如p[id^=”b”],选择标签上有属性“id”并且id的值以“b”开头的p元素;

(4) 比如p[id$=”b”],选择标签上有属性“id”并且id的值以“b”结尾的p元素;

(5) 比如p[id*=”b”],选择标签上有属性“id”并且id的值包含“b”的p元素;

9 p:first-child:既是p元素,也是某元素的第一个孩子;

10 p:last-child:既是p元素,也是某元素的最后一个孩子;

11 p:nth-child(3):既是p元素,也是某元素的第三个孩子;

12 p:nth-child(odd):既是p元素,也是某元素的第奇数个孩子;

13 伪类选择器都是某种状态,比如active、link、hover,使用“:”;

14 伪元素选择器,确实有某些实体的东西,比如第一行文字、第一个文字、被选中的文字,使用“::”

15 只有多个选择器选中了同一个元素的同一个属性,才会出现优先级的问题;

16 如果两个选择器优先级相同,那么写在后面的选择器生效;

17 选择器优先级的排列:

(1) !important

(2) 内联样式

(3) id选择器

(4) 类和伪类选择器

(5) 元素和伪元素选择器

(6) *选择器

(7) 继承样式

11-css3新增选择器 原创

2022-08-06 17:02:22

CapejasmineY

码龄4年

关注

文章目录

一、渐进增强和优雅降级

二、层级选择器

三、属性选择器

四、伪类选择器

1、结构伪类选择器

2、目标伪类选择器

3、UI元素状态伪类选择器

4、否定伪类选择器

5、动态伪类选择器

一、渐进增强和优雅降级

**渐进增强:**针对低版本浏览器进行构建页面,保证最基本功能。在针对高版本浏览器进行效果、互动等改进和追加功能,达到更好的体验。

**优雅降级:**一开始就构建完整的功能,然后针对低版本进行兼容。

二、层级选择器

三、属性选择器

四、伪类选择器

1、结构伪类选择器

在这里插入图片描述

例子:

2、目标伪类选择器

用法:

目标伪类选择器是结合锚点用的(就这一个用法)

锚点通过a标签设置href为“#xxx”的url,来跳转到标签x,id=“xxx”的块中,实现被跳转的标签元素有URL指向。当点击a链接时会跳转到x标签页面上(url指向该标签处)并触发x:target属性。