CSS 속성 선택자의 용도는 무엇입니까? CSS 속성 선택기(코드) 사용법 소개
- 不言원래의
- 2018-09-05 17:51:502939검색
이 기사에서는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.