1.css3属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3属性选择器</title>
<style type="text/css">
/* id包含div字符串*/
[id*=div] {
color: lime;
}
/*开始字符串为div*/
[id^=div] {
color: red;
}
/*结束字符串为div*/
[id$=div] {
color: blue;
}
</style>
</head>
<body>
<div>
<div id="div1">11</div>
<div id="2div2">22</div>
<div id="3div3">33</div>
<div id="44div">44</div>
<div id="wowo">55</div>
</div>
</body>
</html>
2.css3结构伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3结构伪类选择器</title>
<style type="text/css">
/* 第一行*/
body>p:first-line {
color: aqua;
}
/* 首字母*/
body>p:first-letter {
color: red;
}
/*元素前插入内容*/
li:before {
content: "--";
color: yellow;
}
/*元素后插入内容*/
li:after {
content: "++";
color: green;
}
/*根元素*/
:root {
background: darkgrey;
}
/*排除*/
div *:not(h1) {
background: green;
}
/*为空*/
.bb li:empty {
background: green;
}
/*业内跳转目标*/
:target {
background: orange;
}
</style>
</head>
<body>
<p>
我是第一行
<br> 我是第二行
</p>
<ul>
<li class="aa">1</li>
<li>2</li>
<li class="aa">3</li>
<li class="aa">4</li>
</ul>
<ul class="bb">
<li>1</li>
<li></li>
<li>3</li>
<li></li>
<li>5</li>
<li></li>
</ul>
<div>
<h1>111</h1>
<h2>222</h2>
<h3>333</h3>
</div>
<a href="#a1">111</a>
<a href="#a2">222</a>
<a href="#a3">333</a>
<div id="a1">a1</div>
<div id="a2">a2</div>
<div id="a3">a3</div>
</body>
</html>
3.css3选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3选择器</title>
<style type="text/css">
/*第一个元素*/
li:first-child {
background-color: yellow;
}
/*最后一个元素*/
li:last-child {
background-color: blue;
}
/*上到下第几个*/
li:nth-child(2) {
background-color: #666;
}
/*下到上第几个*/
li:nth-last-child(2) {
background-color: #888;
}
/*基数*/
li:nth-child(odd) {
color: red;
}
/*偶数*/
li:nth-child(even) {
color: #999;
}
/*只算同类元素*/
.aa h3:nth-of-type(2),
.aa h4:nth-of-type(2) {
color: red;
}
/*样式循环*/
.bb li:nth-child(4n+1) {
background-color: #111;
}
.bb li:nth-child(4n+2) {
background-color: #222;
}
.bb li:nth-child(4n+3) {
background-color: #333;
}
.bb li:nth-child(4n) {
background-color: #444;
}
/*只有一个元素*/
li:only-child {
background-color: green;
}
</style>
</head>
<body>
<ul>
<li>11</li>
<li>22</li>
<li>33</li>
<li>44</li>
<li>55</li>
<li>66</li>
<li>77</li>
<li>88</li>
</ul>
<div class="aa">
<h3>111</h3>
<h4>222</h4>
<h3>111</h3>
<h4>222</h4>
<h3>111</h3>
<h4>222</h4>
<h3>111</h3>
<h4>222</h4>
<h3>111</h3>
<h4>222</h4>
</div>
<div class="bb">
<ul>
<li>11</li>
<li>22</li>
<li>33</li>
<li>44</li>
<li>11</li>
<li>22</li>
<li>33</li>
<li>44</li>
<li>11</li>
<li>22</li>
<li>33</li>
<li>44</li>
<li>11</li>
<li>22</li>
<li>33</li>
<li>44</li>
</ul>
</div>
<ul>
<li>11</li>
</ul>
</body>
</html>
时间： 2024-12-20 01:05:33