javascript - 检测 :first-letter by javascript

Question

我需要知道元素的样式是否带有 :first-letter 样式，它应该是一个通用的解决方案，因此我不会依赖于类名或特殊样式属性。有什么办法吗？示例:

<p class="initial">First</p>
<p>Second</p>

.initial:first-letter {
float: left;
font-size: 1.5em;
font-weight: bold;
}

$('p').click(function(){
    // how to determine if :first-letter is applied to current paragraph?

});

Answer 1

如果您的 CSS 是自托管的，您可以:

1. 获取所有 CSS block 的列表
2. 过滤掉 block 选择器中不包含:first-letter的CSS block
3. 遍历剩余的 CSS block 列表，然后运行 ​​matchesSelector()以目标元素作为接收者，当前 CSS block 的选择器作为参数。
   1. 如果 matchesSelector() 返回 true，则当前 CSS block 的规则会影响目标元素的第一个字母。
   2. 否则移动到列表中的下一个 CSS block

如果 CSS 不是自托管且 CDN 不发送 CORS header ，则您无法读取 CSS 文件源 由于隐私问题，无法做到这一点。

我也没有从算法中找出规则级联。道路上的另一个障碍是找出哪些伪选择器以错误的方式影响 matchesSelector。

喜欢考虑:

p.webkitMatchesSelector("p:first-letter") //false

所以在尝试匹配之前必须从字符串中删除像 :first-letter 这样的伪码，因为它们是不相关的(但是像 :nth-child 这样的伪码不是因为它们确实会影响匹配)。

演示 http://jsfiddle.net/PBuzb/5/ (请记住我提到的问题在这里没有得到很好的处理)(Crush 最初的代码基础)

---

为什么在跨域情况下不允许读取CSS源？

您只能从其他域显示图像、运行 css/js 等，但绝对不能以任何方式访问他们的数据的原因是隐私。

这个案例最容易制作图像。假设我登录到 facebook，facebook 将 url 用于私有(private)照片，例如 http://facebook.com/myprofile.png .现在我去 evil.com，evil.com 可以加载图像，因为我已经登录到 facebook， facebook 会给他们那个图像。通常他们无法访问图像或以任何方式窃取它，但如果我们启用 跨源数据访问，他们现在可以访问我的私有(private)照片并将其传播出去。

同样的情况也可能发生在 CSS 中，Facebook 服务器可能会生成用户特定的 CSS，其中包含我的私有(private)用户 ID friend 们。如果我可以访问的任何网站都可以链接到该 css 并开始阅读，它们就不再那么私密了。

是的，主要问题是如果浏览器在请求时没有发送 cookie，那么浏览器如何通过跨源请求发送 cookie 来自 evil.com 的 facebook 图片/css，然后 facebook 无法使用用户特定的 css 或我的私有(private)照片进行响应，因为 cookie 有必要认出我。

现在想象一下，如果浏览器不发送 cookie。 Evil.com 仍然可以通过这种方式访问​​任何内联网数据，因为我的浏览器可以访问内联网。能够在 evil.com 网站上将 http://intranet/Myboss.jpg 作为图像显示不是问题，但是 Evil.com 能够读取图像数据并因此能够复制传播它是一个问题。