CSS3---子元素选择器

子元素选择器的作用

在之前的选择器中当我们遇到一个元素下有多个子元素时（针对list列表元素），我们在进行css控制时都是在每个子元素定义class，通过class来控制对应的子元素，这样做会很麻烦，子元素选择器也可以不用定义class也能控制子元素的作用。

一、常见的子元素选择器

：first-child                     父元素的首个子元素

：last-child                      父元素的最后一个子元素

：nth-child(n)                    父元素的某个子元素，数是从1开始的

：nth-last-child(n)               父元素的倒数某个子元素

nth-child（n）扩展：

(1) 控制基数子元素--：nth-child（odd）

(2) 控制偶数子元素--：nth-child（even）

(3) 控制几倍子元素--：nth-child（数字n），数字n表示数字的倍数子元素，还可以进行数字n+1/数字n-1进行运算获取到子元素

 

在一个div下有多个标签类型的布局中，使用以下子元素选择器可以准确定位到某种类型的标签下的某个指定元素

：first-of-type                 父元素下特定类型的首个子元素

：last-of-type                  父元素下特定类型的最后一个子元素
    
：nth-of-type(n)                父元素下特定类型的某个子元素
    
：nth-last-of-type(n)           父元素下特定类型的倒数某个子元素

：nth-of-type（n）与：nth-last-of-type（n）也可以控制偶数、基数子元素，倍数子元素，写法与之前的nth-child相同

具体的示例

    
    
    



    
a
    
b
    
c
    
d
    
e
    
f
    
g
    
h
    
i





    
java
    
web
    
python
    
linux
    
c/c++


    
我和你的倾城时光
    
赵丽颖
    
金瀚
    
我和你的倾城时光
    
赵丽颖
    
金瀚

 

二、::selection被选中元素

::selection是被选中的元素，可以进行控制被选中的元素效果

• 作用：

浏览器默认情况下，用鼠标选择网页文本是以“深蓝的背景，白色的字体”显示的，使用::selection选择器可以轻松改变浏览器默认的效果,用户选择时字体颜色以及字体背景将会更改

• 注意：

（1）标签::selection{}是针对某一个标签进行选中元素控制

（2）::selection{}是控制全局选中效果

（3）::selection{}只对颜色进行控制，对字体、字体大小不会进行控制

（4）一般情况下需要写成::selection{}，如果需要兼容低版本的ie浏览器时，可以写成 : selection{}

    
    
    


    选我选我选我
    
选我选我选我

三、::before和::after

• 二者区别

::before在元素之前插入新内容

::after在元素之后插入新内容

• ::before与::after语法格式

div::before { content:“内容”; }    （也可以使用单冒号）

div::after { content:“内容”; }     （也可以使用单冒号）

• 示例 

    
    
    


招聘