CSS选择器

CSS选择器的简单介绍

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、compound selector（复合选择器）

A compound selector is a sequence of simple selectors that are not separated by a combinator, and represents a set of simultaneous conditions on a single element.
As whitespace represents the descendant combinator, no whitespace is allowed between the simple selectors in a compound selector.
If it contains a type selector or universal selector, that selector must come first in the sequence. Only one type selector or universal selector is allowed in the sequence.

复合选择器是一系列不被组合子分隔的简单选择器，表示单个元素上的一组同时条件。
由于空白表示子代组合子，所以在复合选择器中的简单选择器之间不允许有空白。
如果它包含类型选择器或通用选择器，则该选择器必须位于序列的第一位。序列中只允许有一个类型选择器或通用选择器。

        .frist.one{
            font-family: 楷体;
            color: rgb(4, 57, 32);
        }

        a:link{
            color: rgb(176, 0, 0); text-decoration: none;
        }
        a:hover{
             color: green; 
            }
        a:active{
            color: darkslategrey;
        }
        a:visited{
            color: fuchsia;
        }

不仅可以设置多个指定字符存在的class中（但指定的字符中间不可有任何分隔符），也可指定某个元素因为用户行为而改变的样式。

浏览过之后：

激活后：

悬浮后改变：

注意:
伪类中 ：：link 要设置在 ：hover 之前，不然会使 ：hover 修改的样式失效。

二、sibling combinator (后代选择器(或称作子孙选择器))

            main { border: 1px solid blue; }
            /* 后代选择器(或称作子孙选择器) */
            main p { border: 1px solid green; }
            /* 亲子选择器 */
            main>p { background-color: #dfdfdf; }

            #first-paragraph {text-align: center; }

            /* 相邻的兄弟选择器 ( next-sibling combinator ) */
            #first-paragraph + * { border: 1px solid red; }
            /* 后面的兄弟选择器 ( subsequent-sibling combinator ) */
            #first-paragraph ~ * { margin: 10px; }