伪类常见用法及动态更改内容、样式的方法

  伪类after等常用来清除浮动、增加附加内容,利用伪类常会减少div容器的使用,使得我们的页面内容结构清晰。

  本文将会简介伪类的常见用法,并以jquery为例详述如何动态更改伪类内容(content)伪类样式

    一、常见用法

  1.1 清除浮动

  

 <div class="my-container">
        <div>内容1</div>
        <div class="sec" data-attr=‘前之啊是‘>内容2</div>
        <div>内容3</div>
    </div>

  

.my-container:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
        content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;
    }

.my-container>div {/*使得div容器在一行*/
width: 30%;
margin-left:5px;
background-color: pink;
color: #fff;
float: left;
}

  1.2 增加附加内容

.my-container>div:after {/*为元素增加后缀*/
        content: "后缀";
        color: yellow;
    }

  二、动态改样式

        /* 1. 新增样式表法*/
        $(‘<style>.sec::before{color:green}</style>‘).appendTo(‘body‘);

        /* 2. 更改class法*/
        $(".sec").removeClass(‘sec‘).addClass(‘sec_new‘);

  上述方法Ⅰ是新增样式表,该法支持动态新写入的样式,而后者则较适用已知样式只需更改类即可;

  

  三、动态改内容

  内容content支持直接写入css字符串,也可在css content中写入变量attr中,将值传入html便签中。

css样式:

    .my-container>div:after {
        content: "后缀";
        color: yellow;
    }

    .sec:before {
        content: attr(data-attr);
        height: 24px;
        color: brown;
    }

 HTML: 

<div class="my-container">
        <div>内容1</div>
        <div class="sec" data-attr=‘前之啊是‘>内容2</div>
        <div>内容3</div>
    </div>

  

 动态修改:

$(".sec_new").attr("data-attr",‘修改后前缀‘);

 效果:

原文地址:https://www.cnblogs.com/giserjobs/p/11980013.html

时间: 2024-10-29 00:13:28

伪类常见用法及动态更改内容、样式的方法的相关文章

伪类的用法以及css一些常用的标签

伪类的用法: :link 表示该超链接文字尚未被点选 :visited 表示该超链接文字已被点选过 :active 表示该超链接文字正被点选,但未被放开 :hover 表示当鼠标停留在文字上 css的一些常用属性标签: background:背景颜色 padding(内边框):padding-top(上边距) padding-left(左边距) text-align left 文字靠左right 文字靠右center 文字靠中 background-size:cover 背景填充 原文地址:ht

关于css中after和before伪类的用法

::before和::after伪元素的用法 一.介绍 css3为了区分伪类和伪元素,伪元素采用双冒号写法. 常见伪类——:hover,:link,:active,:target,:not(),:focus. 常见伪元素——::first-letter,::first-line,::before,::after,::selection. ::before和::after下特有的content,用于在css渲染中向元素逻辑上的头部或尾部添加内容. 这些添加不会出现在DOM中,不会改变文档内容,不可

JQuery选择器学习整理(基本选择器,层级选择器,伪类选择器,属性过滤,内容过滤,可见性过滤,范围选择器,排除选择器)

总的来说,选择器引擎规则就是: $('查询字符串'). 最常用最基本的就是:1.标签选择器(以文档元素作为选择符):$("div"): 2.id选择器(以ID作为选择符): $("#demo1"): 3.类选择器(以class作为选择符): $(".selected"): 4.群组选择器: $(".class1, .class2, .class3"): 5.后代选择器: $("p span") 多种规则的组

css伪类大全用法详解

CSS伪类及伪元素选择器,如超链接的a:link.a:visited.a:hover等等, 一.超链接 a:link{ color:red;} a:visited{ color:blue;} a:hover{ color:black;} a:active{ color:#6600CC;} 注意:设置的顺序不能变,遵循爱恨(love/hate)原则. ——此原则自己在网上看别人说的,便于记忆就写在这了 二.更多伪类 :root   ------------------------------ 文档

C++的string类常见用法

C++的string常见用法,在网上看到一篇,但是不能在c++11编译器下运行,我修改了下,还没改完: #include<iostream> #include<string> using namespace std; int main() { string str1 = "hello"; string* str2 = new string("hello"); string str3 = "world"; //获取字符串长度

CSS3特殊伪类::selection改变页面选中文字的样式

一般在网页上面,选中文字的时候,文字的样式是会改变的,当然,样式也都是千篇一律的浏览器的默认样式,蓝底白字,偶然看到有些网页上面当文字选中的时候会有不一样的样式,当时就很是好奇,后来才慢慢发现是css的一个伪类::selection ::selection是一个CSS3选择器(这也告诉这我们CSS3必须要去熟悉,这玩意确实可以弄出很多意想不到的好效果.) 兼容性:IE9+,Chrome,Opera,Safari,Firefox…(也可以去查看)caniuse.com#search=::selec

巧用CSS3伪类选择器自定义checkbox和radio的样式

由于原生的checkbox和radio的样式太简陋了,在设计页面的时候,设计师往往会设计自己的checkbox和radio样式.一半情况下,为了适应各个浏览器的兼容性,我们都会用其他的元素替代原生的checkbox和radio,然后用js实现选中和未选中时候的样式,用来模拟checkbox和radio. 例如这种: 用其他元素模拟(以checkbox为例): <div class='checkbox'></div> $('.checkbox').click(function(){

【javascript/css】关于鼠标事件onmousexxx和css伪类hover

在运用鼠标移入移出事件时,一般有两种做法,一种是DOM事件的"onmouseover"和"onmouseout",还有一种是css的伪类":hover". 在实际运用中如何选择,取决于清楚明白的了解他们之间的区别. HTML DOM 允许 JavaScript 对 HTML 事件作出反应. 在我们为元素绑定了一个事件,当事件发生的时候,可以执行一段javascript代码. 关于鼠标事件,总共有: onmouseover和onmouseout 鼠

CSS3伪类和伪元素的特性和区别

本文转自:http://www.cnblogs.com/ihardcoder/p/5294927.html 今天复习css时发现::的css选择器,查了一下,知道有伪元素和伪类这件事,他们的区别是什么呢?很幸运已经有人总结好了! CSS3伪类和伪元素的特性和区别 前端er们大都或多或少地接触过CSS伪类和伪元素,比如最常见的:focus,:hover以及<a>标签的:link.visited等,伪元素较常见的比如:before.:after等. 其实上面提到的这些伪类和伪元素都是CSS1和CS