木灵鱼儿

2018年10月25日阅读：770

最后更新：2018/10/25/ 16:45:47

什么是上下文节点？？？

学html+css的时候有在书上看到过上下文节点，但是也没详细说明，看视频的时候也有人说过，但是也是一笔带过，也没在意，今天学XPath的时候就有关于上下文节点有一个说明，但是只说了一点，没啥详细，所以自己百度了下，如下：

代码：

<html>
   <body>
       <a id = '1'>文本节点1</a>
       <a id = '2'>文本节点2</a>
       <a id = '3'>文本节点3</a>
   </body>
</html>

其中，html是body的上下文节点，,id=1和id=3是id=2的上下文节点，好理解了吧！这么一说秒懂！

文章分类 HTML CSS JavaScript

文章标签代码 html 文本 css 节点上下文 xpath

木灵鱼儿

2018年10月25日

发布了 562 篇文章获得点赞 0获得阅读 770

版权申明

本文系作者 @木灵鱼儿原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可，禁止转载。

one

two

three

css3新增了三个伪类：:required、:valid、:invalid:required 表示input不能为空时使用的:valid 表示通过，表单元素和form表单都有的伪类:invalid 表示不通过，表单元素和form表单都有的伪类其实如果要做一个表单css校验样式，:valid和:invalid就行了，但是实际操作上，:invalid还是有一些问题的。当表单元素有required属性的时候，该表单元素默认就是:invalid，也就说，必填的表单元素，一开始就是不通过。所以，如果此时设置:invalid伪类样式，是不合适的。解决办法就是：使用:placeholder-shown...

477 0 0

木灵鱼儿 5 个月前 CSS

移动端适配iPhoneX和安卓底部小黑条

这个问题还是同事发现的，毕竟我这种穷人根本用不起苹果，更何况也用不来，毕竟，我爱安卓。废话不多说，主要问题就是 iPhoneX底部小黑条问题，他的宽度也会被网页占据，导致小黑条显示在网页上头，第一是触发上会出现问题，第二是难看。解决办法就是通过css处理。解决方案首先对meta标签添加一条属性。<meta name="viewport" content="width=device-width, viewport-fit=cover">如果你已经有了viewport声明，那么就在后面content里加上viewport-fit=cover...

668 0 0

木灵鱼儿 7 个月前 CSS

css使用系统字体作为网页字体最佳实践

目前前端对字体的选择，最好的做法就是用系统的默认字体，这样省去了对每个操作系统的字体判断，谁知道我们指定的这个字体用户安装没有，而且字体文件一向都很大，特别是中文字体。但是对于指定系统字体，其实也是需要兼容的，这里就放上一个专业的字体文章：《奇思妙想 CSS 文字动画》；虽然这个文章名字叫动画，但是里面内容很丰富，自己学习。以css-tricks的为模板，提取其中精华，大概是这么一条信息：{ font-family: system-ui, -apple-system, BlinkMacSystemFont, segoe ui, Roboto, Helvetica, Arial, ...

619 0 0

木灵鱼儿 9 个月前 CSS

flex-grow 1; 不能等分的问题

当我们给父元素设置flex布局的时候，子元素为了能够等分，常常flex-grow: 1;，但是你会发现，当里面有内容的时候，宽度就发生了变化，变得不是等分了。所以我们可以理解：flex-grow: 1其实他不是真正意义上的等分宽度，而是等分剩余宽度，而剩余宽度是总宽度减去内容宽度，再进行等分。而且这个等分甚至还是根据内容多少来等分，有的内容多，他等分还多一些。所以这就很尴尬。为此，如果想要真正的等分，就需要设置相同的width宽度。如：.value { width: 0; flex-grow: 1; }这样就行了。width的值0我感觉是最好的，如果你设置其他宽度也行，具体看自己...

861 0 0

木灵鱼儿 10 个月前重学前端

语义化标签

无序列表 ul并不是所有的并列关系的数据都要使用到ul无序列表，ul他大多数出现在行文中间，也就是在ul的上部，我们一般会有文字说明，如列举一些选项啥的。所以，对于语义标签，我的态度是:‘“用对" 比“不用” 好，“不用" 比“用错”好。当然了,我觉得有理想的前端工程师还是应该去追求“用对”它们。所以，有时候用其他元素替换ul，反倒可以减少冗余的标签。（感觉我就是那种，为了所谓的语义而去大量使用的这种，这种习惯以后要改了）em强调倾斜和strong强调加粗em可能常常和strong标签概念混淆，而strong的大量使用，其实原因就是他不倾斜，文本加粗，在日常使用中，这种情况更多一些，即便...

1017 0 1

木灵鱼儿 1 年前 Typecho博客教程JavaScript

通用一键复制代码的方法

最近想给博客主题增加一个一键复制代码的功能，结果发现highlight.js并不支持一键复制，这就非常的可惜啊。于是百度了下，找到一个不错的例子，根据其例子我自己写了一个通用的方式。效果图安装[hide]需要使用clipboard.js，所以需要js引入这个复制用的库<script type="text/javascript" src="https://cdn.staticfile.org/clipboard.js/2.0.6/clipboard.min.js"></script>引入完毕后我们需要给每个代码块增加一个复制按...

4518 19253 21

木灵鱼儿 2 年前 JavaScript

Ajax 表单序列化

什么是表单序列化呢？将所有表单的提交通过一个标准化的方法去获取并且提交出去，那就是序列化，也就是说不同的表单，如注册啊，登录啊，修改资料啊，这些东西可以通过一个通用的方法去处理它。那么表单序列化有几个要求：不能发送禁用的表单字段；只发送勾选的复选框和单选按钮；不发送type是reset、submit、file、button以及字段集；多选选择框中的每个选中的值单独一个条目；对于select元素，如果有value值，就指定value作为发送的字段，如果没有，就指定text值；已经将ajax的代码作为单独的一个文件保存，而调用则使用ajax()的方法，之前也做了一个表单提交的方法，在所有条件...

1986 0 2

木灵鱼儿 2 年前 JavaScript

为博客添加鼠标点击特效（富强、民主、文明、和谐...）全平台通用 V2.0

已经写了新版，jq的方法，地址：jq富强，如果连接失效可以在本博客搜索富强，也可以找到对应的文章经过长时间的学习，终于迎来小高潮，更新为2.0版本！2018-10-5 修复预加载js代码失效bug2018-11-3 修复了当鼠标在最右侧点击时导致X轴产生滚动条的问题2019-1-8 更新为2.0版本，修复大量bug，引用自制代码库预览图：使用要求：需要引入自制代码库：[hide]先引入tool.js 下载：蓝奏云再引入封装库base.js 下载：蓝奏云接着引入china.js 下载：蓝奏云[/hide]引入方法：以我现在的博客Typecho为例，我们需要在主题的header.ph...

6032 0 22

木灵鱼儿 3 年前 JavaScript

终于给博客的搜索按钮加上了事件切换器

都是辛酸泪，这几天学这个头大，不过好在我搞定了，并且还不会冲突，兼容ie9以上，相当奈斯！2018-10-5 重新做了兼容，虽然没什么卵用，美名其曰优化代码！效果图：原理就是通过修改class的名字来达到隐藏和显示的效果，并且修复了原来动效不能显示的bug。代码部分（css部分我就不提供了）：[hide]//兼容添加事件 function addEvent(obj,type,fn) { if(obj.addEventListener) { obj.addEventListener(type,fn,false); }else if(obj.attachEve...

902 0 0