xiayiye5的博客

常用选择器 /*h1{background-color: #6495ED;}//标签直接写即可*/ /*#select{background-color: aqua;}//在ID前面加#即可*/ /*.select_class{background-color: aquamarine;}//class类名的用.加类名即可*/ /*#select,.select_p,d

兄弟元素选择器 span~p { background-color: #FF1493; } //+号,表示跟span紧挨着的第一个才改变颜色,~表示span后面的所有元素改变颜色 我是第一个p 我是第二个p 我是第三个p 我是第一个span 我是第四个p 我是第五个p 我是第六个p

子和后代元素选择器 p span{color: aquamarine;} span{background-color: #FF0000;} 子孙元素span 子元素span

子元素的伪类 /*span:first-child { background-color: #FF0000; } //表示第一个元素,并且必须是span类型才可以改变背景色*/ /*span:last-child { background-color: aquamarine; } //表示最后一个元素,并且必须是span类型才可以改变背景色*/

兄弟元素选择器 span~p { background-color: #FF1493; } //+号,表示跟span紧挨着的第一个才改变颜色,~表示span后面的所有元素改变颜色 我是第一个p 我是第二个p 我是第三个p 我是第一个span 我是第四个p 我是第五个p 我是第六个p

伪元素 /*p:before { content: "我会出现在整个段落的最前面，是不能被选中的"; color: blue; } //表示在p标签和文字之间的一段距离的显示,且这段距离不能被选中*/ p:after { content: "我会出现在整个段落的最后面，是不能被选中的"; color: red; } //表示在p

否定伪类 p:not(#id) { background-color: #ADFF2F; }//not括号里面传递选择器即可 测试否定伪类选择器 测试否定伪类选择器 测试否定伪类选择器 这个一定不能被选中 测试否定伪类选择器 测试否定伪类选择器

伪类选择器 a:hover { color: aquamarine; } //鼠标移入改变颜色 a:active { color: deeppink; } //按住鼠标点击改变颜色 a:visited { color: darkviolet; } //被访问后改变颜色 p::-moz-selection { backg

属性选择器 span[title] { background-color: #FF1493; } span[class] { background-color: #9400D3; } span[id] { background-color: #8FBC8F; } p[title^="abc"] {

选择器的优先级 p { background-color: #6495ED; } //元素选择器进程优先级1 #jc { background-color: #FF1493; } //ID选择器进程优先级100 .jincheng { background-color: aqua; } //类选择器进程优先级10