前端-CSS-3-高级选择器

 <!-- ???????总结： ???????????基础选择器： ???????????????1.标签选择器 ???div ???????????????2.类选择器 ????.div1 ???????????????3.id选择器 ????#box ???????????????4.通配符选择器 ?* ???????????高级选择器： ???????????????1.群组选择器 ?中间用, ???????????????????.title,.content,.footer{} ???????????????2.交集选择器 ?选择器之间不能有空格，第一个标签必须是标签选择器，第二个标签可以是id或者类选择器 ???????????????????p.p1{} ??p#title1{} ???????????????3.后代选择器 ?选择器之间用 空格 ???????????????????ul a{} ???????????????4.子代选择器 ?选择器之间用 > ???????????????????ul>li{} ???????????????5.毗邻选择器 ?选择器之间用 + ?紧跟着h3标题的标签 ???????????????????h3+p{} ???????????????6.兄弟选择器 ?选择器之间用~ ???????????????????h3~p{} ???????????????7.属性选择器 ????????????????????[class=‘baidu‘]{} ????????????????????[class^=‘btn‘]{} ????????????????????[class$=‘ault‘]{} ???????????css样式优先级： ???????????????行内样式 > 内部样式表 > 外部样式表 ???????????????ID选择器 > 类选择器 > 标签选择器 ???-->

/*并集选择器 （组合） ?设置多个标签中的统一样式*/ ???????a,h4{ ???????????color: #666; ???????????font-size: 20px; ???????????text-decoration: none; ???????} ???????????????/* * ??通配符选择器 ??*/ ???????/* 性能有点差*/ ???????html,body,div,p,span,a{ ???????????color: red; ???????????????}

/*交集选择器*/ ???????h3{ ???????????width:300px; ???????????color: red; ???????} ???????.active{ ???????????font-size: 30px; ???????} ???????h3.active{ ???????????background-color: yellow; ???????}

 ???????????/*后代选择器 在css中使用非常频繁*/ ???????/*div ?p{ ???????????color: red; ???????} ???????div div p{ ???????????color: yellow; ???????} ???????.container div p{ ???????????color: green; ???????}*/

/*子代选择器*/ ???????.container>p{ ???????????color: yellowgreen; ???????}

 <div class="box"> ???????<form> ???????????<label for="user">用户名</label> ???????????<input type="text" name="" id="user"> ???????????<label for="pwd">密码：</label> ???????????<input type="password" id="pwd"> ???????</form> ???</div>---------------------------------------------------根据属性查找[title] { ?color: red;}---------------------------------------------------根据属性和值查找找到所有title属性等于hello的元素：[title="hello"] { ?color: red;}-----------------------------------------------------找到所有title属性以hello开头的元素：[title^="hello"] { ?color: red;}------------------------------------------------------找到所有title属性以hello结尾的元素：[title$="hello"] { ?color: red;}------------------------------------------------------找到所有title属性中包含（字符串包含）hello的元素：[title*="hello"] { ?color: red;}----------------------------------------------------找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素：[title~="hello"] { ?color: red;}---------------------------------------------------表单常用input[type="text"] { ?backgroundcolor: red;}