提示：CSS3 是 Cascading Style Sheets（层叠样式表）的第三个主要版本，引入了许多新的特性和增强功能，用于设计和布局网页。本章记录CSS3新增选择器，盒子模型。
目录
一、C3新增选择器
1) 属性选择器
1.[class^='className']
2.tag[class^='className']
3.tag[class$='className']
4.tag[class*='className']
5.input[type='typeName']
2)伪类选择器
1.first-child
2.last-child
3.nth-child(n) 与 nth-of-type(n)
3)其他选择器
1.empty
2.not('className')
3.+相邻选择器
4.~兄弟选择器
二、盒子模型box-sizing
1.content-box
2.border-box
一、C3新增选择器
1) 属性选择器
1.[class^='className']
<style>
/*选中所有class属性以box开头的标签*/
[class^="box"] {
width: 100px;
height: 100px;
margin: 10px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="box1 bbb ccc"></div>
<div class="box2 aaa bbb"></div>
<div class="box3 bbb"></div>
</body>2.tag[class^='className']
<style>
/* 选中所有class属性以box开头的div标签 */
div[class^="box"] {
background-color: red;
}
</style>
</head>
<body>
<div class="box1 bbb ccc"></div>
<div class="box2 aaa bbb"></div>
<div class="box3 bbb"></div>
</body>3.tag[class$='className']
<style>
/* 选中所有class属性以bbb结束的div标签 */
div[class$="bbb"] {
border-radius: 20px;
}
</style>
</head>
<body>
<div class="box1 bbb ccc"></div>
<div class="box2 aaa bbb"></div>
<div class="box3 bbb"></div>
</body>4.tag[class*='className']
<style>
/* 选中所有class属性包含aaa的div标签 */
div[class*="aaa"] {
opacity: .2;
}
</style>
</head>
<body>
<div class="box1 bbb ccc"></div>
<div class="box2 aaa bbb"></div>
<div class="box3 bbb"></div>
</body>5.input[type='typeName']
<style>
/* 选择文本输入框标签 */
input[type="text"] {
height: 40px;
border: 2px solid blue;
box-sizing: border-box;
float: left;
}
/* 选择submit按钮标签 */
input[type="submit"] {
height: 40px;
border: 2px solid deeppink;
cursor: pointer;
float: left;
}
</style>
</head>
<body>
<div class="clearfix">
<input type="text">
<input type="submit">
</div>
</body>2)伪类选择器
1.first-child
选择第一个标签
<style>
ul {
margin-top: 10px;
}
/*选择ul下的第一个li标签*/
ul li:first-child {
font-size: 40px;
color: red;
}
</style>
</head>
<body>
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表5</li>
<li></li>
<li class="demo">123456</li>
<div>这才是最后一个标签</div>
</ul>
</body>2.last-child
选择最后一个标签
<style>
ul {
margin-top: 10px;
}
/*选择ul下的第最后一个个li标签*/
/*如果最后一个不是li标签就会选择到那个标签*/
ul li:last-child {
font-size: 40px;
color: green;
}
/*这才是最后一个标签*/
ul div:last-child {
font-size: 40px;
color: green;
}
</style>
</head>
<body>
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表5</li>
<li></li>
<li class="demo">123456</li>
<div>这才是最后一个标签</div>
</ul>
</body>3.nth-child(n) 与 nth-of-type(n)
选择第n个标签
<style>
ul {
margin-top: 10px;
}
/* 选择第2个 */
ul li:nth-child(2) {
color: purple;
font-weight: bold;
font-size: 30px;
}
/* 选择第3个 */
ul li:nth-of-type(3) {
color: yellowgreen;
font-weight: bold;
font-size: 20px;
}
/* 选择偶数对应的标签 n: 1,2,3,4,5,6,7,8,9........*/
ol li:nth-child(2n) {
background-color: red;
}
/* 选择奇数对应的标签 n: 1,2,3,4,5,6,7,8,9........*/
ol li:nth-child(2n-1) {
background-color: blue;
}
</style>
</head>
<body>
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表5</li>
<li></li>
<li class="demo">123456</li>
<div>这才是最后一个标签</div>
</ul>
</body>3)其他选择器
1.empty
没有任何内容的标签
<style>
/* 选择没有任何内容的标签 */
ul li:empty {
height: 40px;
width: 100px;
background-color: pink;
}
</style>
</head>
<body>
<ol>
<li>选项1</li>
<li class="current">选项2</li>
<li>选项3</li>
<li>选项4</li>
<li>选项5</li>
<li>选项6</li>
</ol>
</body>2.not('className')
选择除了包含className类名的其他标签
<style>
/* 选择除了类名叫.demo的所有其他li标签 */
ol li:not(.demo) {
list-style: none;
}
</style>
</head>
<body>
<ol>
<li>选项1</li>
<li class="current">选项2</li>
<li>选项3</li>
<li class='demo'>选项4</li>
<li>选项5</li>
<li>选项6</li>
</ol>
</body>3.+相邻选择器
选择相邻的标签
<style>
/* 相邻选择器 */
.current+li {
height: 100px;
}
</style>
</head>
<body>
<ol>
<li>选项1</li>
<li class="current">选项2</li>
<li>选项3</li>
<li>选项4</li>
<li>选项5</li>
<li>选项6</li>
</ol>
</body>4.~兄弟选择器
选择兄弟标签
<style>
/* 兄弟选择器 */
.current~li {
opacity: .3;
}
</style>
</head>
<body>
<ol>
<li>选项1</li>
<li class="current">选项2</li>
<li>选项3</li>
<li>选项4</li>
<li>选项5</li>
<li>选项6</li>
</ol>
</body>二、盒子模型box-sizing
box-sizing 是一个 CSS 属性，用于指定元素的盒子模型的计算方式。它有以下几种取值：
1.content-box
box-sizing: content-box;
/*默认属性,表示内容盒子,盒子模型总宽高=width/height+左右/上下padding+左右/上下border*/2.border-box
box-sizing: border-box;/*表示怪异盒子,盒子模型总宽高=width/height*/