策勒网站建设,四川建设网有限责任公司招聘,php创建站点,苏州手机网站建设费用1.相同优先级的样式以写在后面的为主。
2.交集选择器#xff0c;并且 条件挨在一起 p.rich{...} /*p元素class有rich的元素*/
3.并集选择器#xff0c;或者 逗号隔开 .class1,class2{...}/*满足其中一个类名都会使用该样式*/
4.后代选择器 空格 隔开 所有符合的包括孙子及…
1.相同优先级的样式以写在后面的为主。
2.交集选择器并且 条件挨在一起 p.rich{...} /*p元素class有rich的元素*/
3.并集选择器或者 逗号隔开 .class1,class2{...}/*满足其中一个类名都会使用该样式*/
4.后代选择器 空格 隔开 所有符合的包括孙子及 .div1 ul li a {...}
5.子代选择器 下一级 用分隔 divp{...}
6.兄弟选择器 .div1p{...}/*只选中.div1挨着的下一个兄弟元素*/.div1~p{...}/*选中.div1所有兄弟元素*/
7.属性选择器 [title]{...}/*具有title属性的元素*/[titlephp]{...}/*title属性值为php的元素*/[title^p]{...}/*title以p开始的元素*/[title$p]{...}/*title以p结束的元素*/[title*p]{...}/*title包含p的元素*/
8.动态伪类,指会变化的状态的 a:link{...}/*没有访问过的 a元素独有*/a:visited{...}/*访问过的 a元素独有*/a:hover{...}/*鼠标悬停 其他元素也有*/a:active{...}/*激活状态点击瞬间 其他元素也有*//*上面四种顺序不能乱写需按上面顺序*/input:focus,select:focus{...}/*focus表单伪类只对有输入元素*/
9.结构伪类选择器 div p:first-child{...}/*div下所有p,但这p必须是父亲的第一个儿子*/div p:last-child{...}/*div下所有p,但这p必须是父亲的最后一个儿子*/div p:nth-child(2){...}/*div下所有p,但这p必须是父亲的第几个儿子从1开始*//*nth-child(2n);2n代表2的倍数n从0开始2*00,2*12选中所有偶数元素(even)偶数,(odd)奇数*/divp:first-of-type{...}/*div下只找P类型元素的第一个*/divp:last-of-type{...}/*div下只找P类型元素的最后一个*/divp:nth-of-type(2){...}/*div下只找P类型元素的第几个*/divp:nth-last-child(8){...}/*倒数第几个p元素儿子*/span:only-child{...}/*span只有一个子元素*/
10.否定伪类选择器 divp:not(.php){...}/*选定p子元素class不等于.php的*/divp:not([title^标题]){...}/*不要title标题的元素*/divp:not(:first-child){...}/*不要div下p元素第一个的元素*/
11.UI伪类选择器 input:checked{...}/*checkbox,radio选中时的样式*/input:disabled{...}/*被禁用的*/
12.目标伪类 锚定a href#one/adiv idone/divdiv:target{...}/*当有多个锚定时候选中哪个哪个就用该样式*/
13.语言伪类 div langenabc/div/*en,zh-CN*/div:lang(en){...}/*语言标记为英文的div*/:lang(zh-CN){...}/*不限制元素 全部为简体中文的元素*/
14.伪元素选择器 div::first-letter{...}/*div下第一个字母用该样式*/div::first-line{...}/*div下第一行*/div::selection{background-color:green}/*div下鼠标选中的文字改变背景色*/input::placeholder{...}/*input 提示文字*/p::before{content:$}/*p元素内部首位前面加上内容*/p::after{content:.00}/*p元素内部末尾前面加上内容*/
15.选择器优先级
行内样式 ID选择器 类选择器 元素选择器 通配选择器
16.CSS三大特性 层叠性继承性优先级 17颜色rgb与rgba [三个字一样为灰色] rgb红,绿,蓝;光的三原色的混合色 0-255 color:rgb(red,green,blue)color:rgb(138,43,226) rgba同上只是a代表透明度0.5半透明 HEX与HEXA [与rgb一样都是红绿蓝色只是这里用16进制表示00-FF代表深度] #ff0000;/*红色给满绿色没有蓝色没有*/ #ff000055;/*红色给满绿色没有蓝色没有,透明为55*/ HSL与HSLA 原理同上 color:hsl(角度[0-360]deg饱和度0-100%亮度0-100%)
