Question

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <title>My first three.js app</title>
        <style>
        body { margin: 0; }
        canvas { width: 100%; height: 100% }
    </style>
    </head>
    <body>
        <script src="js/three.js"></script>
        <script src="js/GLTFLoader.js"></script>
        <script src="js/WebGL.js"></script>
        <script src="js/stats.min.js"></script>
        <script src="js/dat.gui.min.js"></script>
        <script>

            if ( WEBGL.isWebGLAvailable() === false ) {
                document.body.appendChild( WEBGL.getWebGLErrorMessage() );
            }
            var stats, clock, mixer;
            var camera, scene, renderer, model;
            var obj;

            init();
            animate();

            function init() {
                container = document.createElement( 'div' );
                document.body.appendChild( container );
                camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 100 );
                camera.position.set( 0, 3, 10);
                camera.lookAt( new THREE.Vector3( 0, 0, 0 ) );
                scene = new THREE.Scene();
                scene.background = new THREE.Color( 0xf0f0f0f );
                scene.fog = new THREE.Fog( 0xe0e0e0, 20, 100 );
                clock = new THREE.Clock();
                // lights
                var light = new THREE.HemisphereLight( 0xffffff, 0x444444 );
                light.position.set( 0, 20, 0 );
                scene.add( light );
                light = new THREE.DirectionalLight( 0xffffff );
                light.position.set( 0, 20, 10 );
                scene.add( light );

                // model
                var loader = new THREE.GLTFLoader();
                loader.load( 'logo1.gltf', function( gltf ) {
                    model = gltf.scene;
                    model.scale.set(1,1,1);
                    obj = model;
                    scene.add( model );
                    //createGUI( model, gltf.animations );
                }, undefined, function( e ) {
                    console.error( e );
                } );


                renderer = new THREE.WebGLRenderer( { antialias: true } );
                renderer.setPixelRatio( window.devicePixelRatio );
                renderer.setSize( window.innerWidth, window.innerHeight );
                renderer.gammaOutput = true;
                renderer.gammaFactor = 2.2;
                container.appendChild( renderer.domElement );
                window.addEventListener( 'resize', onWindowResize, false );
                // stats
            //  stats = new Stats();
                //container.appendChild( stats.dom );
            }

            function onWindowResize() {
                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();
                renderer.setSize( window.innerWidth, window.innerHeight );
            }
            //
            function animate() {

                obj.rotation.y += 0.01;

                requestAnimationFrame( animate );
                renderer.render( scene, camera );
                //stats.update();
            }
        </script>
    </body>
</html>

在这里，我要设置第一个单词“ hello”的样式，而不使用任何span或b标签或任何JavaScript。只是使用<h2>hello world</h2>之类的样式。

有可能吗？如果可能的话，我该如何解决？

Answer 1

不能，因为没有:first-word选择器，只有:first-letter和:first-line。如果您无法控制原始HTML，则需要使用JS动态插入跨度。

Answer 2

据我所知，纯CSS是不可能的。有一些使用javascript的解决方案。

库：nthEverything 示例：Examples with ::first-word

如何仅使用CSS设置句子第一个单词的样式

2 个答案: