zoukankan      html  css  js  c++  java
  • CSS3中结构伪类选择器——root、not、empty、target选择器

    1.root选择器

    将样式绑定到页面的根元素中。根元素是指位于文档树中最顶层结构的元素,在HTML页面中就是指包含整个页面的<html>部分。

    <style type="text/css">

    :root{

    background:yellow;

    }

    body{

    background:green;

    }

    </style>

    注意:不使用root选择器来指定root元素的背景色,只指定body元素的背景色,则整个页面就全部变成了绿色。

    2.not选择器

    如果想对某个结构元素使用样式,但是想排除这个结构元素下面的子结构元素,让它不使用这个样式时,可以使用not选择器。

    body*:not(h1){

        background:yellow;

    }

    3.empty选择器

    适用empty选择器来指定当元素中内容为空白时使用的样式。

    :empty{

        background:yellow;

    }

    4.target选择器

    使用target选择器来对页面中某个target元素(该元素的id被当做页面的超链接来使用)指定样式,该样式只在用户点击了页面的超链接,并且跳转到target元素后起作用。

    <style type="text/css">

    :target{

        background:yellow;

    }

    </style>

    <a href="#text1">文字1</a>

    <div id="text1">

    <h1>文字1</h1>

    <p>此处省略100个字</p>

    </div>

  • 相关阅读:
    第七周作业——用户体验
    第六周作业——Coder和Hacker的区别
    第五周作业——对lua的学习
    产品开发与竞争
    个人项目
    对代码规范的体悟
    第二周作业——浅谈产品同质化应对方法
    第一周作业
    第二次作业
    第一次作业
  • 原文地址:https://www.cnblogs.com/wyaocn/p/5836531.html
Copyright © 2011-2022 走看看