css3选择器的说明

来源：动视网责编：小采时间：2020-11-27 18:52:41

css3选择器的说明

css3选择器的说明:css3属性符号选择器:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>css3属性选择器</title> <style> [id*=div]{ color:red;/*i

推荐度：

点击下载本文 文档为doc格式

导读css3选择器的说明:css3属性符号选择器:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>css3属性选择器</title> <style> [id*=div]{ color:red;/*i

css3属性符号选择器:

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>css3属性选择器</title>
 <style>
 [id*=div]{
 color:red;/*id包含div的*/
 }
 [id^=div]{
 color:#0000ff;/*id首字符为div的*/
 }
 [id$=div]{
 color:green;/*id结束符为div的,数字前加上\*/
 }
 </style>
</head>
<body>
<div id="div">测试文字</div>
<div id="div1">测试文字</div>
<div id="di">测试文字</div>
<div id="mydiv">测试文字</div>
</body>
</html>

css3结构性伪类选择器root、not、empty、target:

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>css3结构性伪类选择器</title>
 <style>
 /*root选择器指html最外层根元素html*/
 :root{
 background: gray;
 }
 /*如果使用了root，body只对有内容的区域修饰*/
 body{
 background: green;
 }
 /*not排除功能*/
 div *:not(h1){
 color:#fff000;
 }
 /*empty对空的内容修饰*/
 :empty{
 background: royalblue;
 }
 /*target对超链接跳转之后内容修饰*/
 :target{
 background: rebeccapurple;
 color:#fff;
 }
 </style>
</head>
<body>
<div>文字内容
 <h1>标题</h1>
 <p>测试文字</p>
 <div>测试文字2</div>
</div>

<table border="1">
 <tr>
 <td>单元1</td>
 <td>单元2</td>
 </tr>
 <tr>
 <td></td>
 <td>单元2</td>
 </tr>
 <tr>
 <td>单元1</td>
 <td></td>
 </tr>
</table><br/>

<a href="#a1">链接1</a>
<a href="#a2">链接2</a>
<a href="#a3">链接3</a>
<div>
 <div id="a1">
 <h1>链接一</h1>
 <p>内容一</p>
 </div>
 <div id="a2">
 <h1>链接二</h1>
 <p>内容二</p>
 </div>
 <div id="a3">
 <h1>链接三</h1>
 <p>内容三</p>
 </div>
</div>
</body>
</html>

css3结构性伪类选择器first-line、first-letter、before、after:

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>css3结构性伪类选择器</title>
 <style>
 /*first-line:第一行*/
 p:first-line{
 color:#ff0000;
 }
 /*first-letter:首字符*/
 p:first-letter{
 color:#0000ff;
 }
 /*before:之前*/
 li:before{
 content: "--";
 color:#ff0000;
 }
 /*after:之后*/
 li:after{
 content: "这是注释";
 color:gray;
 font-size: 10px;
 }
 </style>
</head>
<body>
<p>这是一段测试文字<br/>这是第二段测试文字</p>
<div>
 <ul>
 <li>test1</li>
 <li>test2</li>
 <li>test3</li>
 <li>test4</li>
 </ul>
</div>
</body>
</html>

css3结构性伪类选择器first-child、last-child、nth-child()、nth-last-child():

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
 body{
 background: #555;
 }
 /*first-child:第一个子元素*/
 li:first-child{
 background:#0000ff;
 }
 /*last-child:最后一个子元素*/
 li:last-child{
 background: #ff0000;
 }
 /*nth-child():指定的第几个子元素*/
 li:nth-child(3){
 background: #fff000;
 }
 /*nth-last-child():指定的倒数第几个子元素*/
 li:nth-last-child(2){
 background: #999999;
 }
 /*even:指定的偶数*/
 li:nth-child(even){
 color: #00ff00;
 }
 /*odd:指定的奇数*/
 li:nth-last-child(odd){
 color:#fff;
 }
 </style>
</head>
<body>
<div>
 <ul>
 <li>这是第1列</li>
 <li>这是第2列</li>
 <li>这是第3列</li>
 <li>这是第4列</li>
 <li>这是第5列</li>
 </ul>
