CSS3---子元素选择器

最新推荐文章于 2024-06-13 22:49:40 发布

We_jia

最新推荐文章于 2024-06-13 22:49:40 发布

阅读量9.1k

点赞数 7

分类专栏： HTML+CSS 文章标签：常见子元素选择器 selection before after

本文链接：https://blog.csdn.net/We_jia/article/details/84862114

版权

HTML+CSS 专栏收录该内容

17 篇文章 2 订阅

订阅专栏

子元素选择器的作用

在之前的选择器中当我们遇到一个元素下有多个子元素时（针对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>

We_jia

关注

7
点赞
踩
25

收藏

觉得还不错? 一键收藏
2
评论
CSS3---子元素选择器

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

扫一扫