我在Twitter Bootstrap中看到了这个选择器:
.show-grid [class*="span"] {
background-color: #eee;
text-align: center;
border-radius: 3px;
min-height: 30px;
line-height: 30px;
}
Run Code Online (Sandbox Code Playgroud)
有谁知道这种技术被称为什么以及它做什么?
使用jQuery,我试图替换所有出现的:
<code> ... </code>
Run Code Online (Sandbox Code Playgroud)
有:
<pre> ... </pre>
Run Code Online (Sandbox Code Playgroud)
我得到了以下,
$('code').replaceWith( "<pre>" + $('code').html() + "</pre>" );
Run Code Online (Sandbox Code Playgroud)
但问题是,它正在用第一个 "代码"标签之间的内容替换(第二,第三,第四等)"代码"标签之间的所有内容.
例如
<code> A </code>
<code> B </code>
<code> C </code>
Run Code Online (Sandbox Code Playgroud)
变
<pre> A </pre>
<pre> A </pre>
<pre> A </pre>
Run Code Online (Sandbox Code Playgroud)
我想我需要使用"这个"和某种功能,但我担心我还在学习,并且不太懂得如何将解决方案拼凑在一起.
这对谷歌来说是不可能的,因为每篇关于:before和:after伪元素的文章似乎都使用了"内容"这个词.
我在这篇 CSS-Tricks文章中听说过它,解释了如何将图像滑块实现为Web组件的示例用例.它出现在里面的代码示例是:
CSS
#slides ::content img {
width: 25%;
float: left;
}
Run Code Online (Sandbox Code Playgroud)
HTML
<template>
...
<div class="inner">
<content select="img"></content>
</div>
</template>
Run Code Online (Sandbox Code Playgroud)
它似乎是指这个<content>标签,用于允许用户包含Web组件,但我想更深入地理解这一点.
编辑:
在进一步阅读之后,在上述文章中,我发现了一个链接作者的"Shadow DOM CSS Cheatsheet",其中包含一段解释::content伪元素的内容:
选择元素内的分布式节点.需要与不支持本机选择器的浏览器的polyfill-next-selector配对.
::content h1 {
color: red;
}
Run Code Online (Sandbox Code Playgroud)
资料来源:http://robdodson.me/blog/2014/04/10/shadow-dom-css-cheat-sheet/
这很有帮助,但我仍然发现整个事件相当不透明.还有其他见解吗?
例如
<div class="big
left
important"> some content </div>
Run Code Online (Sandbox Code Playgroud)
有谁知道这是否会破坏/有良好的浏览器支持?
背景故事:
我被困在哪里:
我创建了一个简单的svg三角形,具有高斯模糊效果,如果它直接在HTML中编写(而不是CSS)svg完美运行:http://jsfiddle.net/RAKWB/
<svg class="shadow" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="f1">
<feGaussianBlur in="SourceGraphic" stdDeviation="5" />
</filter>
</defs>
<polygon points="200,0 200,200 0,200" filter="url(#f1)"/>
</svg>?
所以我尝试用我自己的三角形svg 复制上面的内容(http://jsfiddle.net/6WAtQ/),
这不起作用:http://jsfiddle.net/ZPWxK/1/
body { background-image: url("data:image/svg+xml;utf8,data:image/svg+xml;utf8,<svg class="shadow" xmlns="http://www.w3.org/2000/svg" version="1.1"><defs><filter id="f1"><feGaussianBlur in="SourceGraphic" stdDeviation="5" /></filter></defs><polygon points="200,0 200,200 0,200" filter="url(%23f1)"/></svg>"); }
思考?
我想使用jQuery或javascript将随机字符串附加到元素的属性.
我需要引用一个存在于CDN上的CSS文件.不幸的是,每次更新文件时,CDN都会更改此CSS文件的URL.所以我不能简单地引用一个静态URL.
事实证明,如果你将一个字符串附加到CDN以前从未见过的URL的末尾,它将返回该文件的最新版本.可以肯定的是.
例如
<link href="http://example.com/style.css?randomString-neverSeenBefore">
Run Code Online (Sandbox Code Playgroud)
我知道,这是丑陋的,错误的和疯狂的.但有时这就是饼干崩溃的方式.另一种方法是尝试在奇偶校验中保持越来越多的CSS文件和模板标题...不可行.;)
我的jQuery技能很少.我发现了两个不同的代码,它们可以完成我自己需要的工作,但是我不知道如何让我们知道如何让它们一起工作.
// this guy is a random number generator that i found
jQuery.extend({
random: function(X) {
return Math.floor(X * (Math.random() % 1));
},
randomBetween: function(MinV, MaxV) {
return MinV + jQuery.random(MaxV - MinV + 1);
}
});
// using above plugin, creates 20 random numbers between 10 and 99
// and then appends that 40 digit number to a paragraph element
for (i = 0; i < 20; i++) …Run Code Online (Sandbox Code Playgroud) 假设一个简单的产品演示,例如在http://www.sublimetext.com/上找到的那个
即这不是传统的高分辨率视频,可以合理地完成:
问题是,哪个用户表现更好?两者都是:
如果你觉得有一种优越的技术来完成这个或另一个衡量其有用性的指标,请告诉我,我会相应调整.
我没有Wi-Fi路由器,因此在家时我需要将笔记本电脑变成Wi-Fi信号源,这样我和我的伙伴都可以访问互联网.
然而,在我在咖啡店工作并需要使用他们的Wi-Fi的日子里.
我正在运行Snow Leopard,我发现不断地关闭和开启,首先是Internet共享,然后是我的Wi-Fi,这非常麻烦.
快速'n'脏AppleScript解决方案的想法?
我发现了对属性和方法之间语义差异的一个很好的描述(通过http://www.webdeveloper.com/forum/showthread.php?133712-Properties-Vs.-Methods进行了解释):
属性就像名词一样.他们有价值或国家.
方法就像动词一样.他们执行行动.
属性无法执行操作,并且方法具有的唯一值是在完成操作后返回的值.
例如
物业:门; 可能的值:打开,关闭
方法:openDoor; 操作:将门属性的值更改为"打开"
创造一个例子:我在理论上理解这一点,但我无法想出一个例子.是否有可能向我展示门/ openDoor在实际的Javascript代码中的外观?
我正在创建一个静态站点.它由Jekyll生成,版本使用git控制.但是,纯粹就最终用户速度而言:
在提供静态网站方面,哪种服务提供最快的页面加载时间?
我无法理解为什么以下函数以数字方式对字符串进行排序(在代码的第三部分中).
var myArray = [10, 44, 32, 100, 0, 44, 3, 4];
console.log(myArray.toString()); // 10, 44, 32, 100, 0, 44, 3, 4 --> unsorted
myArray.sort();
console.log(myArray.toString()); // 0,10,100,3,32,4,44,44 --> sorted like strings
// this is what confuses me:
myArray.sort(function (a, b) {
return a - b;
});
console.log(myArray.toString()); // 0,3,4,10,32,44,44,100 --> sorted numerically
Run Code Online (Sandbox Code Playgroud)
特别是:
如何a和b获取填充?
为什么减去a - b按数字顺序对数字进行排序?
如果函数一次仅检查2个数字,那么所有数字如何被分类到正确的顺序?(即a和b)
我是一个完整的PHP菜鸟,我正在使用一个非常简单的PHP包括:
<?php include("~head.php"); ?>
Run Code Online (Sandbox Code Playgroud)
为网站做一些模板(为我的所有页面实现常见的页眉,页脚,菜单).
它适用于同一目录中的文件,但是当我在目录之外引用文件时,如下所示:
<?php include("../~head.php"); ?>
Run Code Online (Sandbox Code Playgroud)
但是,它似乎似乎没有找到文件,因为标题显然没有被拉入标记.
相反,如果我用完整的URL引用文件,例如
<?php include("http://example.com/~head.php"); ?>
Run Code Online (Sandbox Code Playgroud)
我在页面上收到以下错误代码.
Warning: include() [function.include]: URL file-access is disabled in the server configuration in /home/content/65/7392565/html/bikini/angela_bikini.php on line 1
Warning: include(http://example.com/~head.php) [function.include]: failed to open stream: no suitable wrapper could be found in /home/content/65/7392565/html/products/product_a.php on line 1
Warning: include() [function.include]: Failed opening 'http://example.com/~head.php' for inclusion (include_path='.:/usr/local/php5/lib/php') in /home/content/65/7392565/html/products/product_a.php on line 1
Run Code Online (Sandbox Code Playgroud)
奇怪的是,"../ file.php"语法适用于非头文件(例如我用于菜单的包含).
因为这样的代码变得有点混乱,很难在所有不同的页面上保持变化.任何想法或解决方案将非常感谢.我真的是一个菜鸟,所以我可能无法将头脑包裹在任何太过花哨的地方.:)
谢谢你的时间.
乔恩
javascript ×4
css ×3
css3 ×2
github ×2
jquery ×2
performance ×2
amazon-s3 ×1
animated-gif ×1
applescript ×1
arrays ×1
data-uri ×1
function ×1
html ×1
html5 ×1
html5-canvas ×1
html5-video ×1
include ×1
jekyll ×1
methods ×1
php ×1
properties ×1
replace ×1
rss ×1
shadow-dom ×1
sorting ×1
static-site ×1
svg ×1
vector ×1
video ×1