夜灵的Html笔记Day10——浏览器兼容性、复杂选择器

5、浏览器兼容性
    渐变：CSS3 提出的新属性
   C3新属性，放在 老版浏览器中 支持性不好!
     目前为止，主流浏览器的主流版本，对C3支持性特别好!
      但对于不支持C3新属性的版本浏览器，需要通过增加 "浏览器前缀"实现兼容性


常用浏览器前缀：
1、Firefox : -moz-
2、Chrome & Safari : -webkit-
3、Opera : -o-
4、IE : -ms-
浏览器前缀加在哪？？？
1、如果浏览器不支持属性的话，则将前缀加在属性名称前
animation : C3的新属性
兼容：
-moz-animation:值;
-webkit-animation:值;
-o-animation:值;
-ms-animation:值;
animation:值;
2、如果浏览器不支持属性值的话，则将前缀添加在属性值前
background-image:-moz-linear-gradient();
background-image:-webkit-linear-gradient();
background-image:-o-linear-gradient();
background-image:-ms-linear-gradient();
background-image:linear-gradient();    //通用
  
   eg:
  选择器{
     border:1px solid red;
     width:20px;
     -ms-border-radius:5px;
     border-radius:5px;
  }
   **:
     元素选择器   1，
     通用选择器， *   
     类选择器   class  10
     ID选择器   id     100
     群组选择器        
     分类选择器
     伪类选择器    10


     内联样式    1000


1、复杂选择器
1、兄弟选择器
兄弟选择器：
具备相同父元素的元素，称之为 兄弟元素
兄弟选择器，只能向后找，不能向前找
1、相邻兄弟选择器
相邻：紧紧挨着
语法：选择器1+选择器2
      <div id="d1"></div>
      <div id="d2"></div>
      <div class="c1"></div>
      #d2+.c1
ex:
1、div+p
2、#container+.menu
2、通用兄弟选择器
通用：后面所有
语法：选择器1~选择器2
ex:
1、div~p
2、属性选择器
允许通过元素所附带的属性及其值来匹配页面的元素
<input type="text" id="" class="" title="" reaonly>
语法：
    基本语法：[attr]
attr:表示任意 属性
1、[attr]
作用：匹配页面中附带 attr 属性的元素
ex:
1、[id]
  [class]
  [name]
  [color]
2、elem[attr]
elem : element，表示页面任意元素
作用：匹配页面中附带 attr 属性的 elem 元素
ex:
1、div[id]
3、[attr1][attr2]
作用：匹配同时附带 attr1 属性 以及 attr2 属性的元素
ex:
[id][class]
4、[attr=value]
value : 某一具体属性值
ex:想获取页面中所有的文本框 
input[type=text]
input[type="text"]
input[type='text']
                                    [class=p1]
   [id=d1]


5、[class~=value]
在多类选择器引用中使用
class属性值是一个由空格隔开的值列表，
并且value是该值列表中的一个独立的选择器


[class="important"] 和 [class~=important]
ex：
   将页面中所有 包含 important 类选择器的元素匹配出来
6、[attr ^= value]
^= : 以 ... 作为  开始  的
<div class="col-md-5"></div>
<div class="col-sm-3"></div>
<div class="bg-col-6"></div>   
... ...
匹配 页面中所有class以 col 作为开始的元素
[class^=col]
7、[attr *= value]
*= : 包含该 ... 
<div class="col-md-1"></div>
<div class="col-md-3"></div>
<div class="col-md-5"></div>
匹配 页面中所有class值中包含md的元素
[class*=md]
8、[attr $= value]
$= : 以 ... 作为结尾的
eg:
<div class="chuyaxin"></div>
[class$=n]
           <a href="#" target="_blank"></a>


3、伪类选择器
1、目标伪类
作用：匹配 页面中 被激活的 html 锚点元素
语法： :target
2、结构伪类
1、:first-child
作用：匹配 属于其 父元素中的 首个子元素
<table id="tbl">
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
</tr>
<table>
ex:
1、td:first-child
2、#tbl td:first-child
2、:last-child
作用：匹配 属于其 父元素中的 最后一个子元素
3、:nth-child(n)
作用：匹配 属于其 父元素中的 第n个子元素
4、:empty
作用:匹配没有子元素的元素(不能包含文本，空格，回车)
<div></div> --> div:empty{}
5、:only-child
作用：匹配属于其父元素中的唯一子元素
3、否定伪类
作用：将满足指定选择器的元素排除在外
语法：:not(selector)
div:not(".container") : 获取页面中所有 除class 为container 的 div元素


<div class="container"></div>




4、伪元素选择器
伪类：匹配到的是 "元素"
伪元素：匹配到的是元素中的某部分 "内容"
1、:first-letter 或 ::first-letter
作用：匹配 某元素中的首字符
2、:first-line 或 ::first-line
作用：匹配 某元素中的首行
3、::selection
作用：匹配被用户选取的部分
注意：只能改 文本颜色 和 背景颜色


: VS ::
1、在CSS2中，: 即表示伪类选择器，也表示伪元素选择器
2、在CSS3中，: 只代表伪类选择器，::只代表伪元素选择器
推荐使用 : 取代 ::
:first-child : 在 CSS3 以及 CSS2中都支持
::first-child: 只在CSS3中支持