html——css-引入方式，选择器

一、css三种引入方式：

　　1.行内样式，

　　使用style属性。style属性是全局属性，任何标记都有。

　　style属性的值用于对当前标记进行修饰。每个样式由样式名称和样式值所构成，

　　语法：名称：值；多个样式之间使用分号分隔。

　　  缺点：书写太长，不易读。仅对当前标记有效，不能批量生效。

　　2.页面样式：

　　使用style标记，

　　style标记通常情况下，定义在head标记内。通过选择器来指定要修饰的标记。

　　缺点：在某种程度上，规避了行内样式的缺点。仅对当前页面有效。并且当样式较多时，仍然是不易读的。

　　3.引入外部样式表：使用link标记，引入一个外部的样式表。对第二种方式的一种优化。

　　好处：样式都在一个外部文件中，方便复用。彻底解决了易读问题，以及不能批量使用的问题。优先推荐使用外部样式表。

二、选择器：

　　基础选择器

　　1. 标记选择器：语法：直接写标记。作用：选中所有类型的标记。缺点：选择范围太大，不能灵活控制。单独使用的频率极低。

　　2. id选择器：语法：#id，作用：选中指定id的标记。

　　3. 类选择器：使用最频繁的选择器。语法：.类名称。作用：选择所有具有此类名称的标记。

　　class属于全局属性，任何标记都有。每一个标记可以有0或多个类名称，多个类名称之间没有顺序。

 

　　高级选择器（复合选择器）

　　4.子代选择器：选中子代元素。 语法：a>b。>前后不能有空格

　　5. 后代选择器：选中后代元素。语法：a b。（空格）。子代也算是后代。

　　6. 并集选择器：同时对连个选择器取并集。语法：a，b，(逗号)。

　　7. 交集选择器：对两个选择器取交集。语法：ab，对两个选择器取交集，两个紧紧挨着。b一般是类

　　8.兄弟选择器

 　　兄弟选择器：a+b紧邻弟选择器，  选中紧邻的弟元素，必须符合选择器b。

   　 a~b所有弟选择器，选中所有的弟元素，且必须符合选择器b。

　　

相邻兄弟选择器
    li+li         选择下一个元素（相邻的兄弟元素）
    span~p        选择span之后所有的同级p元素
    ul>li        子选择器 只能选择亲儿子


    属性选择器
        [title]         选择所有title属性的元素
        [title=a]        选择所有title=a的元素
        [title=“1”]        值为数字或特殊字符必须加双引号
        [class=“a  b”]    值为多个必须加双引号
        [class~=“a”]    选择用所有单词为a的元素
        例：
        <div class=“b a”></div>        正确
        <div class=“a”></div>        正确
        <div class=“ab b”></div>        错误
        <div class=“aa  a”></div>        正确

    [class|=a]          选择要么a要么a-开头的完整单词的元素
        例：
        <div class=“a”></div>        正确
        <div class=“a b”></div>    错误
        <div class=“are”></div>    错误
        <div class=“a-b”></div>    正确
    [class^=a]    选择所有a开头的元素
        例：
        <div class=“a-b”></div>    正确
        <div class=“aa”></div>        正确
        <div class=“ba”></div>        错误
        <div class=“b  a”></div>    错误

    [class$=a]    选择所有a结尾的元素
        例：
        <div class=“a-b”></div>    错误
        <div class=“aa”></div>        正确
        <div class=“ba”></div>        正确
        <div class=“b  a”></div>    正确
        [class*=a]    选择所有带有a的元素
        
    结构性伪类选择器(层级选择器)
        :root         选择根目录 可以理解成html
        :root{background:#f00;}
        body{background:#00f;}
        body  :not(h1)         除子元素h1的所有子元素    
        p:empty        选择内容为空的元素(回车换行都不算空)
        ul li:first-child        选择第一个(子)元素
        ul li:last-child        选择最后一个(子)元素
        ul li:nth-child(2)        选择第二个(子)元素
        ul li:nth-last-child(2)        选择倒数第二个(子)元素
        ul li:nth-child(odd)        所有正数下第奇数个(子)元素
        ul li:nth-child(even)        所有正数下第偶个(子)元素
        div p:nth-of-type(2)        有关这个元素的第二个(子)元素
        div p:nth-last-of-type(2)    有关这个元素的倒数第二个(子)元素
        div p:only-child        只有p元素是唯一一个(子)元素才有效

 

三、选择器优先级 权重的问题

　　css优先级判定原则：根据所有原则综合判定

　　！ impoatant 权重 （最好不要进行使用）

　　1.!impoatant>行内样式>页面样式>外部样式>浏览器默认样式

　　2.对元素的选择（定位）越精确，则优先级越高。

　　结论一：id选择器>类选择器>标记选择器>通配符选择器（可以选择控制所有的标记）

　　结论二：一般情况下，对于非id选择器，选择器的构造及选择的过程越复杂，优先级越高。

　　3.就近原则：样式定义，离要选择的元素，越近，优先级越高

　　4.使用!important强制改变优先级，impoatant(只要写了，其他就没希望了）注意：除非特殊清楚，不建议大量使用！impoatant（因为一旦使用，然后更改的时候特别的麻烦）

　　5.max-width/max-height/min-width/min-hight>!important（优先级）

 ·