难道我做错了什么？
CSS /上海社会科学院:
#section
article
border-top: 1px solid black
&:first-child
border: none !important
HTML/HAML:
#section
%h2 title
%article
stuff here. There is still a top border here despite first-child style.
%article
stuff here.
%article
stuff here.
这不起作用,第一个仍有边界<article>.我必须创建另一个类,并article.noborder在第一篇文章中做一些没有边框的事情.任何帮助将不胜感激... css讨厌我.
我正在申请:last-of-type一个应该是这样的元素.div.info在http://www.elemovements.com上查看决赛(这是每篇文章的最低信息).为什么不起作用？
我在样式表中有以下两种样式,我无权访问:
a:link {
font-size: 150%;
}
a:hover {
font-size: 150%;
}
使用jQuery,如何将a:link和a:hover的字体大小更改为100%
谢谢.
HTML
<div>
<div></div>
</div>
CSS
div > :first-child:after {
background-color: orange;
color: #fff;
font-family: sans-serif;
font-size: 50px;
line-height: 50px;
text-align: center;
vertical-align: middle;
-webkit-font-smoothing: antialiased;
content: "hello world";
display: block;
font-size: 50px;
height: 160px;
line-height: 160px;
margin-top: 14px;
font-weight: normal;
}
div > :first-child:after:hover {
background-color: #44b800;
}
小提琴
基本上,我想要做的就是在悬停时更改背景颜色,但它似乎不起作用.
如何在每组两个列表元素之后插入换行符？它不一定需要是HTML <br />,而只需要将接下来的两个元素移动到下一行.决定在这里完全使用CSS/3(通过jQuery).
HTML:
<div id="headline_gallery">
<ul>
<li><img src="images/picture1.png" alt="picture1" /></li>
<li><img src="images/picture2.png" alt="picture2" /></li>
<li><img src="images/picture3.png" alt="picture3" /></li>
<li><img src="images/picture4.png" alt="picture4" /></li>
</ul>
</div>
CSS:
#headline_gallery li:nth-child(4n),#headline_gallery li:nth-child(4n-1) {
background:red;
display:inline;
}
#headline_gallery li:nth-child(4n-2),#headline_gallery li:nth-child(4n-3) {
background:blue;
display:inline;
}
我有一个简单的无序列表,包含超过12个li.
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
我想针对前四个li来改变他们的背景,最后四个li来创建一个不同的背景.有没有办法只用CSS做到这一点？我知道如何使用伪类来定位第一个,最后一个li或每个第四个元素,但我想要的是定位所有前四个和后四个元素.
鉴于以下html:
<a href="#"><span data-icon="?"></span>A Link</a>
是否可以text-decoration在悬停时更改(无)？该color会发生变化,text-decoration不会.
CSS:
a { text-decoration: none; }
a:hover{ text-decoration: underline; }
a:hover [data-icon]:before{
/*Doesn't work*/
text-decoration: none;
/*Works*/
color: red;
}
我试图添加除最后一个之外的padding所有子元素div.
我尝试使用否定last-child但是padding当我使用它时它甚至没有添加到其余的子元素中......
这是我的HTML:
#container .description:not(:last-child) {
padding-bottom: 10px;
}<div id="container">
<h3>Title</h3>
<div class="box">
<div class="title">Description</div>
<div class="description">Description 1</div>
</div>
<div class="box">
<div class="title">Description</div>
<div class="description">Description 2</div>
</div>
<div class="box">
<div class="title">Description</div>
<div class="description">Description 2</div>
</div>
Testing here
</div>以下CSS语法是否有效？
a:first-child:hover { background-color: transparent; }
如果是这样,那么浏览器的兼容性是什么？例如,它是否兼容IE8,IE6 +,Firefox 4,Chrome等.
CSS标记的pseudo类选择器（第一个孩子）适用于作为其父代的直接第一个孩子的所有p，为什么不适用于作为p本身的第一个直接元素的p标记。
p:first-child {
color: blue;
}<body>
<p>This P is body's first Child.</p>
<p>This is body's second child.</p>
<div>
<p> This P is div's first Child </p>
<p> This is div's second child.</p>
</div>
<p>
<p> This P is P's first child :: Why it does not get pseudo class</p>
<p> This is P's second child </p>
</p>
</body>css ×10
pseudo-class ×10
css3 ×4
html ×4
html-lists ×1
javascript ×1
jquery ×1
line-breaks ×1
sass ×1