nth-child(单数)不工作

时间:2013-06-04 09:57:44

标签: html css css3 css-selectors pseudo-class

我正在尝试使用CSS伪类blockquote在页面的两侧(奇数和偶数nth-child)交替引用。出于某种原因,(odd)无效。有什么想法吗?

JSFiddle

HTML。并不像看起来那么复杂。只是一大堆文本和一些块引用。

<div class="post_content">
                                <p>Maxis has long been a household name for producing and bringing to market simulation games which appeal to the mass-market, including The Sims and SimCity. With its latest instalment of SimCity, Maxis has once again created a popular game, selling over 1.1 million copies in its first two weeks. However, Maxis hasn&#8217;t always been so successful, with a variety of unsuccessful titles to its name.</p>
<p><span id="more-71"></span><br />
During development of &#8216;Raid on Bungeling Bay&#8217;, the first game Will Wright designed, he realised he was having more fun creating and editing maps than actually creating the game, and thus the idea for SimCity was born. In 1987, Maxis was founded by game developer Will Wright and investor Jeff Braun in order to facilitate the creation of SimCity. The name &#8216;Maxis&#8217;, was suggested by a formula created by Jeff Braun&#8217;s dad in that computer game companies should have two-syllable names including an &#8216;X&#8217;.</p>
<p>Despite this, SimCity was not actually Maxis&#8217; first game, with the company publishing a basic flight simulator called &#8216;Sky Chase&#8217;, releasing in 1988 on the Commodore 64. Sky Chase wasn&#8217;t developed by Will Wright, but was rather a game they picked up to &#8216;iron out the wrinkles&#8217; with their publishing. The game sold 10-20 thousand copies.</p>
<blockquote><p>Sky Chase wasn&#8217;t developed by Will Wright, but was rather a game they picked up to &#8216;iron out the wrinkles&#8217; with their publishing.</p></blockquote>
<p>SimCity, the first game in the SimCity series, was released in 1989 after being in development for over 4 years. In fact, a version of the game, known as &#8216;Micropolis&#8217; at the time, was developed for the Commodore 64 in 1985, but Will Wright&#8217;s publisher wouldn&#8217;t publish it. Sales were initially small, but with word of mouth eventually leading to a full page story in Newsweek magazine, sales increased exponentially. SimCity was also noticed by organisations such as the CIA and US Department of Defense to create specialised software for their use. SimCity also found success in the education field, going into more than 10,000 classrooms as an educational tool. The source code to the original SimCity, released under the original name &#8216;Micropolis&#8217;, was released on January 10, 2008, weighing in at just 7.3 megabytes.</p>
<p>Between 1989 and SimCity 2000s release in 1993, 5 games were developed by Maxis, including SimEarth, SimAnt, RoboSport, SimLife and SimFarm, with varying levels of success. The release of SimCity 2000 brought many new features to the SimCity series, including a new isometric view in favour of the previous top-down view, new public facilities, new transport methods and more utilities. Interaction between neighbouring cities became a reality and city ordinances were able to be enacted. SimCity 2000 was released for Mac, DOS, Amiga, Windows, SNES, Sega Saturn, Playstation, Nintendo 64, Game Boy Advanced and more recently, the Playstation Network. It became the top-selling game for half of 1994.</p>
<p>Following releases of more Sim spin-off titles including SimTown, SimGolf, SimPark, SimTunes and SimCopter, all not reaching the same levels of success seen by SimCity. Combined with the failure of &#8216;The Crystal Skull&#8217; and the acquisition of Cinematronics to create a game that never came to fruition, Maxis began to consider acquisition offers to prevent going out of business.</p>
<blockquote><p>At the end of June, 1997, Maxis was acquired by Electronic Arts, or EA, which slowly absorbed the company.</p></blockquote>
<p>At the end of June, 1997, Maxis was acquired by Electronic Arts, or EA, which slowly absorbed the company. SimCity 3000 was released in 1999, following the acquisition, and sold over 5 million copies worldwide. Following this, Maxis&#8217; efforts were put towards development of The Sims, a simulation game following single families instead of cities. The Sims was known as a gamble, as its &#8216;dollhouse&#8217; principles didn&#8217;t align with the video game market (young males) at the time. When released, The Sims knocked off &#8216;Myst&#8217; as the top-selling PC game in history, selling over 11.3 million copies worldwide. As of February, 2005, it has sold over 16 million copies worldwide, and as of March 2009, The Sims as a franchise has sold more than 110 million copies.</p>
<blockquote><p> The Sims as a franchise has sold more than 110 million copies.</p></blockquote>
<p>In 2003, SimCity 4 was released featuring true 3D, among other significant improvements. Even though Will Wright was not directly involved with SimCity 4s creation, the game was still critically acclaimed with a sccore of 84/100 on Metacritic. The game was, however, criticised for being too complicated to a new user, which led to Will Wright stating &#8220;we want to take it back to its roots, where somebody who had never heard of SimCity can pick it up and enjoy playing it&#8221;.</p>
<p>Despite massive success, Maxis logo became less and less prominent in favour of Electronic Arts. The Sims 2, released in 2004, topped The Sims as the top-selling PC game of all time, selling 20 million copies, however moved Maxis logo to the back of the box and on the title screen in-game. From The Sims 2: Seasons onwards, Maxis logo doesn&#8217;t exist within the game or on the box. Sims development eventually moved to a new pision within EA, &#8216;The Sims Studio&#8217;, and thus in 2006 Maxis&#8217; only project was the upcoming Spore.</p>
<p>Spore was released in 2008, bringing a god game where users could create and progress any creature, vehicle or building they could imagine. It gained highly positive reviews from the press, and in the first three weeks of the game it sold 2 million copies.</p>
<p>In 2009, Will Wright left Maxis to start &#8216;Stupid Fun Club&#8217;, an &#8216;entertainment think-tank&#8217;. EA is an equal investor with Will Wright in this venture and retains the right to develop game concepts that emerge from the think tank.</p>
<p>Following 5 years where the only title released was &#8216;Darkspore&#8217;, Maxis released a revival to the SimCity series, simply titled &#8216;SimCity&#8217;, although known as SimCity 5. This new version of SimCity, created 24 years after the original game bearing the same name, met positive pre-release feedback, with the game winning 8 awards at E3 2012. Even in early press access, the game received high ratings on game review websites. However, the release of the game saw widespread connection issues relating to the requirement of an &#8216;always-on&#8217; internet connection. Players couldn&#8217;t access the game for up to a week, and even a month following the game, some features are still disabled and some players are still facing issues. In response to these issues, reviews were overwhelmingly negative, with gaming website &#8216;Polygon&#8217; taking its rating down from a 9.5 to an 8 to a 4 out of 10.</p>
<blockquote><p>with gaming website &#8216;Polygon&#8217; taking its rating down from a 9.5 to an 8 to a 4 out of 10.</p></blockquote>
<p>While no official roadmap has been released, it is expected that Maxis will continue to be its own EA label, furthering both The Sims franchise, as well as Sim City.</p>
                            </div>

CSS

.post_content blockquote {
    font-size:18px;
    color:#E55B9E;
    width:300px;
    margin:20px;
}

.post_content blockquote:nth-child(even) {
    float:right;
    margin-right:0px;
}

.post_content blockquote:nth-child(odd) {
    float:left;
    margin-left:0px;
}

2 个答案:

答案 0 :(得分:6)

因为blockquotes与段落混合在一起,我只需要定位nth-of-type而不是nth-child。

示例:

.post_content blockquote:nth-of-type(even) {
    float:right;
    margin-right:0px;
}

.post_content blockquote:nth-of-type(odd) {
    float:left;
    margin-left:0px;
}

答案 1 :(得分:1)

这项工作对我来说,请尝试:

.post_content blockquote:nth-child(2n) {
    float:right;
    margin-right:0px;
}

.post_content blockquote:nth-child(2n+1) {
    float:left;
    margin-left:0px;
}