Question

我正在尝试用css3设计一个棋盘，但看起来我的选择器是错误的。 Here is my JsFiddle

那么为什么我不能在线条和单元格周围看到设计的测试蓝色和红色边框？

HTML

<body>
    My chess board
    <table class="chess_board">
       <tr class="chess_line">
          <td class="chess_cell black_cell white_piece"><span>&#9812;</span></td>
          <td class="chess_cell white_cell white_piece"><span>&#9813;</span></td>
          <td class="chess_cell black_cell white_piece"><span>&#9814;</span></td>
          <td class="chess_cell white_cell white_piece"><span>&#9815;</span> </td>
       </tr>
       <tr class="chess_line">
          <td class="chess_cell white_cell"><span>&#9820;</span></td>
          <td class="chess_cell black_cell"><span>&#9821;</span></td>
          <td class="chess_cell white_cell"><span>&#9822;</span></td>
          <td class="chess_cell black_cell"><span>&#9823;</span></td>
      </tr>
    </table>
    My another chess board ... to be drawn !
</body>

CSS

table.chess_board > tr.chess_line {
  background-color: blue;
}

table.chess_board > tr.chess_line > td.chess_cell {
  border: 2px solid red;
 /*
  font-family: serif;
  font-size: 2.3em;
  width: 1.0em;
  height: 1.0em;
  text-align: center;
  */
}

table.chess_board > tr.chess_line > td.chess_cell > span {
  position: relative;
  bottom: 0.1em;
}

table.chess_board > tr.chess_line > td.white_cell {
  background-color: rgb(217, 245, 2);
}

table.chess_board > tr.chess_line > td.black_cell {
  background-color: rgb(89, 34, 21);
}

table.chess_board > tr.chess_line > td.white_piece {
  color: rgb(179, 48, 63);
}

有人可以帮忙吗？

Answer 1

这是因为浏览器会自动放置<tbody＆gt;从HTML创建DOM时，table和tr之间的元素。

检查Firebug（或类似工具）中的DOM结构

您可以删除>运算符，如：

table.chess_board tr.chess_line {
  background-color: blue;
}

http://jsfiddle.net/nxvse1hd/8/

或添加tbody >，如：

table.chess_board > tbody > tr.chess_line {
  background-color: blue;
}

http://jsfiddle.net/nxvse1hd/9/

Answer 2

您需要删除css的>，浏览器会在源代码中添加<tbody>和<thead>元素。

table.chess_board > tr.chess_line {
  background-color: blue;
}

table.chess_board tr.chess_line td.chess_cell {
  border: 2px solid red;
 /*
  font-family: serif;
  font-size: 2.3em;
  width: 1.0em;
  height: 1.0em;
  text-align: center;
  */
}

table.chess_board tr.chess_line td.chess_cell > span {
  position: relative;
  bottom: 0.1em;
}

table.chess_board tr.chess_line td.white_cell {
  background-color: rgb(217, 245, 2);
}

table.chess_board tr.chess_line td.black_cell {
  background-color: rgb(89, 34, 21);
}

table.chess_board tr.chess_line td.white_piece {
  color: rgb(179, 48, 63);
}

Answer 3

dragoste是对的，你的CSS应该是这样的：

table.chess_board  tr.chess_line {
  background-color: blue;
 }

