Question

我在DIV中有一些元素，根据屏幕的大小重新排序。我想根据它们的弹性盒顺序不同地设置每个元素的样式。因为媒体查询在框架内部，所以我宁愿不编写自己的媒体查询来执行此操作，因为如果框架更改了媒体查询的断点，我不想记得更改我的媒体查询。我尝试使用+兄弟选择器，但显然这仅适用于原始标记中元素的顺序，而不适用于弹性框渲染顺序。有没有办法根据元素在渲染DOM中的显示顺序来设置元素的样式？

Answer 1

如评论中所提到的，您将无法使用nth-child，因为样式将应用于实际DOM的顺序，而不是呈现的DOM。

为了做到这一点，您必须在标记中添加额外的类。因此，不是使用nth-child重新排序，而是使用额外的类重新排序。

  `Installing carbon.product.id 4.4.11.
Installation failed.
One or more certificates rejected. Cannot proceed with installation.
Application failed, log file location: /media/caleb/DATA/REPOS/java/mvn/org/eclipse/tycho/tycho-p2-runtime/0.13.0/eclipse/configuration/1502873665554.log

[INFO] ------------------------------------------------------------------------
[INFO] Reactor Summary:
[INFO] 
[INFO] WSO2 IoT - Parent .................................. SUCCESS [  1.205 s]
[INFO] WSO2 IoT - Broker Parent ........................... SUCCESS [  0.033 s]
[INFO] WSO2 IoT - Broker - P2 Profile Gen ................. SUCCESS [ 20.512 s]
[INFO] WSO2 IoT - Broker - Product Distribution ........... SUCCESS [ 35.205 s]
[INFO] WSO2 IoT - Core Parent ............................. SUCCESS [  0.016 s]
[INFO] WSO2 IoT - Core - Tools ............................ SUCCESS [  0.013 s]
[INFO] WSO2 IoT - Device Type Archetype ................... SUCCESS [  1.954 s]
[INFO] WSO2 IoT - Core - UI Styles ........................ SUCCESS [  0.884 s]
[INFO] WSO2 IoT - Core - Server UI Features ............... SUCCESS [  0.032 s]
[INFO] WSO2 IoT - Core - Server Styles Feature ............ SUCCESS [  0.095 s]
[INFO] WSO2 IoT - Core - P2 Profile Gen ................... FAILURE [ 39.359 s]
[INFO] WSO2 IoT - Core - Distribution ..................... SKIPPED
[INFO] WSO2 IoT - Analytics Parent ........................ SKIPPED
[INFO] WSO2 IoT - Analytics - P2 Profile Gen .............. SKIPPED
[INFO] WSO2 IoT - Analytics - Product Distribution ........ SKIPPED
[INFO] WSO2 IoT - Distribution Parent ..................... SKIPPED
[INFO] >WSO2 IoT - Integration Tests ...................... SKIPPED
[INFO] WSO2 IoT - Integration Test Artifacts .............. SKIPPED
[INFO] WSO2 IoT Server - Integration Test Common .......... SKIPPED
[INFO] WSO2 IoT - Integration Test Common Web UI Pages .... SKIPPED
[INFO] WSO2 IoT - Integration Test UI Module .............. SKIPPED
[INFO] ------------------------------------------------------------------------
[INFO] BUILD FAILURE
[INFO] ------------------------------------------------------------------------
[INFO] Total time: 01:40 min
[INFO] Finished at: 2017-08-16T09:54:27+01:00
[INFO] Final Memory: 59M/419M
[INFO] ------------------------------------------------------------------------
[ERROR] Failed to execute goal org.wso2.maven:carbon-p2-plugin:1.5.4:materialize-product (p2-profile-generation-http-gateway-profile) on project wso2iot-core-profile-gen: Cannot generate P2 metadata: P2 publisher return code was 13 -> [Help 1]
[ERROR] 
[ERROR] To see the full stack trace of the errors, re-run Maven with the -e switch.
[ERROR] Re-run Maven using the -X switch to enable full debug logging.
[ERROR] 
[ERROR] For more information about the errors and possible solutions, please read the following articles:
[ERROR] [Help 1] http://cwiki.apache.org/confluence/display/MAVEN/MojoExecutionException
[ERROR] 
[ERROR] After correcting the problems, you can resume the build with the command
[ERROR]   mvn <goals> -rf :wso2iot-core-profile-gen
`

这个小提琴的更多细节： https://jsfiddle.net/pua5u8a4/1/

如何根据元素的弹性框顺序设置元素样式

1 个答案: