通过JS选择伪元素:焦点和:活动

当您的代码决定应该这样做时，只需从JavaScript添加一个CSS类

document.getElementById('day').addEventListener('click', function() {
  addClasses('day', 'night');
});
document.getElementById('night').addEventListener('click', function() {
  addClasses('night', 'day');
})
function addClasses(add, remove) {
  var buttons = document.getElementsByTagName('input');
  for (var i = 0; i < buttons.length; i++) {
    buttons[i].classList.add(add);
    buttons[i].classList.remove(remove);
  }
  buttons[0].focus();
}
$(document).ready(function() {
  var currentTime = new Date().getHours();
  if (currentTime > 20 || (0 <= currentTime && currentTime < 5)) {
    addClasses('night', 'day');
  } else {
    addClasses('day', 'night');  
  }
});

.day:focus {
  background-color: #ddd;
  color: red;
}
.night:focus {
  background-color: black;
  color: yellow;
}
:focus {
  text-shadow: 0 0 0 #272727;
  -webkit-transition: .5s ease;
  -moz-transition: .5s ease;
  -o-transition: .5s ease;
  -ms-transition: .5s ease;
  transition: .5s ease;
  -moz-box-shadow: 0 0 1em #FFF;
  -webkit-box-shadow: 0 0 1em #FFF;
  -webkit-animation-name: boxPulse;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" placeholder="name" value="Some Name" />
<br>
<input type="text" placeholder="last name" value="Last Name" />
<button id='day'>Make day</button>
<button id='night'>Make night</button>

不需要jquery，尽管它确实有很酷的效果，但也不需要类。试试这个：

:focus {
    background-color:green;
}

<input type="text" placeholder="name" /><br>
<input type="text" placeholder="last name" />

或者两者之间的某种组合。

我实际上找到了一个很好的解决方案。我在这里阅读了一些选择伪元素:after和:before的教程，但从未见过适用于:focus和:active的教程。

我的问题是：我想根据一天中的时间为页面上的某些元素提供不同的CSS，但不需要切换整个样式表。（这是一个简单的网站，我觉得很草率）。我使用：$('.text_box').css('text-shadow', '0 0 0 #272727');来调整CSS元素，但在尝试调整样式化的伪元素时遇到了障碍。

为了让它成为单词，我使用了addRule方法，它允许我调整我组装的时间敏感的CSS-JS脚本中的CSS。

(function($) {
            window.addRule = function(selector, styles, sheet) {
                if (typeof styles !== "string") {
                    var clone = "";
                    for (var style in styles) {
                        var val = styles[style];
                        style = style.replace(/([A-Z])/g, "-$1").toLowerCase(); 
                        clone += style + ":" + (style === "content" ? '"' + val + '"' : val) + "; ";
                    }
                    styles = clone;
                }
                sheet = sheet || document.styleSheets[0];
                if (sheet.insertRule) sheet.insertRule(selector + " {" + styles + "}", sheet.cssRules
                    .length);
                else if (sheet.addRule) sheet.addRule(selector, styles);
                return this;
            };
            if ($) {
                $.fn.addRule = function(styles, sheet) {
                    addRule(this.selector, styles, sheet);
                    return this;
                };
            }
        }(window.jQuery));
        $(document).ready(function() {
            function night() {
                var currentTime = new Date().getHours();
                if (0 <= currentTime && currentTime < 5) {
                    $('.text_box').css('text-shadow', '0 0 0 #272727');
                    $(".text_box:focus").addRule("background-color: #272727");
                    $(".text_box:focus").addRule("color: #FFF");
                    $(".text_box:focus").addRule("-moz-box-shadow: 0 0 1em #272727");
                    $(".text_box:focus").addRule("-webkit-box-shadow: 0 0 1em #272727;");
                    $("#mc-embedded-subscribe").addRule("color: #272727;");
                    $(".submit_box:hover").addRule("background-color:#272727 !important;");
                    $(".submit_box:hover").addRule("color:#FFF !important;");
                    $(".submit_box:hover").addRule("-moz-box-shadow: 0 0 1em #272727");
                    $(".submit_box:hover").addRule("-webkit-box-shadow: 0 0 1em #272727;");
                }
                if (20 <= currentTime && currentTime <= 24) {
                    $('.text_box').css('text-shadow', '0 0 0 #272727');
                    $(".text_box:focus").addRule("background-color: #272727");
                    $(".text_box:focus").addRule("color: #FFF");
                    $(".text_box:focus").addRule("-moz-box-shadow: 0 0 1em #272727");
                    $(".text_box:focus").addRule("-webkit-box-shadow: 0 0 1em #272727;");
                    $("#mc-embedded-subscribe").addRule("color: #272727;");
                    $(".submit_box:hover").addRule("background-color:#272727 !important;");
                    $(".submit_box:hover").addRule("color:#FFF !important;");
                    $(".submit_box:hover").addRule("-moz-box-shadow: 0 0 1em #272727");
                    $(".submit_box:hover").addRule("-webkit-box-shadow: 0 0 1em #272727;");
                }
            }
            night();
        });

这很有效，不过我想知道是否有更简单的解决方法？这比在包含:active或:focus的现有元素中添加新类要简单得多，但我认为在这种情况下这不会正常工作。