CSS 속성 선택자의 용도는 무엇입니까? CSS 속성 선택기(코드) 사용법 소개-CSS 튜토리얼-php.cn

CSS 속성 선택자의 용도는 무엇입니까? CSS 속성 선택기(코드) 사용법 소개

不言

풀어 주다： 2018-09-05 17:51:50

원래의

2931명이 탐색했습니다.

이 기사에서는 CSS 속성 선택기의 용도에 대해 설명합니다. CSS 속성 선택기의 사용법 소개(코드)에는 특정 참조 값이 있으므로 도움이 필요한 친구가 참고할 수 있기를 바랍니다.

1. 존재 및 값 속성 선택기

2. 코드 예:

01_존재 및 값 속성 selector.html

        /*存在和值属性选择器*/   
        [attr]：该选择器选择包含 attr 属性的所有元素，不论 attr 的值为何。
        [attr=val]：该选择器仅选择 attr 属性被赋值为 val 的所有元素。
        [attr~=val]：表示带有以 attr 命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中至少一个值为val。

로그인 후 복사

02_존재 및 값 속성 Selector.html

<head>
        <meta charset="UTF-8">
        <title>存在和值属性选择器</title>
        <style type="text/css">
            /*
             [attr]：该选择器选择包含 attr 属性的所有元素，不论 attr 的值为何。
            */
            [name]{                background: pink;            }
        </style>
    </head>
    <body>
        <div name="atguigu_llc">李立超</div>
        <div name="atguigu_xfz">晓飞张</div>
        <div name="atguigu_bhj">白浩杰</div>
        <div name="atguigu_sym">腿长1米8</div>
        <div>佟刚</div>
        <div>陈雷</div>
        <div>李贺飞</div>
    </body>

로그인 후 복사

03_Existence 및 값 속성 selector.html

<head>
        <meta charset="UTF-8">
        <title>存在和值属性选择器</title>
        <style type="text/css">
            /*
             [attr=val]：该选择器仅选择 attr 属性被赋值为 val 的所有元素。
            */
            [name="atguigu_llc"]{                background: pink;            }
        </style>
    </head>
    <body>
        <div name="atguigu_llc">李立超</div>
        <div name="atguigu_xfz">晓飞张</div>
        <div name="atguigu_bhj">白浩杰</div>
        <div name="atguigu_sym">腿长1米8</div>
        <div>佟刚</div>
        <div>陈雷</div>
        <div>李贺飞</div>
    </body>

로그인 후 복사

2. 하위 문자열 값 속성 선택기

<head>
        <meta charset="UTF-8">
        <title>存在和值属性选择器</title>
        <style type="text/css">
            /*
             [attr~=val]：该选择器仅选择 attr 属性的值（以空格间隔出多个值）中有包含 val 值的所有元素，
                比如位于被空格分隔的多个类（class）中的一个类。
            */
            [name~="atguigu"]{                background: pink;            }
        </style>
    </head>
    <body>
        <div name="atguigu_llc atguigu">李立超</div>
        <div name="atguigu_xfz">晓飞张</div>
        <div name="atguigu_bhj atguigu">白浩杰</div>
        <div name="atguigu_sym">腿长1米8</div>
        <div>佟刚</div>
        <div>陈雷</div>
        <div>李贺飞</div>
    </body>

로그인 후 복사

2. 코드 예:

        /*子串值属性选择器*/
        [attr|=val] : 选择attr属性的值是val（包括val）或以val-开头的元素。
        [attr^=val] : 选择attr属性的值以val开头（包括val）的元素。
        [attr$=val] : 选择attr属性的值以val结尾（包括val）的元素。
        [attr*=val] : 选择attr属性的值中包含字符串val的元素。

로그인 후 복사

CSS3 선택기 속성 선택기

CSS 속성 선택기 및 선택기 우선순위 문제의 고급 사용_html/css_WEB-ITnose

위 내용은 CSS 속성 선택자의 용도는 무엇입니까? CSS 속성 선택기(코드) 사용법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!