选择器

块元素和内联元素
块元素
所谓的块元素就是会独占一行的元素无论它的内容有多少，它都会独占一整行

常见的块元素：div p h1 h2 h3……

div这个标签没有任何语义，就是一个纯粹的块元素并且不会为它里边的元素设置任何的默认样式div元素主要用来对页面进行布局的

内联元素（行内元素）
所谓的行内元素指的是只占自身大小的元素，不会占用一行

常见的内联元素：span a img iframe

span没有任何语义，span标签专门用来选中文字，然后为文字来设置样式

块元素主要用来做页面中的布局，内联元素主要用来选中文本设置样式

一般情况下只使用块元素去包含内联元素，而不会使用内联元素去包含一个块元素

a元素可以包含任意元素，除了他本身

p元素不可以包含任何其它的块元素

选择器：
ID选择器：
ID选择器，可以根据元素的id属性值 选取 元素。

语法：
        #id { }

 比如#box会选中页面中id属性值为box 的 元素，和class属性不同，id属性是不能重 复的。

元素选择器：
•元素选择器（标签选择器），可以根据标 签的名字来从页面中选取指 定的元素。

•语法：
               标签名 { }

     比如p则会选中页面中的所有p标签，h1会选中页面中的所有h1标签

类选择器：
•类选择器，可以根据元素的class属性 值选 取元素。

 •语法：
           .className{ }

   •比如.hello会选中页面所有class属性为 hello的元素。

并集选择器（群组选择器）：
•群组选择器，可以 同时使用多个选择器， 多个选择器将被 同时应用指定的样式。

•语法：
       选择器1,选择器2,选择器3 { }

     •比如p,.hello,#box会同时选中页面中p元素，class为hello的元素，id为box的元素。

通用选择器：
•通用选择器，可以同时选中页面中 的所有 元素。

 •语法：
      *{ }

复合选择器（交集选择器）：
•复合选择器，可以 同时使用多个选择器， 这样可以选 择同时满足多个选择器的元素。

  •语法：
         – 选择器1选择器2{}

         •例如div.box1会选中页面中具有box1这个class的div元素。

后代选择器：
•后代选择器可以根据标签的关系，为处在 元素内部的代元素设置样式。

  •语法：
       祖先元素 后代元素 后代元素 { }

     比如p strong 会选中页面中所有的p元素内的strong元素

属性选择器：
•属性选择器可以挑选带有特殊属性的标签。

    •语法:

        [属性名]

        [属性名="属性值"]

        [属性名~="属性值"]

        [属性名|="属性值"]

        [属性名^="属性值"]（开头）

        [属性名$="属性值"]（结尾）

        [属性名*="属性值"]（包含）

子元素选择器：
•子元素选择器可以给另一个元素的子元素 设置样式。

•语法：
      父元素 > 子元素{}

    比如body > h1将选择body子标签中的所有h1标签

其他元素选择器：

•:first-child

   –选择第一个子标签

   •:last-child

   –选择最后一个子标签

   •:nth-child

   –选择指定位置的子元素

   •:first-of-type

   •:last-of-type

   •:nth-of-type

   –选择指定类型的子元素

兄弟选择器：
•除了根据祖先父子关系，还可以根据兄弟 关系查找元素。

•语法:

        –查找后边一个兄弟元素

            •兄弟元素 + 兄弟元素{}

        –查找后边所有的兄弟元素

           •兄弟元素 ~ 兄弟元素{}

否定伪类：
•否定伪类可以帮助我们选择不是其他东西 的某件东西。

•语法:

        :not(选择器){}

        比如p:not(.hello)表示选择所有的p元素但 是class为hello的除外

伪类、伪元素：

给段落定义样式：
•首字母

–:first-letter

•首行

–:first-line

给链接定义样式：
•有四个伪类可以让你根据访问者与该链接的交互方式，将链接设置成4种不同的状态。

•正常链接

–a:link

•访问过的链接

–a:visited（只能定义字体颜色）

•鼠标滑过的链接

–a:hover

•正在点击的链接

–a:active

焦点：点击 input输入框出现的光标

•获取焦点

–:focus

•指定元素前

–:before

•指定元素后

–:after

•选中的元素

–::selection(火狐：-::-moz-selection)

权重：

优先级的规则：优先级高的优先显示
内联样式，优先级1000

id选择器，优先级100

类和伪类，优先级10

元素选择器，优先级1

通配*，优先级0

继承的样式，没有优先级