Javascript 使用正则表达式将用户输入验证为CSS？

我正在编写一个程序，允许用户使用拖放GUI创建页面。每个元素（图像、文本等）都有易于使用的CSS选择器，如背景色和字体大小，但是我的客户要求在必要时能够将自定义CSS添加到元素中作为最终选项

考虑到用户可能键入并保存有效的javascript函数、尝试设置body标记样式等的危险（我将确保通过转义/PDO处理PHP中的用户输入来处理这一问题），我如何编写一个regex（或其他功能），粗略地测试用户键入的内容是否是有效的CSS。我现在的正则表达式是：

([A-Za-z\-]+?:\s*?[A-Za-z\-]+?;)+?;

我使用

var reg = /([A-Za-z\-]+?:\s*?[A-Za-z\-]+?;)+?/;

if (reg.test(textarea.val())) {
    console.log("yay");
    //add CSS to element
} else {
    console.log("nay");
    //let user know their input is wrong
}

这可以很好地进行验证

css-selector: css-value;

但是，之后的任何内容仍将验证为true，因为第一部分为true：

css-selector: css-value;
invalid-css is here!

至于我粗略地说的意思，我认为需要检查的只是a:和a；对于文本，以及可能介于两者之间的-，不必检查css选择器本身是否作为css属性存在，也不必检查css值是否是所述选择器的有效值

是否有办法确保整个输入值必须为真

最后一点，如果您看到与插入脚本标记或设置我应该更改的潜在整个页面元素样式无关的潜在危险，请让我知道

编辑：由于很多人说我不能验证真正的CSS，我将进一步说明我的需求；首先，有效正则表达式：

css-selector: css-value;
other-css-selector: other-css-value;

css-selector: css-value;
invalid-css is here!

无效正则表达式：

css-selector: css-value;
other-css-selector: other-css-value;

css-selector: css-value;
invalid-css is here!

其次，我想要的是验证是否可以将字符串传递给：

$(element).css(validated-string);

并让chrome处理应用的内容是否实际有效，就像您在现场编辑CSS一样

---

其次，我提到了PHP验证，但我想要的是实时更新CSS，这样用户可以看到他们编辑的效果，因为他们将它们添加为regex，您可以使用

^（[A-Za-z\-]+？：\s*？[0-9A-Za-z\-%]+；\s*？）*？$

，但我仍然不确定它是否会丢弃所有无效的CSS。

---

如果你有

test:100something

对正则表达式有效，但不是有效的CSS。

不管它是否有效，CSS都不是我的主要内容，我想要的是足够有效的东西，可以让我运行$（element）.CSS（已验证的CSS字符串）；让chrome来处理这个问题rest@TroelsM.B.Jensen你说的“足够有效”是什么意思？示例代码“$（element）.css（已验证的css字符串）；”与问题有何关联？@DrFreeze您的编辑似乎成功了！谢谢你的知识，哦，太好了，评论不是用来讨论的；这段对话已经结束。