[CSS3] CSS :target Selector

The :target selector allows us to interact with a fragment identifier, or hash, in our URL from CSS.

HTML:

<body>
    <a href="#tab1">Tab 1</a><a href="#tab2">Tab 2</a><a href="#tab3">Tab 3</a>
    <div id="tab1" class="tab">
        <h1>Tab 1 Content</h1>
    </div>
    <div id="tab2" class="tab">
        <h1>Tab 2 Content</h1>
    </div>
    <div id="tab3" class="tab">
        <h1>Tab 3 Content</h1>
    </div>
</body>

CSS:

    <style>
        .tab{
            display: none;
        }
        .tab:target {
            display: block;
        }
    </style>
时间: 2024-10-24 04:54:26

[CSS3] CSS :target Selector的相关文章

css3基础 :target 目标伪类选择器 简单示例

礼悟:    公恒学思合行悟,尊师重道存感恩.叶见寻根三返一,江河湖海同一体.          虚怀若谷良心主,愿行无悔给最苦.读书锻炼养身心,诚劝且行且珍惜.              ide:visual studio 2017             browser:Chrome                     os:win7 学习链接: http://blog.csdn.net/atleks/article/details/38966691 代码 <!DOCTYPE html>

[CSS] Target empty elements using the :empty pseudo-class

You can target an element that has no child elements by using the :empty pseudo-class. With browser support down to IE9, it's solid, easy way to select empty elements without any additional markup. Be aware that whitespace is considered a "child"

0基础学习前段历程2 第一门需要掌握的前端技术HTML5+CSS3 CSS基础知识,常用样式详细解读

#### CSS属性值background背景 -   背景颜色 - background-image:url(  );背景图片 - background-repeat:no-repeat; 设置背景图片是否平铺 - repeat:平铺,默认值 - no-repeat 不平铺 - background-size:100px 60px;设置图片的大小,值X/Y,可用单位百分比像素 - background-position:100px 60px;设置图片的位置,值X/Y,可用单位百分比像素,英文单

[CSS3] CSS Display Property: Block, Inline-Block, and Inline

Understanding the most common CSS display types of block, inline-block, and inline will allow you to get the most out of your HTML and use CSS Frameworks like Bootstrap to their fullest. Takeway: Inline: Can NOT add height and width. But can add marg

css :target

花了半小时在找如果完成:target的问题 需求:点击<a href="#Main">Main</a>时,会触发:target 效果 结果在网络上没有找到,因为不知道要找什么关键字,最后我还是记起来了... <a href="#Main" id="Main">Main</a> <style> a:target { font-size:200%;} </style> 就这么简单

[CSS] Target Positional Elements Using *-Of-Type CSS pseudo-classes

Learn how to target elements based on their position inside of a parent element in relation to its siblings.

CSS3+CSS+HTML实现网页

效果图: 代码实现: 样式部分style.css: *{ margin: 0; padding: 0; } body{ background-color: #673929; font-size: 16px; font-family: "微软雅黑" } #conters{ margin: 0 auto; width: 900px; } #header{ height: 220px; margin-bottom: 5px; position: relative; } #icon-list{

CSS3——CSS 文本

text-indent:定义文本第一行缩进. 一般来说,可以为所有块级元素应用 text-indent,但无法将该属性应用于行内元素,图像之类的替换元素上也无法应用 text-indent 属性. text-indent 属性可以继承 text-align:对齐元素中的文本. 所有 text-align 的默认值是 left word-spacing:设置字间距. 如果提供一个正长度值,那么字之间的间隔就会增加.为 word-spacing 设置一个负值,会把它拉近 letter-spacing

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选择器 如果想