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相同

具体的示例

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .list ,.list2 {
            list-style: none;
        }

        .list li,.list2 li {
            width: 125px;
            height: 125px;
            background-color: #dbdbdb;
            margin: 5px;
            float: left;
            text-align: center;
            line-height: 120px;
        }
        /*选择第一个子元素*/
        .list li:first-child {  background-color: #0097ff;  }
        /*选择最后一个元素*/
        .list li:last-child {  background-color: #8da6fa;  }
        /*选择某一个元素:第八个元素*/
        .list li:nth-child(7) {  background-color: #8208ca;  }
        /*选择倍数子元素:2n 2的倍数子元素*/
        .list li:nth-child(2n) { background-color: #41ca11}
        /*选择倒数第五个元素*/
        .list li:nth-last-child(5) { background-color: #befffc  }
        /*选择基数元素*/
        .list2 li:nth-child(odd) {  background-color: #f42f2a;  }
        /*选择偶数元素*/
        .list2 li:nth-child(even) {  background-color: #fffd06;  }
        /*父元素下特定类型的首个子元素*/
          .block h1:first-of-type {color: red}
        /*父元素下特定类型的最后一个子元素*/
        .block h1:last-of-type {color: #03bd4f }
        /*父元素下偶数子元素*/
        .block p:nth-of-type(2)  {color: orange}
        .block p:nth-last-of-type(2)  {color: #0811ff  }

    </style>
</head>
<body>
<ul class="list">
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
    <li>e</li>
    <li>f</li>
    <li>g</li>
    <li>h</li>
    <li>i</li>
</ul>

<hr>

<ul class="list2">
    <li>java</li>
    <li>web</li>
    <li>python</li>
    <li>linux</li>
    <li>c/c++</li>
</ul>
<div class="block">
    <h1>我和你的倾城时光</h1>
    <p>赵丽颖</p>
    <h2>金瀚</h2>
    <h1>我和你的倾城时光</h1>
    <p>赵丽颖</p>
    <h2>金瀚</h2>
</div>
</body>
</html>

 

二、::selection被选中元素

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

  • 作用:

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

  • 注意:

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

(2)::selection{}是控制全局选中效果

(3)::selection{}只对颜色进行控制,对字体、字体大小不会进行控制

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

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        span ::selection{background-color:red; color:white;}
    </style>
</head>
<body>
    <span>选我选我选我</span>
    <p>选我选我选我</p>
</body>
</html>

三、::before和::after

  • 二者区别

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

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

  • ::before与::after语法格式
div::before { content:“内容”; }    (也可以使用单冒号)

div::after { content:“内容”; }     (也可以使用单冒号)
  • 示例 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .text { font-size: 20px;}
        .text::before{content: "互联网公司"; font-size:30px;color: red;}
        .text::after{content: "web前端开发"; font-size:15px;color:orange;}
    </style>
</head>
<body>
<div class="text">招聘</div>
</body>
</html>

 

 

  • 7
    点赞
  • 25
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值