选择器

参考W3C手册：http://www.w3school.com.cn/cssref/css_selectors.asp

 

css选择器分为简单选择器，伪元素选择器和组合选择器。

　　简单选择器又分为：标签选择器（元素选择器），类选择器，ID选择器，通配符选择器，属性选择器和伪类选择器。

 

css中权重最高的样式为：行内样式(除了 !important)，其次是ID选择器，权重处于第三的是类、伪类和属性选择器，权重较低的是标签选择器和伪元素选择器。

选择器：

// 简单选择器
*{...} // 通配符选择器，一般用来设置全局统一的样式
body html div ul ... // 标签选择器（元素选择器），会统一修改该层级以及该层级以下的所有相同的元素
.box //类名选择器
input[type="search"] // 属性选择器
.box:hover // 伪类选择器
#father // ID选择器

// 伪元素选择器
.box::after // 伪元素选择器 

// 组合选择器
#father>div // 选择父元素id是father 的所有div元素 （只选择一代）
#value,.text // 同时选择了id是value的元素 和 类名是text的元素  
.class1.class2 { color: blue; } // 没有空格，是选择到同时拥有.class1和.class2的节点 <span class="class1 class2"></span>
.father .class2 // 选择父元素father 下的所有叫class2的后代元素 （空格是后代选择器的标识符） 
span+p // 选中 span 元素后面紧挨着的第一个 p 兄弟元素
span~p // 选中 span 元素后面所有的 p 兄弟元素

...

伪类选择器：（选择器 后面接 一个 冒号 的是伪类）

　　伪类其实是弥补了CSS选择器的不足，用来更方便地获取信息。

　　dom:

<div id="father">
    <div class="box"></div>
    <p></p>
</div>

　　css:

.box:hover
.box:first-letter //向文本的第一个字母添加特殊样式 css1
.box:first-line //向文本的首行添加特殊样式 css1
.box:first-child //#father 下的第一个 class叫box的元素 css2
p:last-child //选择属于其父元素最后一个子元素每个 <p> 元素。 css3
p:only-child //选择属于其父元素的唯一子元素的每个 <p> 元素。 css3
p:first-of-type // 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。 css3
.box:nth-child(odd) // 等同于 nth-child(2n+1) 奇数行
.box:nth-child(even) // 等同于 nth-child(2n) 偶数行
.box:not(p):not(span) // 所有class = box 的元素，除了 <p></p> 和 <span></span> 元素之外，设置样式

...//更多请参考第一行的链接

伪元素选择器：（选择器 后面接 两个 冒号 的是伪元素选择器）

　　而伪元素本质上是创建了一个虚拟容器(元素)，我们可以在其中添加内容或样式。

ul::-webkit-scrollbar{...} //设置滚动条的样式
...

:before, :after 和其它伪元素添加

div:nth-of-type(2)::before{
    /*必须添加content属性，否则后期不可见*/
    content: ""; // 毕传属性，不然不能显示
    /*默认是行级元素，如果想设置宽高，就必须转换为块级元素*/
    position: absolute;
     20px;
    height: 20px;
    border-radius: 10px;
    left: -10px;
    top: -10px;
}

div:nth-of-type(2)::after{
    /*必须添加content属性，否则后期不可见*/
    content: "";
    /*默认是行级元素，如果想设置宽高，就必须转换为块级元素*/
    position: absolute;
     20px;
    height: 20px;
    border-radius: 10px;
    left: -10px;
    bottom: -10px;
}

/*获取第一个字符：实现首字下沉*/
p::first-letter{
    color: red;
    font-size: 30px;
    float: left;/*文本环绕*/
}

/*获取第一行内容:如果设置了::first-letter,那么无法同时设置它的样式*/
p::first-line{
    text-decoration: underline;
}

/*设置当前选中内容的样式*/
p::selection{
    color: red;
    /*它只能设置显示的样式，而不能设置内容大小*/
    /*font-size: 30px;*/
}

---

在CSS中总有一些你不用不知道，用到才知道的“坑”。比如今天要谈的，把 before, after 伪类用在 <img> 标签上。

嗯，实际上你用你会发现，在大多数浏览器这是无效的，dom中并不会出现你想要的结果。

为什么会这样呢？
让我们回归到 W3C 标准中寻觅一下，在标准中，before, after 伪类的定义如：

As their names indicate, the :before and :after pseudo-elements specify the location of content before and after an element's document tree content.
来自 https://www.w3.org/TR/CSS21/generate.html#before-after-content

我们应该注意到所谓 document tree content，对于 img 这种自闭和标签，似乎不存在 content （内容或后代元素）在标签中，所以选择器没有生效。但这样的解释还不够清晰，实际上标准中还有一行注释：

Note. This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.

嗯，这回清楚了，对于可替换元素（如 img、input、select 等），标准并没有清晰定义，这也导致了浏览器实现的差异性。