CSS3 속성 선택기
30425 단어 프런트엔드
속성 선택기 [att*=val]에는 val, [att^=val] 시작, [att$=val] 끝이 있습니다.
구조적 위조 선택기 위조 원소
a:link{
color:black;
}
/* */
a:visited{
color:red;
}
/* */
a:hover{
color: yellow;
}
/* */
a:active{
color: green;
}
/* */
위원소 선택기
E:focus 지정한 요소는 커서 초점점을 얻을 때 사용하는 스타일입니다. 주로 텍스트 상자 컨트롤에서 초점점을 얻고 텍스트 입력을 할 때 사용합니다
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> title>
<style type="text/css">
[id*=t1]{
font-style: oblique;
}
[id$=2]{
font-style: oblique;
}
[id^=t]{
color:rgb(46, 226, 172);
}
:root{
background: rgb(197, 109, 109);
}
body{
background: white;
}
body *:not(a){
background: rgba(225, 201, 235, 0.753);
}
/* :empty{
background: rgb(79, 109, 134);
} */
:target{
background: green;
}
a:link{
color:black;
}
/* */
a:visited{
color:red;
}
/* */
a:hover{
color: yellow;
}
/* */
a:active{
color: green;
}
/* */
a{
text-decoration: none;
}
p:first-line{
color: red;
}
P:first-letter{
font-size:40px;
}
p:before{
content: " ";
}
p:after{
content: " ";
}
li{
list-style: none;
}
/* li:first-child{
color:brown;
}
li:last-child{
color:rgb(65, 42, 165);
}
li:nth-child(2){
color:rgb(165, 42, 155);
}
li:nth-last-child(2){
color:rgb(42, 165, 73);
} */
li:nth-child(4n+1){
color: aqua;
}
li:nth-child(4n+2){
color: black;
}
li:nth-child(4n+3){
color: blue;
}
li:nth-child(4n+4){
color: blueviolet;
}
li:only-child{
color: rgb(165, 42, 124);
}
/* input[type="text"]:hover{
background: green;
}
input[type="text"]:active{
background: blue;
}
input:focus{
background: red;
} */
/* input[type="text"]:enabled{
background: green;
}
input[type="text"]:disabled{
background: red;
} */
input[type="text"]:read-only{
background:white;
}
input[type="text"]:read-write{
background:green;
}
/*
input[type="checkbox"]:checked{
outline: 2px solid red;
} */
input[type="checkbox"]:default{
outline: 2px solid red;
}
input[type="radio"]:indeterminate{
outline: 2px solid red;
}
style>
head>
<body>
<a href="#target1"> a>
<a href="#target2"> a>
<p id="target1"> <br/> p>
<p id="target2"> p>
<p id="t1"> p>
<br/>
<table border="1" cellpadding="0" cellspacing="0" width="100px">
<tr>
<td>1td>
<td>2td>
<td>3td>
<td>4td>
tr>
<tr>
<td>1td>
<td>2td>
<td>td>
<td>4td>
tr>
table>
<h1> h1>
<ul>
<li> li>
ul>
<h1> h1>
<ul>
<li> 1 li>
<li> 2 li>
<li> 3 li>
<li> 4 li>
<li> 5 li>
<li> 6 li>
ul>
<form>
:<input type="text" placeholder=" " value="uncle-huang" readonly/>
<br/>
:<input type="text" placeholder=" " />
form>
<form>
:
<input type="radio" name="sex">
<input type="radio" name="sex">
<br/>
:
<input type="checkbox" checked>
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
form>
body>
html>