1.高级选择器
一.高级选择器
1-后代选择器 *****
儿子、孙子、重孙子
1. .father .wu{
color: red;
} 选择父类中特定的子类
2. .father p{ #后代中间用空格分开
color: red;
} 选择父类中所有的标签
2-子代选择器
只能是亲儿子（可能有继承关系）仅仅表示的是当前div元素选中的子代(不包含孙子....)元素p
div>p{
}
3-组合选择器
多个选择器组合到一起共同设置样式
div,p,a,li,span{
font-size: 14px;
}
4-交集选择器
第一个标签必须是标签选择器，第二个标签必须是类选择器
div中有active 才会被选中
div.active{
}
5-属性选择器
input[type='text']
伪类选择器：LoVe HAte
a:link 没有被访问的
a:visited 访问过后的
a:hover 鼠标悬停的时候
a:active 摁住的时候
-伪元素选择器
p:before 在...的前面添加内容 一定要结合content
p:after 在...的后面添加内容 与后面的布局有很大关系
2.css的继承性和层叠性 （坑）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*.father p{ #后代中间用空格分开 选择父类中所有的标签 color: red; }*/ .father .wu{ 选择父类中特定的子类 color: green; } </style> </head> <body> <div class="father"> <p>alex</p> <ul> <li> <p class="wu">wusir</p> </li> </ul> </div> <p class="wu">日天</p> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .father>p{ color: red; } .father>ul>li{ （属性继承） width: 100px; } .container{ color: red; } </style> </head> <body> <div class="father"> <p>alex</p> <p>alex</p> <div class="content"> <p>wusir</p> </div> <ul> <li> alex2 <ul> <p>defad </p> <li>wusir</li> </ul> </li> </ul> </div> <div class="container"> <p>日天</p> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ font-size: 12px; #由于继承关系，所有的都继承下来 } *{ padding: 0; margin: 0; } body,div,p,a,span{ padding: 0; margin: 0; } </style> </head> <body> <div> alex </div> <p>alex2</p> <a href="#">日天</a> <span>wusir</span> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> div{ color: red; } div.active{ color: green; } </style> </head> <body> <div class="active">alex</div> <div>hahaha</div> <p class="active">youyou</p> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> form input[type='text']{ background-color: red; } form input[type='password']{ background-color: yellow; } form #user{ background-color: green; } </style> </head> <body> <form action=""> <input type="text" id="user"> <input type="password"> </form> </body> </html>
/*根据属性查找*/
/*[for]{
color: red;
}*/
/*找到for属性的等于username的元素 字体颜色设为红色*/
/*[for='username']{
color: yellow;
}*/
/*以....开头 ^*/
/*[for^='user']{
color: #008000;
}*/
/*以....结尾 $*/
/*[for$='vvip']{
color: red;
}*/
/*包含某元素的标签*/
/*[for*="vip"]{
color: #00BFFF;
}*/
/**/
/*指定单词的属性*/
label[for~='user1']{
color: red;
}
input[type='text']{
background: red;
}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> /*爱恨准则 LoVe HAte*/ a:link{ color: green; /*没有被访问的a标签的颜色*/ } a:visited{ color: yellow; /*访问过后的a标签的颜色*/ } a:hover{ color: red; /*鼠标悬停的时候a标签的颜色*/ } a:active{ color: blue; / 鼠标摁住的时候a标签的颜色 } span:hover{ color: red; font-size: 24px; text-decoration: underline; } .child{ display: none; display（显示的意思） } .father:hover .child{ #鼠标悬浮在父亲上，让它孩子显示 color: red; display: block; } </style> </head> <body> <a href="#">百度一下</a> <span>alex</span> <div class="father"> wusir <p class="child">alex</p> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> p:first-letter{ /*设置第一个首字母的样式*/ color: red; font-size: 26px; #字体都是偶数 } /*伪元素选择器与后面的布局有很大关系*/ p:before{ /*用伪元素 属性一定是content*/ content: '$' /* 在....之前 添加内容 } p:after{ content: '.' /*在....之后 添加内容，使用非常频繁 通常与咱们后面要讲到布局 有很大的关联（清除浮动）*/ } /*需求：这个盒子一定是块级标签 span==>块 并且不再页面中占位置。未来与布局有很大关系 */ .box2{ /*display: none;*/ /*隐藏元素 不占位置*/ display: block; 强制把span转换成块 visibility: hidden; /*隐藏元素 占位置*/ height: 0; 设置高度为0，同样不占位置 } </style> </head> <body> <p class="box"> <span>alex</span> </p> <span class="box2">alex</span> <div>wusir</div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*#p1{ font-size: 30px; color: green; } #p2{ color: green; text-decoration: underline; } #p3{ font-size: 30px; text-decoration: underline; }*/ .lg{ font-size: 30px; } .lv{ color: green; } .un{ text-decoration: underline; } </style> </head> <body> <!-- 张孕康1 30px green 张孕康2 green text-decoration:underline;（下划线） 张孕康3 30px 下划线 --> <!-- 公共类 --> <p id="p1" class="lg lv">张孕康1</p> <p id="p2" class="lv un">张孕康2</p> <p id="p3" class="lg un">张孕康3</p> </body> </html>
2.css的继承性和层叠性
1. 继承性： color、text-xxx、font-xxx、line-xxx的属性是可以继承下来。
盒模型的属性是不可以继承下来的
a标签有特殊情况，设置a标签的字体颜色 一定要选中a，不要使用继承性
2. 层叠性： 覆盖
（1）行内> id > class > 标签 ****
1000 > 100 > 10 > 1
（2）数数 数 id class 标签
（3）先选中标签，权重一样，以后设置为主
（3）继承来的属性 它的权重为0 ，与选中的标签没有可比性
（4）如果都是继承来的属性，保证就近原则
（5）都是继承来的属性，选择的标签一样近，再去数权重
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*.box p span{ color: red; }*/ .box{ color: red; （这种a标签无法继承） } .box a{ color: yellow; （a标签直接继承） } .box p{ color: green; font-size: 30px; line-height: 30px; text-align: right; （对齐方式） background-color: red; （无法继承） } span{ background-color: transparent; (默认属性是透明色) } </style> </head> <body> <div class="box"> 日天 <a href="#">百度</a> （a标签不能继承） <p> wusir <span>alex</span> </p> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*css层叠性 权重 谁的权重大就会显示谁的样式*/ /*如何看权重 数数选择器 id class 标签*/ /*1 0 0*/ /*#box{ color: yellow; }*/ /*0 1 0*/ .box{ color: green; } /*0 0 1*/ div{ color: red; } /* id > 类 > 标签*/ </style> </head> <body> <div class="box" id="box">猜猜我是什么颜色</div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> </title> <style> /*继承来的属性 权重为0*/ /*如果是继承来的熟悉，就近原则，谁更深入谁厉害*/ /*#father1 .box2{ color: red; } .box1{ color: green; }*/ /*都是继承来的 ，都一样深*/ #father1 #father2 .box3{ color: red; } #father1 .box2 .box3{ color: green; } </style> </head> <body> <div class="box1" id="father1"> <ul class="box2" id="father2"> <li class="box3" id="father3"> <p class="box4" id="child">猜猜我的颜色</p> </li> </ul> </div> </body> </html>
1