XTML 编译器 - 完整版

十大选择器完整实现 + 模板字符串支持

输入 XTML 代码

生成的 HTML 代码


                

            

        

        
        

            

                
HTML 预览

                
            

            

                
            

        

        
        

            
十大选择器类型参考（0-9）

            

                
                    

                        序号
                        选择器类型
                        XTML 语法示例
                        编译为 CSS
                    

                
                
                    

                        0
                        标签选择器
                        0:div { color: "red" }
                        div { color: red; }
                    

                    

                        1
                        类名选择器
                        1:".class" { ... }
                        .class { ... }
                    

                    

                        2
                        ID名选择器
                        2:"#id" { ... }
                        #id { ... }
                    

                    

                        3
                        通用选择器
                        3:"*" { ... }
                        * { ... }
                    

                    

                        4
                        子代选择器
                        4:"div > p" { ... }
                        div > p { ... }
                    

                    

                        5
                        后代选择器
                        5:"div p" { ... }
                        div p { ... }
                    

                    

                        6
                        兄弟选择器
                        6:"h2 + button" { ... }
                        h2 + button { ... }
                    

                    

                        7
                        伪类选择器
                        7:"a:hover" { ... }
                        a:hover { ... }
                    

                    

                        8
                        伪元素选择器
                        8:"p::before" { ... }
                        p::before { ... }
                    

                    

                        9
                        属性选择器
                        9:"[type='text']" { ... }
                        [type='text'] { ... }