table.chess_board  tr.chess_line  td.chess_cell {
  border: 2px solid red;

Answer 4

有些浏览器会在DOM中添加<tbody>。当<tbody>出现时，选择器“＆gt;”将不再有效：

只需在您的情况下使用简单的继承选择器。

更新的解决方案： http://jsfiddle.net/nxvse1hd/7/

Answer 5

使用它：

table.chess_board > tr.chess_line {
  background-color: blue;
}

而不是：

[localhost-startStop-1] WARN org.springframework.web.context.support.XmlWebApplicationContext - Exception encountered during context initialization - cancelling refresh attempt
org.springframework.beans.factory.BeanDefinitionStoreException: Failed to parse configuration class [com.lttd.controller.FichiersController]; nested exception is
java.io.FileNotFoundException: class path resource [com/lttd/controller/FichiersController$1.class] cannot be opened because it does not exist
at org.springframework.context.annotation.ConfigurationClassParser.parse(ConfigurationClassParser.java:172)
at org.springframework.context.annotation.ConfigurationClassPostProcessor.processConfigBeanDefinitions(ConfigurationClassPostProcessor.java:306)
at org.springframework.context.annotation.ConfigurationClassPostProcessor.postProcessBeanDefinitionRegistry(ConfigurationClassPostProcessor.java:239)
at org.springframework.context.support.PostProcessorRegistrationDelegate.invokeBeanDefinitionRegistryPostProcessors(PostProcessorRegistrationDelegate.java:254)
at org.springframework.context.support.PostProcessorRegistrationDelegate.invokeBeanFactoryPostProcessors(PostProcessorRegistrationDelegate.java:94)
at org.springframework.context.support.AbstractApplicationContext.invokeBeanFactoryPostProcessors(AbstractApplicationContext.java:606)
at org.springframework.context.support.AbstractApplicationContext.refresh(AbstractApplicationContext.java:462)
at org.springframework.web.context.ContextLoader.configureAndRefreshWebApplicationContext(ContextLoader.java:403)
at org.springframework.web.context.ContextLoader.initWebApplicationContext(ContextLoader.java:306)
at org.springframework.web.context.ContextLoaderListener.contextInitialized(ContextLoaderListener.java:106)
at org.apache.catalina.core.StandardContext.listenerStart(StandardContext.java:4760)
at org.apache.catalina.core.StandardContext.startInternal(StandardContext.java:5184)
at org.apache.catalina.util.LifecycleBase.start(LifecycleBase.java:150)
at org.apache.catalina.core.ContainerBase$StartChild.call(ContainerBase.java:1396)
at org.apache.catalina.core.ContainerBase$StartChild.call(ContainerBase.java:1386)
at java.util.concurrent.FutureTask.run(FutureTask.java:266)
at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1142)
at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:617)
at java.lang.Thread.run(Thread.java:745)
Caused by: java.io.FileNotFoundException: class path resource [com/lttd/controller/FichiersController$1.class] cannot be opened because it does not exist
at org.springframework.core.io.ClassPathResource.getInputStream(ClassPathResource.java:172)
at org.springframework.core.type.classreading.SimpleMetadataReader.<init>(SimpleMetadataReader.java:50)
at org.springframework.core.type.classreading.SimpleMetadataReaderFactory.getMetadataReader(SimpleMetadataReaderFactory.java:82)
at org.springframework.core.type.classreading.CachingMetadataReaderFactory.getMetadataReader(CachingMetadataReaderFactory.java:102)
at org.springframework.core.type.classreading.SimpleMetadataReaderFactory.getMetadataReader(SimpleMetadataReaderFactory.java:77)
at org.springframework.context.annotation.ConfigurationClassParser.asSourceClass(ConfigurationClassParser.java:587)
at org.springframework.context.annotation.ConfigurationClassParser$SourceClass.getMemberClasses(ConfigurationClassParser.java:749)
at org.springframework.context.annotation.ConfigurationClassParser.processMemberClasses(ConfigurationClassParser.java:313)
at org.springframework.context.annotation.ConfigurationClassParser.doProcessConfigurationClass(ConfigurationClassParser.java:245)
at org.springframework.context.annotation.ConfigurationClassParser.processConfigurationClass(ConfigurationClassParser.java:228)
at org.springframework.context.annotation.ConfigurationClassParser.parse(ConfigurationClassParser.java:186)
at org.springframework.context.annotation.ConfigurationClassParser.parse(ConfigurationClassParser.java:165)
... 18 more
[localhost-startStop-1] ERROR org.springframework.web.context.ContextLoader - Context initialization failed
org.springframework.beans.factory.BeanDefinitionStoreException: Failed to parse configuration class [com.lttd.controller.FichiersController]; nested exception is java.io.FileNotFoundException: class path resource [com/lttd/controller/FichiersController$1.class] cannot be opened because it does not exist
    at org.springframework.context.annotation.ConfigurationClassParser.parse(ConfigurationClassParser.java:172)
    at org.springframework.context.annotation.ConfigurationClassPostProcessor.processConfigBeanDefinitions(ConfigurationClassPostProcessor.java:306)
    at org.springframework.context.annotation.ConfigurationClassPostProcessor.postProcessBeanDefinitionRegistry(ConfigurationClassPostProcessor.java:239)
    at org.springframework.context.support.PostProcessorRegistrationDelegate.invokeBeanDefinitionRegistryPostProcessors(PostProcessorRegistrationDelegate.java:254)
    at org.springframework.context.support.PostProcessorRegistrationDelegate.invokeBeanFactoryPostProcessors(PostProcessorRegistrationDelegate.java:94)
    at org.springframework.context.support.AbstractApplicationContext.invokeBeanFactoryPostProcessors(AbstractApplicationContext.java:606)
    at org.springframework.context.support.AbstractApplicationContext.refresh(AbstractApplicationContext.java:462)
    at org.springframework.web.context.ContextLoader.configureAndRefreshWebApplicationContext(ContextLoader.java:403)
    at org.springframework.web.context.ContextLoader.initWebApplicationContext(ContextLoader.java:306)
    at org.springframework.web.context.ContextLoaderListener.contextInitialized(ContextLoaderListener.java:106)
    at org.apache.catalina.core.StandardContext.listenerStart(StandardContext.java:4760)
    at org.apache.catalina.core.StandardContext.startInternal(StandardContext.java:5184)
    at org.apache.catalina.util.LifecycleBase.start(LifecycleBase.java:150)
    at org.apache.catalina.core.ContainerBase$StartChild.call(ContainerBase.java:1396)
    at org.apache.catalina.core.ContainerBase$StartChild.call(ContainerBase.java:1386)
    at java.util.concurrent.FutureTask.run(FutureTask.java:266)
    at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1142)
    at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:617)
    at java.lang.Thread.run(Thread.java:745)
