You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
93 lines
2.1 KiB
93 lines
2.1 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Selecoters</title>
|
|
<style>
|
|
.login input[value] {
|
|
background: red;
|
|
}
|
|
|
|
.login input[type="email"] {
|
|
background: green;
|
|
}
|
|
|
|
.login input[type="password"] {
|
|
background: blue;
|
|
}
|
|
|
|
.login input[value="ali705539"] {
|
|
background: gray;
|
|
color: #fff;
|
|
}
|
|
|
|
img[alt~="nature"] {
|
|
width: 200px;
|
|
}
|
|
|
|
[class|=text] {
|
|
color: red;
|
|
}
|
|
|
|
[class^=text] {
|
|
color: red;
|
|
}
|
|
|
|
[class $="text"] {
|
|
color: #fff;
|
|
}
|
|
[class *="text"]{
|
|
color: aqua;
|
|
}
|
|
</style>
|
|
</head>
|
|
<!--
|
|
decentdant selector (space)
|
|
div p{}
|
|
child selector (>)
|
|
div > p
|
|
adjacent sibling selector(+)
|
|
بلافاصله بعد از آن را انتخاب کن
|
|
div + p
|
|
general sibling selector (~)
|
|
بعدش هر چی بود
|
|
div.x ~ p
|
|
|
|
attribute selectors:
|
|
|
|
input[value]
|
|
اینپوت هایی که ولیو دارند را انتخاب کن
|
|
|
|
img[alt ~= "nature"]
|
|
مقدار آن شامل این کلمه باشد.
|
|
|
|
[class|=text]{}
|
|
به دنبال المانی باش که کلاس آن شامل این عبارت باشد
|
|
|
|
[class^=text]
|
|
اگر با - جدا نشده بود باید از این مورد استفاده شود و اگر قرار است ترکیبی باشد باید از این مورد استفاده شود
|
|
|
|
[class $="text"]
|
|
در ابتدای نام کلاس بیاید یا اگر ترکیبی است در آخر باشد نام کلاس
|
|
nametext
|
|
name-text
|
|
|
|
[class *="text"]
|
|
فقط در نام کلاس این مقدار باشد
|
|
|
|
-->
|
|
|
|
<body>
|
|
|
|
<form class="login" action="">
|
|
<input type="text" value="">
|
|
<input type="text" value="ali705539">
|
|
<input type="password">
|
|
<input type="email">
|
|
</form>
|
|
</body>
|
|
|
|
</html> |