CSS 속성 선택기 사용에 대한 자세한 설명(CSS 입문 튜토리얼)
- (*-*)浩원래의
- 2019-11-26 13:38:132968검색
지정된 속성을 가진 HTML 요소의 스타일을 설정합니다. (추천 학습: sCSS 입력 튜토리얼 )
클래스 및 ID 속성에 국한되지 않고 지정된 속성을 사용하여 HTML 요소에 대한 스타일을 설정할 수 있습니다.
참고: IE7 및 IE8은 !DOCTYPE이 지정된 경우에만 속성 선택기를 지원합니다. IE6 이하에서는 속성 선택이 지원되지 않습니다.
속성 선택기
다음 예에서는 제목 속성이 있는 모든 요소에 대한 스타일을 설정합니다.[title]
{
color:red;
}
속성 및 값 선택기
다음 예에서는 제목="W3School"인 모든 요소에 대한 스타일을 설정합니다.[title=hello]
{
border:5px solid blue;
} 속성 및 값 선택기 - 다중 값
다음 예에서는 지정된 값으로 제목 속성을 포함하는 모든 요소의 스타일을 지정합니다. 공백으로 구분된 속성 값에 적용됩니다.[title~=hello] { color:red; } 다음 예에서는 지정된 값이 포함된 lang 속성을 사용하여 모든 요소의 스타일을 지정합니다. 하이픈으로 구분된 속성 값에 적용: [lang|=en] { color:red; }
양식 스타일링
속성 선택기는 클래스나 ID 없이 양식 스타일을 지정할 때 특히 유용합니다.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
input[type="text"]
{
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
font-family: Verdana, Arial;
}
input[type="button"]
{
width:120px;
margin-left:35px;
display:block;
font-family: Verdana, Arial;
}
</style>
</head>
<body>
<form name="input" action="" method="get">
<input type="text" name="Name" value="Bill" size="20">
<input type="text" name="Name" value="Gates" size="20">
<input type="button" value="Example Button">
</form>
</body>
</html>위 내용은 CSS 속성 선택기 사용에 대한 자세한 설명(CSS 입문 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.