Question

我想在下面的HTML片段中选择BONKERS。它的区别在于它只在一个<code>块中，而它的所有兄弟姐妹都包含<a>个。 :empty是显而易见的选择，但由于文本节点而无法工作。我以为我知道这些东西，但这让我很开心，好吧，疯狂。

 <ul class="Reference">
    <li class="level4">
        <code class="active-voice">
            <a href="some/url/x" version="2">
                mauve 
            </a>
    </code>
    <li class="level8">
        <code class="active-voice">
            BONKERS 
        </code>
    </li>
    <li class="level9 subclass">
        <code class="active-voice">
            <a href="some/url/c" version="2">
                cerise 
            </a>
    </code>
    </li>
</ul>

我需要一个纯CSS解决方案（JS不是一个选项），并且无法控制源HTML。

FEH！

Answer 1

根据您打算应用的CSS属性，您可能会也可能无法执行此操作。例如，如果您要应用color之类的内容，则可以将其设置为所有code元素并在code a中重置，前提是所有文本都包含在a中code并且未在code内溢出。a。这只适用于少数几个属性（主要是字体属性）。

否则，如果您尝试选择不包含code:not(:has(> a))个孩子的E元素，那么纯CSS的方式并不多。 jQuery有E:not(:has(> *))（或者，对于任何/** * Module dependencies. */ var express = require('express'); var routes = require('./routes'); var http = require('http'); var path = require('path'); var app = express(); // all environments app.set('port', process.env.PORT || 3000); app.set('views', path.join(__dirname, 'views')); app.set('view engine', 'jade'); app.use(express.favicon()); app.use(express.logger('dev')); app.use(express.json()); app.use(express.urlencoded()); app.use(express.methodOverride()); app.use(app.router); app.use(require('stylus').middleware(path.join(__dirname, 'public'))); app.use(express.static(path.join(__dirname, 'public'))); // development only if ('development' == app.get('env')) { app.use(express.errorHandler()); } app.get('/', routes.index); app.get('/about', routes.about); app.get('/contact', routes.contact); app.get('/moviesList', routes.moviesList); app.get('/addMovie', routes.addMovie); app.post('/movieAdded', routes.movieAdded);元素，根本没有子元素，exports.movieAdded = function (req, res) { console.log(req.body); res.render('movieAdded', req.body); };），但是that's not coming to CSS anytime soon，而选择器4没有提供任何内容否则为＆＃34;没有子元素的元素＆＃34;。

＆＃34; FEH＆＃34！;是对的。

Answer 2

您可以遵循这种方法。根据您想要的CSS设置code元素的样式，然后重置那些在anchor样式中可继承的CSS样式，即：

演示：http://jsfiddle.net/GCu2D/1062/

<强> CSS：

code {
    color: green;
    font-weight: bold;
}
code a{
    color: red;/*Reset any inheritable css*/
    font-weight: normal; /*Reset any inheritable css*/
}

您可能不需要重置所有样式，因为并非所有样式都由anchor元素中的code继承

这是您可以真正考虑的一种解决方案。

没有孩子但不是空的CSS选择器

2 个答案: