解决方法
注意与“checked”属性和“defaultChecked”和“checked”属性有类似的关系;如果您使用属性选择器[checked]而不是伪类：checked,则在复选框的状态更改时,将不会看到样式更改.与“checked”系列不同,“value”没有可以使用的对应的伪类.
尝试以下测试页面：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Dynamic attribute selectors</title>
<style type="text/css">
input:not([value]),div:not([value]) {
background-color: #F88;
}
input[value],div[value] {
border: 5px solid #8F8;
}
input[value=""],div[value=""] {
border: 5px solid #F8F;
}
input:not([value=""]),div:not([value=""]) {
color: blue;
border-style: dashed;
}
*.big {
font-size: 200%;
}
</style>
<script>
function getElt() {
var id=prompt("Enter ID of element","d1");
if (id) {
return document.getElementById(id);
} else {
return {className: ''};
}
}
function embiggen() {
getElt().className="big";
return false;
}
function smallify() {
getElt().className="";
return false;
}
</script>
</head>
<body>
<form method="post" enctype="multipart/form-data">
<div id="d1">no value</div>
<div id="d2" value="">empty value</div>
<div id="d3" value="some">some value</div>
<p><label for="foo">foo:</label> <input name="foo" id="foo" /></p>
<p><label for="bam">bam:</label> <input name="bam" id="bam" value="bug-AWWK" /></p>
<p><label for="file">File to upload:</label> <input type="file" name="file" id="file" onchange="setValueAttr(this)"/></p>
<input type="button" value="Embiggen" onclick="return embiggen()" />
<input type="button" value="Smallify" onclick="return smallify()" />
</body>
</html>
改变任何东西的价值和风格都不会改变.改变任何事物的类别,风格会改变.如果添加以下JS函数并将其绑定到输入上的更改事件,则背景样式将更改.
function bindValue(elt) {
var oldVal=elt.getAttribute('value');
elt.setAttribute('value',elt.value);
var newVal=elt.getAttribute('value');
if (oldVal != newVal) {
alert('Had to change value from "'+oldVal+'" to "'+newVal+'"');
}
}
这将“value”属性绑定到“value”属性,因此用户输入对前者的更新将传播到后者(以编程方式设置“value”属性不会导致更改事件).
在检查前后文件输入的JS属性(通过使用以下脚本)时,唯一具有明显变化的属性是“值”.从此,我怀疑有任何其他HTML属性发生变化,因此可以在属性选择器中使用.
<script>
var file = {blank: {},diff: {}};
var fInput = document.getElementById('file');
for (p in fInput) {
try {
file.blank[p] = fInput[p];
} catch (err) {
file.blank[p] = "Error: setting '"+p+"' resulted in '"+err+"'";
}
}
function fileDiff() {
for (p in fInput) {
try {
if (file.blank[p] != fInput[p]) {
file.diff[p] = {orig: file.blank[p],now: fInput[p]};
}
} catch (err) {
//file.diff[p] = "Error: accessing '"+p+"' resulted in '"+err+"'";
}
}
}
if (fInput.addEventListener) {
fInput.addEventListener('change',fileDiff,false);
} else if (fInput.attachEvent) {
fInput.attachEvent('onchange',fileDiff);
} else {
fInput.onchange = fileDiff;
}
</script>
您可以使用链接到不存在的片段和所访问的伪类来组合某些东西,但它是非常令人震惊的.
<style>
a input {
display: none;
}
:not(a) + a input,a:visited + a input
{
display: block /* or "inline" */ ;
}
</style>
...
<a href="#asuhacrpbt"><input type="file" ... /></a>
<a href="#cmupbnhhpw"><input type="file" ... /></a>
<a href="#mcltahcrlh"><input type="file" ... /></a>
每次加载页面时,您都需要为链接生成未访问的目标.由于您必须在服务器端执行此操作,因此您无法完全确定地完成此操作,尽管您可以获得以任意方式接近0生成以前访问的目标的概率.它也不适用于所有浏览器,例如苹果浏览器.我怀疑这是由于CSS2和CSS3的以下原因：
Note: It is possible for style sheet authors to abuse the :link and :visited pseudo-classes to determine which sites a user has visited without the user’s consent.
UAs may therefore treat all links as unvisited links,or implement other measures to preserve the user’s privacy while rendering visited and unvisited links differently.
您可能可以使用其他元素上的其他选择器来共同使用,但我怀疑这不能干净地完成.
