首先看一个效果,注意地址栏的变化
然后思考一下,用css
如何实现?
css选择器的局限
选择器是css
中的一大特色,用于选择需要添加样式的元素。
选择器的种类有很多,比如
- 元素选择器
p {color:gray;}
- 类选择器
.box {color:gray;}
- ID选择器
#title {color:gray;}
- 属性选择器
[title] {color:gray;}
- 后代选择器
h1 span {color:gray;}
- 相邻兄弟选择器
h1 + p {margin-top:50px;}
这里只列举了几种,还有很多,不熟悉的可以自行搜索查找。
虽然说css选择器有很多种,可以满足绝大部分的需求,不过有时候还是会有一些看似合理,实际上比较棘手的问题。
比如说上面提到了相邻兄弟选择器,不过只能选择后面的兄弟节点,却不能选择前面的。
后代选择器,可以选择子元素,却没法选择父元素。
用另一种思维来突破局限
上面列出了两个我们常见的需求,然而css
却不支持,如何解决呢?
不要在这里提js
,这完全是两种不同的思维领域
这里以实现前置兄弟选择器为例
寻找关联
首先,我们需要找到和需求有关联的选择器,毕竟要以已有的选择器为基础。
这里说的有关联指的是相近或者相反,比如子选择器p>span
和后代选择器p span
就是比较相近的
如果要实现鼠标相关的功能,可能就会联想到:hover
、:active
等选择器。
这里要实现前置兄弟选择器很显然需要联系上已有的相邻兄弟选择器+
和后置选择器~
,都属于兄弟节点。
解决思路
其实有一种方式是很常见的。
比如有这样一个布局,我希望span
前面的a
(也就是标签1和标签2)为红色字体
<div>
<a>标签1</a>
<a>标签2</a>
<span>说明</span>
<a>标签3</a>
<a>标签4</a>
</div>
我们用到了后置选择器~
,其实这里上述规定的位置关系都是以html
文档中的位置为准的。
我们可以手动把这些位置颠倒一下
<div>
<a>标签4</a>
<a>标签3</a>
<span>说明</span>
<a>标签2</a>
<a>标签1</a>
</div>
然后我们可以采取很多种方式,让页面的顺序恢复过来。
比如
a,span{
float:right
}
这样在页面上看到的顺序还是和之前一样,分别是标签1、标签2、说明、标签3、标签4
然后就可以直接使用后置选择器~
span ~ a{
color:red
}
这样是不是就做出了在视觉上前置选择器的效果?不过需要提前把html
里面的结构反过来,通过一些样式看着顺序是正常的即可。
还有一个思路,可以称为逆向思维吧
布局和之前一样
<div>
<a>标签1</a>
<a>标签2</a>
<span>说明</span>
<a>标签3</a>
<a>标签4</a>
</div>
我们可以这样来实现,先把所有的a
都设置为红色,然后把span
后面的a
还原,不就达到目的了吗?
div a{
color:red;
}
span ~ a{
color:unset;
}
同样也实现了这样的目的。
当然这只是两个很简单的例子,详细的实例可以参考我之前写过的文章,更接近实际的需求
css地址选择器?
这里可以明确的说明,css是没有关于地址的选择器的。
这里说的地址是指浏览器的地址栏,比如
http://test.com/a
http://test.com/b
或者
http://test.com#a
http://test.com#b
有人可能觉得这是个伪需求,我的地址都变了,都不是同一个页面了,我在不同的页面分别写不同的css不就行了?
这个思路再有些情况是是对的,有些情况下有的问题
比如从http://test.com#a
到http://test.com#b
这种情况下,一般都还是同一个页面
并且,现在很多单页面应用地址栏的改变并没有引起浏览器页面的刷新,地址的更变完全就是前端路由实现的,比如说我的博客
一个需求
其实我最早想到要这种选择器的时候,是做主题选择的功能。
比如http://test.com
和http://test.com#light
表示正常主题,http://test.com#dark
表示黑色主题。
这样做的一个好处就是可以很直观的从地址栏看出主题配色,比如可以直接以http://test.com#dark
进入黑色主题。
类似的想法就是
下面是伪代码
#light div{
background:#fff;
color:#000;
}
#dark div{
background:#000;
color:#fff;
}
当然现在跟地址栏半毛钱的关系都没有。
那么,这样实现一个地址选择器?
思路
按照上面的思路,我们先考虑跟地址有关联的选择器,乍一看,确实找不到一个合适的
后来突然发现了:target
选择器,这个是用来选择当前活动的 HTML 锚点的。
官方的示例也都很简单,简单来讲就是如果当前地址栏为#new
,那么文档中id
为new
的元素就会被选中
下面是w3school
的示例
http://www.w3school.com.cn/tiy/t.asp?f=css_sel_target
实现
那么怎样实现我们需要的功能呢?
这里有一个简单的布局
<div>
<p>演示</p>
</div>
如果想实现http://test.com#dark
的功能,那么文档中就应该有个id
为dark
的元素可以选择到
<div id="dark">
<p>演示</p>
</div>
加上id
后,就可以实现类似的功能了
/**正常主题**/
p{
background:#fff;
color:#000;
}
/**黑色主题**/
#dark:target p{
background:#000;
color:#fff;
}
这么容易?
上面固定了一个,如果有多个,比如红色主题,绿色主题,黄色主题...不可能全都写在一个div
上吧
<!--错误代码-->
<div id="红色" id="绿色" id="黄色">
<p>演示</p>
</div>
这里就要区分开来了,我们需要在额外的地方来添加一些id
,比如在页面的最上面
<div id="red"></div>
<div id="green"></div>
<div id="blue"></div>
<div>
<p>演示</p>
</div>
然后结合兄弟选择器就可以实现如下效果
#red:target ~ div p{
background:red;
}
#green:target ~ div p{
background:green;
}
#blue:target ~ div p{
background:blue;
}
这里是demo
效果如文章开头所示。
这里直接做了切换,源码可以右键直接查看
很简洁不是吗,也不需要本地存储,直接根据地址栏来决定主题配色。
小节
以上主要讲解了css
的一些局限性,但是css
足够灵活,有些地方可能是设计时候的缺陷,不可避免,但是完全可以通过其灵活性达到我们想要的效果
更先进的css4
也将会到来,更多有趣的事情等着我们来发掘
插一句
还有一个更为强大的适用场景,就是多语言的适配,可以根据地址栏直接决定页面的语言
#zn:target{
/* 一些逻辑 */
}
#en:target{
/* 一些逻辑 */
}
#jp:target{
/* 一些逻辑 */
}
这个后面会专门有一篇文章来讲解,敬请期待
如果喜欢我的博客,可以多多关注一下,谢谢 ~
突破css选择器的局限,实现一个css地址选择器?的更多相关文章
-
定制一个类似地址选择器的view
代码地址如下:http://www.demodashi.com/demo/12832.html 前言: 这几天也是闲来无事,看看有什么和Scroller相关的控件需要巩固下,原因很简单,前几天看到相关 ...
-
CSS入门(css简介与样式汇总、CSS的使用方式和特征、CSS基础选择器和复杂选择器、边框阴影)
一.CSS的作用 1.以统一的方式实现样式的定义 2.提高页面样式的可重用性和可维护性 3.实现了内容(HTML)和表示(CSS)的分离 HTML和CSS之间有什么关系? HTML:构建网页的结构 C ...
-
HTML&;CSS基础学习笔记1.28-给网页添加一个css样式
CSS是什么? 当HTML配合CSS一起使用时,我们发现页面变得好看了很多.那么CSS到底是什么呢? CSS指层叠样式表 (Cascading Style Sheets),它主要是用于定义HTML标签 ...
-
谈谈一些有趣的CSS题目(十)-- 结构性伪类选择器
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
-
CSS样式----图文详解:css样式表和选择器
主要内容 CSS概述 CSS和HTML结合的三种方式:行内样式表.内嵌样式表.外部样式表 CSS四种基本选择器:标签选择器.类选择器.ID选择器.通用选择器 CSS三种扩展选择器:组合选择器.后代选择 ...
-
一起学HTML基础-CSS样式表-基本概念、分类、选择器
一.基本概念: CSS (Cascading Style Sheets)层叠样式表,是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. ...
-
HTML+CSS学习笔记(8)- CSS选择器
标签:HTML+CSS 什么是选择器? 每一条css样式声明(定义)由两部分组成,形式如下: 选择器{ 样式; } 在{}之前的部分就是"选择器","选择器"指 ...
-
CSS自学笔记(3):CSS选择器
CSS中提供了非常丰富的选择器,但是由于浏览器的支持情况,很多选择器很少用到. 1.基础选择器 选择器 含义 示例 * 通用元素选择器,匹配任何元素 * { margin:0; padding:0; ...
-
CSS入门介绍(二)CSS选择器
css选择器 什么是选择器? 选择器是你构造好网页的结构,需要给这些结构赋予样式,这时候就需要用到选择器,利用选择器将元素与样式一一对应:两者的对应关系可以是一对一,一对多,多对一. 选择器的分类: ...
随机推荐
-
MySQL: Tree-Hierarchical query
http://dba.stackexchange.com/questions/30021/mysql-tree-hierarchical-query No problem. ...
-
VS对路径的访问被拒绝
问题:权限问题. 1.检查自己电脑账户.是否是Administrator.如果没有启用.在[我的电脑]——[管理]——[本地用户和组]——[用户]——[Administrator]——[属性启用] 2 ...
-
IOS编程思想
从今天起想走进IOS架构的大门,一直不屑于学习第三方框架,觉得框架也是一点点代码给垒起来的,只要掌握了代码就可以了,殊不知垒代码的过程才是最重要的,而这个过程又岂是一朝一夕就能达到完美境界的,达到完美 ...
-
【HTML5】特性
HTML5 建立的一些规则: 新特性应该基于 HTML.CSS.DOM 以及 JavaScript. 减少对外部插件的需求(比如 Flash) 更优秀的错误处理 更多取代脚本的标记 HTML5 应该独 ...
-
浅谈 举家搬迁静态文件到CDN
由于七牛CDN最近做活动,对于标准用户可以免费使用如下优惠 10 GB 存储空间 10 G/月 下载流量 10 万次/月 PUT/DELETE 请求 100 万次/月 GET 请求 以上这些指标直接就 ...
-
python之chardet库
chardet库是python的字符编码检测器,能够检测出各种编码的类型,例如: import chardet import urllib.request testdata = urllib.requ ...
-
常用SQL语句(增删查改、合并统计、模糊搜索)
转自:http://www.cnblogs.com/ljianhui/archive/2012/08/13/2695906.html 常用SQL语句 首行当然是最基本的增删查改啦,其中最重要的是查. ...
-
关于Visual Studio中的TraceDebugging文件夹
最近一段时间发现C盘莫名其妙的变小了,各种清理各种卸载还是没用,电脑慢的是在无法使用 .最后只能一个文件夹一个文件夹的找,最后针对“C:\Documents and Settings\All User ...
-
新手必看的jQuery优化笔记十则
jQuery优化 1.简介 jQuery正在成为Web开发人员首选的JavaScript库,作为Web开发者,除了要了解语言和框架的应用技巧外,如何提升语言本身的性能也是开发人员应该思考的问题.文章就 ...
-
Blink: Chromium的新渲染引擎
编自http://www.chromium.org/blink 关于blink Google Chrome/Chromium 从创始至今一直使用 WebKit(WebCore) 作为 HTML/CSS ...