title: "解析元素 CSS" post_status: publish comment_status: open taxonomy: category: - elementor-developers-docs post_tag: - Hooks - Src - Repos

解析元素 CSS

Elementor 提供了一个钩子，允许开发者在 CSS 文件生成之前向元素添加新的 CSS 规则。

钩子详情

钩子类型: 动作钩子
钩子名称: elementor/element/parse_css
影响范围: 前端

钩子参数

参数	类型	描述
`post_css`	`\Elementor\Core\Files\CSS\Post`	文章 CSS 文件实例
`element`	`\Elementor\Element_Base`	元素实例

示例

让我们向生成的 CSS 文件添加一个简单的 CSS 规则：

/**
 * 添加自定义 CSS 规则。
 *
 * @since 1.0.0
 * @param \Elementor\Core\Files\CSS\Post $post_css_file 文章 CSS 文件实例。
 * @param \Elementor\Element_Base        $element       元素实例。
 */
function add_custom_css_rule_to_the_css_file( $post_css_file, $element ) {

    $post_css_file->get_stylesheet()->add_rules(
        '.my-selector',
        [
            'width' => '50px',
            'height' => '50px',
        ]
    );

}
add_action( 'elementor/element/parse_css', 'add_custom_css_rule_to_the_css_file', 10, 2 );

现在，让我们添加一个带有唯一 Elementor 选择器的 CSS 规则：

/**
 * 解析元素 CSS。
 *
 * @since 1.0.0
 * @param \Elementor\Core\Files\CSS\Post $post_css_file 文章 CSS 文件实例。
 * @param \Elementor\Element_Base        $element       元素实例。
 */
function add_custom_rules_to_css_file( $post_css_file, $element ) {

    $item_width = some_get_theme_config_function( 'item_width' );
    $item_height = some_get_theme_config_function( 'item_height' );

    $post_css_file->get_stylesheet()->add_rules(
        $element->get_unique_selector(),
        [
            'width' => $item_width . 'px',
            'height' => $item_height . 'px',
        ]
    );

}
add_action( 'elementor/element/parse_css', 'add_custom_rules_to_css_file', 10, 2 );