CSS 속성 선택기
CSS 속성 선택기
특정 속성이 포함된 HTML 요소 스타일
특정 속성이 포함된 HTML 요소 스타일은 클래스 및 ID 그 이상입니다.
참고: IE7 및 IE8은 DOCTYPE만 속성 선택기를 지원해야 합니다! IE6 이하 버전은 속성 선택자를 지원하지 않습니다.
속성 선택기
다음 예에서는 제목이 포함된 모든 요소를 파란색으로 바꿉니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
[title]
{
color:blue;
}
</style>
</head>
<body>
<h2>我没有变</h2>
<h1 title="Hello world">Hello world</h1>
<a title="PHP中文网" href="//m.sbmmt.com">PHP中文网</a>
<hr>
<h2>PHP.cn</h2>
<p>Hello!</p>
</body>
</html>프로그램을 실행하고 사용해 보세요
속성 및 값 선택기
다음 예에서는 변경됩니다. 제목 제목의 테두리 스타일='php.cn' 요소:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
[title=w3cschool]
{
border:5px solid green;
}
</style>
</head>
<body>
<h2>将适用:</h2>
<img title="php.cn" src="/upload/course/000/000/006/5809800b44336872.jpg" width="270" height="50" />
<br>
<a title="php.cn" href="//m.sbmmt.comc">php中文网</a>
<hr>
<h2>将不适用:</h2>
<p title="greeting">Hi!</p>
<a class="php.cn" href="//m.sbmmt.com">php中文网</a>
</body>
</html>프로그램을 실행하여 사용해 보세요
속성 및 값 선택기 - 다중 값
다음에는 지정된 내용이 포함되어 있습니다. value 속성과 값을 구분하기 위해 (~)를 사용하는 제목 속성의 요소 스타일 예:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
[title~=hello]
{
color:blue;
}
</style>
</head>
<body>
<h2>将适用:</h2>
<h1 title="hello world">Hello world</h1>
<p title="student hello">Hello CSS students!</p>
<hr>
<h2>将不适用:</h2>
<p title="student">Hi CSS students!</p>
</body>
</html>프로그램을 실행하여 사용해 보세요
다음은 지정된 값을 포함하는 lang 속성의 요소 스타일 예입니다. , 속성과 값을 구분하려면 (|)를 사용하세요. 그리고 한번 해보세요
새로운 파일
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
input[type="text"]
{
width:150px;
display:block;
margin-bottom:10px;
background-color: #d2ffd6;
}
input[type="button"]
{
width:120px;
margin-left:35px;
display:block;
}
</style>
</head>
<body>
<form name="input" action="" method="get">
姓名:<input type="text" name="name" value="" size="20" placeholder="请输入你的姓名">
密码:<input type="text" name="pwd" value="" size="20" placeholder="请输入你的密码">
<input type="button" value="提交">
</form>
</body>
</html>
시사
Clear
- 코스 추천
- 코스웨어 다운로드
현재 코스웨어를 다운로드할 수 없습니다. 현재 직원들이 정리하고 있습니다. 앞으로도 본 강좌에 많은 관심 부탁드립니다~
이 강좌를 시청한 학생들도 학습하고 있습니다.
PHP로 사업을 시작하는 방법에 대해 간단히 이야기해 보겠습니다.
웹 프론트 엔드 개발에 대한 빠른 소개
민망한 물건 백과사전 사이트를 모방한 Mini 버전 MVC 프레임워크의 대규모 실용 Tianlongbabu 개발
PHP 실용 개발 시작하기: 빠른 PHP 생성 [중소기업 포럼]
로그인 인증 및 클래식 게시판
컴퓨터 네트워크 지식 수집
빠른 시작 Node.JS 정식 버전
당신을 가장 잘 이해하는 프론트엔드 강좌: HTML5/CSS3/ES6/NPM/Vue/...[원본]
자신만의 PHP MVC 프레임워크 작성(깊이 있는 40개 장/자세한 내용/초보자가 발전하려면 읽어야 함)