本文共 2681 字，大约阅读时间需要 8 分钟。

    
       
I love CSS.
I love HTML.
I love FishC.

    
           
I love CSS.
 I love HTML.>
I love FishC.
    快点开，里面有好东西！

    
           
这是题目
1.假装这里有内容
2.假装这里有内容
3.假装这里有内容
4.假装这里有内容
5.假装这里有内容
6.假装这里有内容

其他选择器：

交集选择器：   span.first{}并集选择器：h2,p,span{}后代选择器: body .first{}  后代所有有first属性的都被选中子元素选择器：body > .first{}

伪元素选择器：

::first-line选择器:仅对块级元素内的第一行内容有效，而对于像a元素这类行内元素，不起作用 p::first-line只对p元素的第一行有效果::first-letter选择器：仅对块级元素内的第一个字符有效，用法与::first-line相同::before和::after选择器:在元素的前面或后面分别插入文本，例如：a::before{content:"文本"} a::after{content:"文本"}在a元素前后边插入文本a::before{content:url(图片路径)} a::after{content:url(图片路径)}在a元素前后插入图片::selection选择器:对鼠标选中内容进行配置

伪类选择器：

a:link{        color: pink;    }    /*链接未被访问过时*/    a:visited{        color: red;    }    /*链接被访问过时*/    a:hover{        color: black;    }    /*鼠标悬停在链接上方的时候*/    a:active {        color: green;    }    /*鼠标按下链接得那一刻*/    input#gril:focus{    background-color: pink;     }    /*当元素获得焦点时*/

UI伪类选择器：

:enabled{           outline: 1px solid green;        }        :disabled{           background-color: #dddddd;        }        /*可用的元素边框变绿，不可用的灰化*/        :checked + span{            background-color: red;            color: green;        }        /*兄弟选择器并用，设置表单元素的选项被选中时的样式*/        :required{            outline: 3px solid red;        }        :optional{            outline: 3px solid green;        }        /*必选的画3像素的红色的线，可选的画3像素的绿色的线*/        :default{            outline: 3px solid red;        }        /*设置默认元素的样式*/        input:valid{            border: 2px solid green;        }        /*输入合法时画2像素的绿色线*/        input:invalid{            border: 2px solid red;        }        /*输入不合法时画2像素的红色线*/        input:in-range{            border: 2px solid green;        }        input:out-of-range{            border: 2px solid red;        }        /*输入在范围之内，超出范围的选项*/        input:read-only{            background-color: red;        }        input:read-write{            background-color: yellow;        }        /*只读和读写的选项*/

结构伪类选择器：

:root{             background-color: red;         }        /*根元素的选择器，即背景*/        :empty{            width: 20px;            height: 20px;            background-color: red;        }        /*空元素选择器，例如
*/        p:first-child{            border: 2px solid green;        }        /*设置第一个作为子元素的p元素格式 last-child时最后一个 only-child如果是父元素的唯一子元素就被选中，only-of-type唯一类型，first-of-type和last-of-type*/        p:nth-child(3){             border: 2px solid green;        }/*第三个子元素 nth-of-type(rank)*/

其他伪类选择器：

Target Test.
……
Jump to the Target1.
/*页面内锚*/:lang(zh){background-color: red;}:lang(en){background-color:green;}/*为不同语言设置不同颜色*/:not(span){     color:red;}/*排除span选择*/

属性选择器：

转载地址：http://fpgwi.baihongyu.com/