man*_*ock 11 css css-selectors
我正在尝试进行一些文件输入,并且只有在前一个文件输入已填满时才显示它们.这也可以使用css 3.
为了扩展易江的评论,针对"价值"属性的选择者不会注意到"价值"属性的变化."value"属性绑定到"defaultValue"属性,而"value"属性未绑定到任何属性(感谢porneL指出这一点).
请注意,与" checked "属性和" defaultChecked "和" checked "属性有类似的关系; 如果使用属性选择器[checked]而不是伪类:checked,则在复选框的状态更改时,您将看不到样式更改.与"已检查"系列不同,"值"没有您可以使用的相应伪类.
请尝试以下测试页面:
<!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函数并将其绑定到输入上的change事件,则背景样式将更改.
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>
你可以使用链接到一个不存在的片段和:visited伪类来破解一些东西,但它非常令人震惊.
<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的以下原因:
注意:样式表作者可以滥用:link和:visited伪类来确定用户未经用户同意访问过哪些网站.
因此,UA可以将所有链接视为未访问的链接,或者实现其他措施以保持用户的隐私,同时以不同方式呈现访问和未访问的链接.
您可能可以使用其他元素上的其他选择器一起破解某些东西,但我怀疑这不能干净地完成.
要选择空字段，您可以尝试
input[type=file][value=""] {
background-color: red;
}
我在jsfiddle上测试过。至少，我需要在输入标签上定义一个空值属性才能正常工作
<input type="file" id="test" value="">
正如您在示例中所做的那样，使用“+”运算符将匹配两个单独的文件输入，一个紧接着另一个。它不会像您想要的那样检查同一标签的两个属性。