Caused by: java.io.FileNotFoundException: class path resource [com/lttd/controller/FichiersController$1.class] cannot be opened because it does not exist
    at org.springframework.core.io.ClassPathResource.getInputStream(ClassPathResource.java:172)
    at org.springframework.core.type.classreading.SimpleMetadataReader.<init>(SimpleMetadataReader.java:50)
    at org.springframework.core.type.classreading.SimpleMetadataReaderFactory.getMetadataReader(SimpleMetadataReaderFactory.java:82)
    at org.springframework.core.type.classreading.CachingMetadataReaderFactory.getMetadataReader(CachingMetadataReaderFactory.java:102)
    at org.springframework.core.type.classreading.SimpleMetadataReaderFactory.getMetadataReader(SimpleMetadataReaderFactory.java:77)
    at org.springframework.context.annotation.ConfigurationClassParser.asSourceClass(ConfigurationClassParser.java:587)
    at org.springframework.context.annotation.ConfigurationClassParser$SourceClass.getMemberClasses(ConfigurationClassParser.java:749)
    at org.springframework.context.annotation.ConfigurationClassParser.processMemberClasses(ConfigurationClassParser.java:313)
    at org.springframework.context.annotation.ConfigurationClassParser.doProcessConfigurationClass(ConfigurationClassParser.java:245)
    at org.springframework.context.annotation.ConfigurationClassParser.processConfigurationClass(ConfigurationClassParser.java:228)
    at org.springframework.context.annotation.ConfigurationClassParser.parse(ConfigurationClassParser.java:186)
    at org.springframework.context.annotation.ConfigurationClassParser.parse(ConfigurationClassParser.java:165)
    ... 18 more
