CSS高级选择器

1.

p:first-of-type{

            background: red;}

p:first-of-type 选择属性其父元素的首个p元素的每个<p>元素

p:last-of-type{

            background: red

        }

p:last-of-type选择属性其父元素的最后p元素的每个p元素

 p:only-of-type{

            background:red;

        }

p:only-of-type  选择属于其父元素唯一的p 元素的每个p元素

p:first-child{

            background: red;

        }

p:first-child选择属性其父元素第一个子元素的每个p元素

p:last-child{

            background: red;

        }

p:last-child选择属性其父元素最后一个子元素的每个p元素

 p:nth-of-type(1){

            background-color: red；

  p:before{

        content:'前面插入的内容';

            color:red;

        }

content表示文字内容。p:before表示在每个<p>元素的内容之前插入内容

p:after{

       content:'后面插入的内容';

            color:blue;}

content表示文字内容 。p:after在每个<p>元素的内容之后插入内容

2.优先级算法

优先级就近原则，同权重情况下样式定义最近者为准。

 !important > id选择器 > class类选择器 > tag标签选择器。

         !important infinity(无穷大)

        行内样式    1000

        id选择器    100

        class类选择器|属性选择器|伪类  10

        标签选择器   1

        通配符(*)    0

3.

   电子邮件： <input type="email" name="emilName">   提交表单时会自动验证email的值

   网页的URL： <input type="url" name="urlName">   提交表单时会自动验证url的值

   选取颜色：<input type="color" name="colorName">