css兄弟样式,css 兄弟元素

关于jquery操作兄弟节点CSS的简单问题

style

    .red{

        background-color: red;

    }

/style

div id="demo"

a href="javascript:void(0)"萝卜/a

a href="javascript:void(0)"青椒/a

a href="javascript:void(0)"白菜/a

a href="javascript:void(0)"土豆/a

/div

$(function(){

    //绑定单击事件

    //将事件绑定在DIV上,是利用事件的冒泡原理, 这样使用,

    //使代码结构看起来更整洁,更容易搜索到单击事件发生的位置

    //推荐在开发插件,或者其它比较复杂的功能时候,将事件绑定到父级容器

    //这样即使此例中的A标签是后来通过 JAVASCRIPT脚本添加进来的,

    //同样能够正确地处理

    $('#demo').click(function(event){

        var $target = $(event.target);

        //判断如果点击的A标签,则执行以下代码

        if(/^a$/i.test(event.target.tagName)){

            $target.addClass('red')

                .siblings('a').removeClass('red');

            alert('你点击了我:'+$target.text());

        }

    });

});

相关问答

Q1: jquery如何利用css选择器去除兄弟样式

$('.class').removeClass(.class) 第一个class为选择器class 第二个为需要移除的class

Q2: CSS父元素的子元素样式控制另一子元素怎么实现？

你说讲的这应该是同级兄弟元素之间的CSS控制。

话说有一种选择器就叫兄弟元素选择器，分为临近兄弟和普通兄弟。

临近兄弟：用 ＋ 表示，只匹配该元素后边的第一个同级元素。

普通兄弟：用 ～ 表示，匹配该元素后边的所有同级元素。

给个例子：

style

div#aa { }

div#aa p { font-size: 14px; color: #000; }

div#aa p.on { color: #f00; }

div#aa p.on ~ span { color: #00f; }

div#aa p.on + span { color: #0f0; font-weight: bold; }

/style

div id="aa"

p class="on"sdf/p

spansdf/span

spansdf/span

/div

当把p的class设为on的时候，span的样式也跟着改变。

不知道这么说清楚没有。

另外这种方式IE6是不支持的。慎用吧。

Q3: 二、CSS之——选择器

作用：通过元素选择器可以选择页面中的所有指定元素

语法：标签名{}

作用：通过元素的class属性值选中一组元素

语法：.class属性值{}

id选择器

作用：通过元素的id属性值选中唯一的一个元素

语法：#id属性值{}

复合选择器（交集选择器）

作用：可以选中同时满足多个选择器的元素

语法：选择器1选择器2选择器N{}

选择器分组（并集选择器）

作用：通过选择器分组可以同时选中多个选择器对应的元素

语法：选择器1,选择器2,选择器N{}

通配选择器

作用：可以用来选中页面中的所有的元素

语法：*{}

元素之间的关系：

父元素：直接包含子元素的元素

子元素：直接被父元素包含的元素

祖先元素：直接或间接包含后代元素的元素，父元素也是祖先元素

后代元素：直接或间接被祖先元素包含的元素，子元素也是后代元素

兄弟元素：拥有相同父元素的元素叫做兄弟元素

作用：选中指定元素的指定后代元素

语法：祖先元素 后代元素{}

有时候，你需要选择本身没有标签，但是 仍然易于识别的网页部位，比如段落首行 或鼠标滑过的连接。CSS为他们提供一些选 择器：伪类和伪元素。

给链接定义样式：

有四个伪类可以让你根据访问者与该链接的交互方式，将链接设置成4中不同的方式。

其他：

否定伪类

否定伪类可以帮助我们选择不是其他东西的某种东西。

语法： :not(选择器){}

比如p:not(.hello)标识选择所有的p元素，但是class为hello的除外。

属性选择器可以挑选带有特殊属性的标签。

语法：

[属性名]

[属性名 = "属性值"]

[属性名 ~= "属性值"]

[属性名 ^= "属性值"]

[属性名 |= "属性值"]

[属性名 $= "属性值"]

[属性名 *= "属性值"]

作用：选中指定父元素的指定子元素

语法：父元素 子元素

比如body h1将选择body字标签中的所有h1标签

IE6及以下的浏览器不支持子元素选择器

其他子元素选择器

除了根据祖先父子关系，还可以根据兄弟关系查找元素。

语法：

兄弟元素 + 兄弟元素 ：查找后边一个兄弟元素

兄弟元素 ~ 兄弟元素：查找后边所有的兄弟元素

在页面中使用CSS选择器选中元素时，经常都是一个元素同时被多个选择器选中。

比如：

这两个选择器都会选择h1元素，如果两个选择器设置的样式不一样那还好不会产生冲突，但是如果两个选择器设置的是同一个样式，这样h1到底要应用哪个样式呢？CSS中会默认使用权重较大的样式，下面看一下权重又是如何计算的。

不同的选择器有不同的权重值：