juin 17, 2015 10:42:55 AM org.apache.catalina.core.StandardContext listenerStart
GRAVE: Exception lors de l'envoi de l'évènement contexte initialisé (context initialized) à l'instance de classe d'écoute (listener) org.springframework.web.context.ContextLoaderListener
org.springframework.beans.factory.BeanDefinitionStoreException: Failed to parse configuration class [com.lttd.controller.FichiersController]; nested exception is java.io.FileNotFoundException: class path resource [com/lttd/controller/FichiersController$1.class] cannot be opened because it does not exist
    at org.springframework.context.annotation.ConfigurationClassParser.parse(ConfigurationClassParser.java:172)
    at org.springframework.context.annotation.ConfigurationClassPostProcessor.processConfigBeanDefinitions(ConfigurationClassPostProcessor.java:306)
    at org.springframework.context.annotation.ConfigurationClassPostProcessor.postProcessBeanDefinitionRegistry(ConfigurationClassPostProcessor.java:239)
    at org.springframework.context.support.PostProcessorRegistrationDelegate.invokeBeanDefinitionRegistryPostProcessors(PostProcessorRegistrationDelegate.java:254)
    at org.springframework.context.support.PostProcessorRegistrationDelegate.invokeBeanFactoryPostProcessors(PostProcessorRegistrationDelegate.java:94)
    at org.springframework.context.support.AbstractApplicationContext.invokeBeanFactoryPostProcessors(AbstractApplicationContext.java:606)
    at org.springframework.context.support.AbstractApplicationContext.refresh(AbstractApplicationContext.java:462)
    at org.springframework.web.context.ContextLoader.configureAndRefreshWebApplicationContext(ContextLoader.java:403)
    at org.springframework.web.context.ContextLoader.initWebApplicationContext(ContextLoader.java:306)
    at org.springframework.web.context.ContextLoaderListener.contextInitialized(ContextLoaderListener.java:106)
    at org.apache.catalina.core.StandardContext.listenerStart(StandardContext.java:4760)
    at org.apache.catalina.core.StandardContext.startInternal(StandardContext.java:5184)
    at org.apache.catalina.util.LifecycleBase.start(LifecycleBase.java:150)
    at org.apache.catalina.core.ContainerBase$StartChild.call(ContainerBase.java:1396)
    at org.apache.catalina.core.ContainerBase$StartChild.call(ContainerBase.java:1386)
    at java.util.concurrent.FutureTask.run(FutureTask.java:266)
    at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1142)
    at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:617)
    at java.lang.Thread.run(Thread.java:745)
Caused by: java.io.FileNotFoundException: class path resource [com/lttd/controller/FichiersController$1.class] cannot be opened because it does not exist
    at org.springframework.core.io.ClassPathResource.getInputStream(ClassPathResource.java:172)
    at org.springframework.core.type.classreading.SimpleMetadataReader.<init>(SimpleMetadataReader.java:50)
    at org.springframework.core.type.classreading.SimpleMetadataReaderFactory.getMetadataReader(SimpleMetadataReaderFactory.java:82)
    at org.springframework.core.type.classreading.CachingMetadataReaderFactory.getMetadataReader(CachingMetadataReaderFactory.java:102)
    at org.springframework.core.type.classreading.SimpleMetadataReaderFactory.getMetadataReader(SimpleMetadataReaderFactory.java:77)
    at org.springframework.context.annotation.ConfigurationClassParser.asSourceClass(ConfigurationClassParser.java:587)
    at org.springframework.context.annotation.ConfigurationClassParser$SourceClass.getMemberClasses(ConfigurationClassParser.java:749)
    at org.springframework.context.annotation.ConfigurationClassParser.processMemberClasses(ConfigurationClassParser.java:313)
    at org.springframework.context.annotation.ConfigurationClassParser.doProcessConfigurationClass(ConfigurationClassParser.java:245)
    at org.springframework.context.annotation.ConfigurationClassParser.processConfigurationClass(ConfigurationClassParser.java:228)
    at org.springframework.context.annotation.ConfigurationClassParser.parse(ConfigurationClassParser.java:186)
    at org.springframework.context.annotation.ConfigurationClassParser.parse(ConfigurationClassParser.java:165)
    ... 18 more

错误的CSS“＆gt;”选择者（由我）

5 个答案: