<html>
<body>
<style type="text/css">
p.first {color:blue}
p.second {color:green}
</style>
<p class="first">Hello World</p>
<p class="second">Hello World</p>
<style type="text/css">
p.first {color:green}
p.second {color:blue}
</style>
<p class="first">Hello World</p>
<p class="second">Hello World</p>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
浏览器应该如何呈现不连续的css?是否应该使用页面上的所有css样式生成一些数据结构并使用它进行渲染?
或者它按照它看到的顺序使用样式信息进行渲染?
我想创建一个新样式,而不仅仅是改变元素的style属性.以下是一些示例代码来演示此问题:
//Create 1st element
var element1 = $('<div />').text('element1').addClass('blue');
$('body').append(element1);
//Set some css for all elements with the blue class
$('.blue').css('background-color', 'blue');
//Create 2nd element, it won't have the css applied because it wasn't around when the css was set
var element2 = $('<div />').text('element2').addClass('blue');
$('body').append(element2);?
Run Code Online (Sandbox Code Playgroud)
在上面的代码中,第二个元素与第一个元素的风格不同.我想要的是能够为所有未来的元素在className上设置css.
我有一个像这样的CSS规则:
#imgwrapper {display: block;position: relative;width:auto;height:auto;}
Run Code Online (Sandbox Code Playgroud)
所以我得到了一个超链接,当它被点击时,它应该向#imgwrapper添加一个css规则,如下所示:
#imgtarget, #imgwrapper img {cursor:crosshair;}
Run Code Online (Sandbox Code Playgroud)
我该怎么办?
我试过jquery .css()api,但它没有工作..