CSS3选择器

选择器

基本选择器

子元素选择器

如: section > div即直接后代选择器。与之前的section div不同，因为后者不只会选择子元素，还有孙子元素等。

兄弟元素选择器

如: section > div + article，即使用+号，这句表示选择了div的兄弟article。

通用兄弟选择器

选择某元素后面的所有兄弟元素，而且他们具有一个相同的父元素
section > div ~ article表示选中了所有div的兄弟。
注意：只选择某元素后面的。

群组选择器

群组选择器是将具有相同样式的元素分组在一起，每个选择器之间使用逗号”,”隔开。

        section > article, section > aside, section > div {
            color: #f00;
            margin-top: 10px;
            background-color: blue;
        }

实际上就是逗号并列。

属性选择器

对带有指定属性的HTML元素设置样式。
使用CSS3属性选择器，你可以指定元素的某个属性，或者你还可以同时指定原色的某个属性和其对应的属性值。

Element[attr]

比如:

     a[href] {
            text-decoration: none;
        }
        a[href='#'] {  /*属性值为#*/
            color: red;
        }
        a[class~='two'] {   /*属性的值包含two，并且单独为一个单词*/
            color: black;
        }
        a[href^='#'] { /*以#开头*/
            color: green;
        }
        a[href$='#'] {} /*以#结尾*/
            a[href|='#'] {
                    color: fuchsia;
                }  /*只有单独为#，或者以#-开头的元素*/

伪类选择器

主要有：动态伪类（锚点伪类、用户行为伪类），UI元素状态伪类、CSS3结构类、否定选择器、伪元素。

动态伪类

这些伪类并不存在HTML中，只有当用户和网站交互的时候才能体现出来。

锚点伪类：

:link, :visited

用户行为伪类：

:hover, :active, :focus

   input:focus {
            background-color: #00B7FF;;
        }

UI元素状态伪类

我们把:enabled, :disabled, :checked伪类元素称为UI元素的状态伪类。

 input:disabled {}

CSS3结构类

又称为:nth选择器。

选择方法:
:first-child, :last-child, :nth-child(), :nth-last-child(), :nth-of-type(), :nth-
last-of-type(), :first-of-type, :last-of-type, :only-child, :only-of-type

       li:nth-child(2n) { /*偶数*/
            color: red;
        }
               li:nth-child(odd) {
                    color: blue;
                }

:nth-of-type匹配父元素特定类型的第n个元素。

:empty找到没有子元素(包括文本节点)的每个元素。

:not否定选择器

nav > a:not(:last-of-type) {}

CSS权重

行内样式>ID选择器>类、属性选择器、伪类选择器>元素和伪元素>*
被继承的CSS权重也是0。

伪元素

    div::first-letter {
            color: red;
        }

::before

       div::before {
            content: '我在内容的前面';
        }

::before伪元素的特点:
1. 第一个子元素
2. 行级元素
3. 内容通过content呈现

::after特殊用途，清除浮动:

        header {
            background-color: #abcdef;
        }

        header > article {
            float: left;
            width: 40%;
            height: 30px;
            background-color: #f00;
        }

        header > aside {
            float: right;
            width: 40%;
            height: 50px;
            background-color: #ff0;
        }

        /*header > div {*/
            /*clear: both;*/
        /*}*/

        header::after {
            display: block;
            content: '';
            clear: both;
        }

<header>
    <article></article>
    <aside></aside>
    <div></div>
</header>

selection

用于设置浏览器选中文本后的背景色与前景色。

    div::selection {
            background-color: red;
            color: #ff0;
        }