</div>
</body>
</html>

css3结构性伪类选择器nth-child(n)及only-child:

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
 /*nth-child(n)
 n=αn+β*/
 li:nth-child(4n+1){
 background: #0000ff;
 }
 li:nth-child(4n+2){
 background: #00ff00;
 }
 li:nth-child(4n+3){
 background: #999999;
 }
 li:nth-child(4n){
 background: #ff0000;
 }
 /*only-child:对标签内仅有的一个子元素做修饰*/
 li:only-child{
 background: #000;
 color: #fff;
 }
 </style>
</head>
<body>
<ul>
 <li>这是一段测试文字</li>
</ul>
<ul>
 <li>列表1</li>
 <li>列表2</li>
 <li>列表3</li>
 <li>列表4</li>
 <li>列表1</li>
 <li>列表2</li>
 <li>列表3</li>
 <li>列表4</li>
 <li>列表1</li>
 <li>列表2</li>
 <li>列表3</li>
 <li>列表4</li>
 <li>列表1</li>
 <li>列表2</li>
 <li>列表3</li>
 <li>列表4</li>
 <li>列表1</li>
 <li>列表2</li>
 <li>列表3</li>
 <li>列表4</li>
</ul>
</body>
</html>

css3结构性伪类选择器nth-of-type、nth-last-of-type:

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
 /*nth-of-type:同类元素做修饰*/
 h2:nth-of-type(odd){
 background: #fff000;
 }
 /*nth-last-of-type:同类元素倒数做修饰*/
 h2:nth-last-of-type(odd){
 background: #0000ff;
 }
 </style>
</head>
<body>
<div>
 <h2>标题</h2>
 <p>文本内容</p>
 <h2>标题</h2>
 <p>文本内容</p>
 <h2>标题</h2>
 <p>文本内容</p>
 <h2>标题</h2>
 <p>文本内容</p>
</div>
</body>
</html>

css3选择器hover、focus、active、checked:

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
 input[type="text"]:hover{
 background: #fff000;
 }
 input[placeholder=""]:focus{
 background: #ff0000;
 }
 input[type="text"]:active{
 background: #0000ff;
 }
 input[type="checkbox"]:checked{
 outline:2px solid #00ff00;
 }
 </style>
</head>
<body>
<input type="text" placeholder="输入内容">
<input type="text" placeholder="">
<input type="checkbox">音乐
<input type="checkbox">听歌
</body>
</html>

css3选择器enabled、disabled:

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
 /*enabled:可输入状态*/
 input[type="text"]:enabled{
 background: #fff000;
 }
 /*disabled:不可输入状态*/
 input[type="text"]:disabled{
 background:gray;
 }

 </style>
</head>
<body>
<script>
 function radio_change() {
 var radio1=document.getElementById("radio1");
 var radio2=document.getElementById("radio2");
 var text=document.getElementById("text");
 if(radio1.checked){
 text.disabled="";
 }else{
 text.value="";
 text.disabled="disabled";
 }
 }
</script>
<input type="radio" id="radio1" name="radio" onchange="radio_change()">可用
<input type="radio" id="radio2" name="radio" onchange="radio_change()">不可用
<input type="text" id="text" disabled>
</body>
</html>

css3通用兄弟元素选择器:

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>通用兄弟元素选择器</title>
 <style>
 /*对div的同级元素p修饰*/
 div~p{
 background: #fff000;
 }
 </style>
</head>
<body>
<div>
 <div>
 <p>我是div的子元素p</p>
 <p>我是div的子元素p</p>
 </div>
 <p>我是和div同级别p元素</p>
 <p>我是和div同级别p元素</p>
</div>
</body>
</html>

css3选择器的说明

css3选择器的说明:css3属性符号选择器:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>css3属性选择器</title> <style> [id*=div]{ color:red;/*i

推荐度：

点击下载本文 文档为doc格式

标签：说明 css 选择器

热门焦点

css3选择器的说明

css3选择器的说明

css3选择器的说明

最新推荐

猜你喜欢

热门推荐