我正在建立一个非常先进的网站.我的问题:是否可以选择除了:first-child和之外的所有其他孩子:last-child?我知道有一个:not()选择器,但它不适用于不在括号中的多个选择器.这就是我所拥有的:
#navigation ul li:not(:first-child, :last-child) {
background: url(images/UISegmentBarButtonmiddle@2x.png);
background-size: contain;
}
Run Code Online (Sandbox Code Playgroud) 我有这个布局:
<div id="sectors">
<h1>Sectors</h1>
<div id="s7-1103" class="alpha"></div>
<div id="s8-1104" class="alpha"></div>
<div id="s1-7605" class="beta"></div>
<div id="s0-7479"></div>
<div id="s2-6528" class="gamma"></div>
<div id="s0-4444"></div>
</div>
Run Code Online (Sandbox Code Playgroud)
使用这些CSS规则:
#sectors {
width: 584px;
background-color: #ffd;
margin: 1.5em;
border: 4px dashed #000;
padding: 16px;
overflow: auto;
}
#sectors > h1 {
font-size: 2em;
font-weight: bold;
text-align: center;
}
#sectors > div {
float: left;
position: relative;
width: 180px;
height: 240px;
margin: 16px 0 0 16px;
border-style: solid;
border-width: 2px;
}
#sectors > div::after {
display: block;
position: absolute; …Run Code Online (Sandbox Code Playgroud) 除了第一个和最后一个,我如何选择表格中的所有孩子?我已经尝试了这个,但它最终选择了所有不是第一个的孩子和所有不是最后的孩子,最终成为所有孩子:
table.programs tr td:not(:first-child), table.programs tr td:not(:last-child) {
}
Run Code Online (Sandbox Code Playgroud)
我想要所有既不是第一个也不是最后一个的孩子.我怎样才能做到这一点?
CSS:
form input:not([type='button']),form input:not([type='submit']) { width: 200px }
Run Code Online (Sandbox Code Playgroud)
HTML:
<form>
<input type='button' value='button' />
<input type='submit' value='submit' />
<input type='text' value='text' />
</form>
Run Code Online (Sandbox Code Playgroud)
演示:http://jsbin.com/imibew/edit#javascript,html,live
问题:所有输入元素的宽度都是200px,我只希望输入类型为200px的文本.
Quirk:如果您只列出一个选择器,而不是逗号分隔列表,则它可以正常工作.
问题:使用时可以使用逗号:在CSS中使用not()吗?在选择器中使用列表似乎打破了它.
我有这个代码,使每个段与类不同于" cl2"红色.
<head>
<style type="text/css">
p{ color:#000000; }
:not(.cl2){ color:#ff0000; }
</style>
</head>
<body>
<p class="cl1">This is a paragraph.</p>
<p class="cl2">This is second paragraph.</p>
<p class="cl2">This is third paragraph.</p>
<p class="cl3">This is fourth paragraph.</p>
<p class="cl2">This is fifth paragraph.</p>
<p class="cl2">This is sixth paragraph.</p>
<p class="cl4">This is seventh paragraph.</p>
<p class="cl5">This is eigth paragraph.</p>
<p class="cl1">This is nineth paragraph.</p>
</body>
Run Code Online (Sandbox Code Playgroud)
如何扩展我的:not选择器以忽略例如类" cl2"AND" cl4"?我嘲笑::not(.cl2, .cl4){ color:#ff0000; }但它不起作用.