Чтобы развернуть комментарий И Цзяна, селекторы против атрибута «значение» не заметят изменений в свойстве «значение».Атрибут «value» привязан к свойству «defaultValue» , а свойство «value» не привязано ни к какому атрибуту (спасибо porneL за это указание).
Обратите внимание, что существует аналогичная связь с атрибутом " checked " и свойствами " defaultChecked " и " 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>
Вы можете что-то соединить, используя ссылку на несуществующий фрагмент и :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 и:посещенные псевдоклассы, чтобы определить, какие сайты посетил пользователь без согласия пользователя. Поэтому
UA могут обрабатывать все ссылки как невидимые ссылки или применять другие меры для сохранения конфиденциальности пользователя при одновременном отображении посещенных и не посещенных ссылок.
Возможно, вы сможете что-то взломать, используя другие селекторы на других элементах, но я подозреваю, что это не может быть сделано чисто.