企业网站开发技术题库,网站策划选题,广州高端企业网站建设,网站开发企业部门提示#xff1a;CSS3 是 Cascading Style Sheets#xff08;层叠样式表#xff09;的第三个主要版本#xff0c;引入了许多新的特性和增强功能#xff0c;用于设计和布局网页。本章记录CSS3新增选择器#xff0c;盒子模型。 目录 一、C3新增选择器
1) 属性选择器
1.[c… 提示CSS3 是 Cascading Style Sheets层叠样式表的第三个主要版本引入了许多新的特性和增强功能用于设计和布局网页。本章记录CSS3新增选择器盒子模型。 目录 一、C3新增选择器
1) 属性选择器
1.[class^className]
2.tag[class^className]
3.tag[class$className]
4.tag[class*className]
5.input[typetypeName] 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
/headbodydiv classbox1 bbb ccc/divdiv classbox2 aaa bbb/divdiv classbox3 bbb/div
/body
2.tag[class^className]
style/* 选中所有class属性以box开头的div标签 */div[class^box] {background-color: red;}
/style
/headbodydiv classbox1 bbb ccc/divdiv classbox2 aaa bbb/divdiv classbox3 bbb/div
/body
3.tag[class$className]
style/* 选中所有class属性以bbb结束的div标签 */div[class$bbb] {border-radius: 20px;}
/style
/headbodydiv classbox1 bbb ccc/divdiv classbox2 aaa bbb/divdiv classbox3 bbb/div
/body
4.tag[class*className]
style/* 选中所有class属性包含aaa的div标签 */div[class*aaa] {opacity: .2;}
/style
/headbodydiv classbox1 bbb ccc/divdiv classbox2 aaa bbb/divdiv classbox3 bbb/div
/body
5.input[typetypeName]
style/* 选择文本输入框标签 */input[typetext] {height: 40px;border: 2px solid blue;box-sizing: border-box;float: left;}/* 选择submit按钮标签 */input[typesubmit] {height: 40px;border: 2px solid deeppink;cursor: pointer;float: left;}
/style
/headbodydiv classclearfixinput typetextinput typesubmit/div
/body 2)伪类选择器
1.first-child
选择第一个标签
styleul {margin-top: 10px;}/*选择ul下的第一个li标签*/ul li:first-child {font-size: 40px;color: red;}
/style
/headbodyulli列表1/lili列表2/lili列表3/lili列表4/lili列表5/lili/lili classdemo123456/lidiv这才是最后一个标签/div/ul
/body
2.last-child
选择最后一个标签
styleul {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
/headbodyulli列表1/lili列表2/lili列表3/lili列表4/lili列表5/lili/lili classdemo123456/lidiv这才是最后一个标签/div/ul
/body
3.nth-child(n) 与 nth-of-type(n)
选择第n个标签
styleul {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
/headbodyulli列表1/lili列表2/lili列表3/lili列表4/lili列表5/lili/lili classdemo123456/lidiv这才是最后一个标签/div/ul
/body
3)其他选择器
1.empty
没有任何内容的标签
style/* 选择没有任何内容的标签 */ul li:empty {height: 40px;width: 100px;background-color: pink;}/style
/headbodyolli选项1/lili classcurrent选项2/lili选项3/lili选项4/lili选项5/lili选项6/li/ol
/body
2.not(className)
选择除了包含className类名的其他标签
style
/* 选择除了类名叫.demo的所有其他li标签 */ol li:not(.demo) {list-style: none;}/style
/headbodyolli选项1/lili classcurrent选项2/lili选项3/lili classdemo选项4/lili选项5/lili选项6/li/ol
/body
3.相邻选择器
选择相邻的标签
style/* 相邻选择器 */.currentli {height: 100px;}/style
/headbodyolli选项1/lili classcurrent选项2/lili选项3/lili选项4/lili选项5/lili选项6/li/ol
/body
4.~兄弟选择器
选择兄弟标签
style/* 兄弟选择器 */.current~li {opacity: .3;}
/style
/headbodyolli选项1/lili classcurrent选项2/lili选项3/lili选项4/lili选项5/lili选项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*/
