后代选择器过滤选择器

㈠ css选择器的1.4 后代选择器

后代选择器也称为包含选择器，用来选择特定元素或元素组的后代，将对父元素的选择放在前面，对子元素的选择放在后面，中间加一个空格分开。后代选择器中的元素不仅仅只能有两个，对于多层祖先后代关系，可以有多个空格加以分开，如id为a、b、c的三个元素，则后代选择器可以写成#a #b #c{}的形式，只要对祖先元素的选择在后代元素之前、中间以空格分开即可。
如：
<style>
.father.child{
color:#0000CC;
}
</style>
<p class=father>
黑色
<label class=child>蓝色
<b>也是蓝色</b>
</label>
</p>
这里我们定义了所有class属性为father的元素下面的class属性为child的颜色为蓝色。后代选择器是一种很有用的选择器，使用后代选择器可以更加精确的定位元素。

㈡ css后代选择器有哪些

后代选择器（descendant selector）又称为包含选择器。

后代选择器可以选择作为某元素后代的元素。

我们可以定义后代选择器来创建一些规则，使这些规则在某些文档结构中起作用，而在另外一些结构中不起作用。

举例来说，如果您希望只对 h1 元素中的 em 元素应用样式，可以这样写：

h1 em {color:red;}

㈢ HTML怎么选中多个兄弟标签

• 首先明确各类选择器的权值

  ID选择器：100，伪类和属性选择器：10，类型选择器和伪元素选择器：1，通用选择器（*）：0。

• 多个标签关联多用于：子代选择器，后代选择器，群组选择器，交集选择器，过滤选择器

• <div id="model">

  <div class="parent"> <div class="lists"> <div class="list"></div>

  <div class="list"></div>

  </div>

  <div class="sons"> <div class="list"></div>

  <div class="list"></div>

  </div>

  </div></div>

  可以将上诉代码看做，一个家族#model,有一个父亲.parent,有两个儿子，.lists和.sons,每家有两个儿子.list;

  子代选择器：就是指定查找哪个儿子，.parent>.lists或者.parent>.sons

  后代选择器：指查找他的孙子，儿子都可以

  .parent div 所有儿子,孙子

  .parent .list 所有孙子

  群组选择器，将多个标签用“，”连接起来，多用于同时设置多个标签的样式；

• <div id="model"> <ul class="lists"> <li></li> <li></li> <li></li> <li></li> </ul></div>

  交集选择器 ul.lists，

  过滤选择器#model>.lists>li:even 查询下标为基数的标签

㈣ jquery有几种选择器

jQuery选择器一般分为四种

一、基本选择器

基本选择器是jQuery中最常用也是最简单的选择器，它通过元素的id、class和标签名等来查找DOM元素。

1、ID选择器 #id

描述：根据给定的id匹配一个元素， 返回单个元素（注：在网页中，id名称不能重复）

示例：$("#test") 选取 id 为 test 的元素

2、类选择器 .class

描述：根据给定的类名匹配元素，返回元素集合

示例：$(".test") 选取所有class为test的元素

3、元素(标签)选择器 element

描述：根据给定的元素名匹配元素，返回元素集合

示例：$("p") 选取所有的<p>元素 $("div") :选取所有的div标签

4、*

描述：匹配所有元素，返回元素集合

示例：$("*") 选取所有的元素

5、selector1，selector2,...,selectorN（并集选择器）

描述：将每个选择器匹配到的元素合并后一起返回，返回合并后的元素集合

示例：$("p,span,p.myClass") 选取所有<p>,<span>和class为myClass的<p>标签的元素集合

二、层次选择器

层次选择器根据层次关系获取特定元素。

1、后代选择器

示例：$("p span") 选取<p>元素里的所有的<span>元素（注：后代选择器选择父元素所有指定选择的元素，不管是儿子级，还是孙子级）

2、子选择器 $("parent>child")

示例：$("p>span") 选择<p>元素下的所有<span>元素 （注：子选择器只选择直属于父元素的子元素）

3、同辈选择器 $("prev+next")

描述：选取紧接在prev元素后的next元素，返回元素集合

示例：$(".one+p") 选取class为one的下一个<p>同辈元素集合

4、同辈选择器 $("prev~siblings")

描述：选取prev元素后的所有siblings元素，返回元素集合

示例：$("#two~p")选取id为two的元素后所有<p>同辈元素集合

三、过滤选择器

1>基本过滤选择器

1、 :first

描述：选取第一个元素，返回单个元素

示例：$("p:first") 选取所有<p>元素中第一个<p>元素

2、 :last

描述：选取最后一个元素，返回单个元素

示例：$("p:last") 选取所有<p>元素中最后一个<p>元素

3、 :not(selector)

描述：去除所有与给定选择器匹配的元素，返回元素集合

示例：$("input:not(.myClass)") 选取class不是myClass的<input>元素

4、 :even

描述：选取索引是偶数的所有元素，索引从0开始，返回元素集合

5、 :odd

描述：选取索引是奇数的所有元素，索引从0开始，返回元素集合

6、 :eq(index)

描述：选取索引等于index的元素，索引从0开始，返回单个元素

7、 :gt(index)

描述：选取索引大于index的元素，索引从0开始，返回元素集合

8、 :lt(index)

描述：选取索引小于于index的元素，索引从0开始，返回元素集合

9、 :focus

描述：选取当前获取焦点的元素

2>内容过滤选择器

1、:contains(text)

描述：选取含有文本内容为text的元素，返回元素集合

示例：$("p:contains('我')") 选取含有文本“我”的元素

2、:empty

描述：选取不包含子元素或者文本元素的空元素，返回元素集合

示例：$("p:empty") 选取不包含子元素或者文本元素的空<p>元素（<p></p>）

3、:has(selector)

描述：选取含有选择器所匹配的元素的元素，返回元素集合

示例：$("p:has(p)") 选取含有<p>元素的<p>元素（<p><p/></p>）

4、:parent

描述：选取含有子元素或者文本的元素，返回元素集合

示例：$("p:parent") 选取含有子元素或者文本元素的<p>元素（<p><p/></p>或者<p>文本</p>）

3>可见性过滤选择器

1、:hidden

描述：选取所有不可见的元素，返回元素集合

2、:visible

描述：选取所有可见的元素，返回元素集合

4>属性过滤选择器（返回元素集合）

1、[attribute]

示例：$("p[id]") 选取拥有id属性的p元素

2、[attribute=value]

示例：$("input[name=text]") 选取拥有name属性等于text的input元素

3、[attribute!=value]

示例：$("input[name!=text]") 选取拥有name属性不等于text的input元素

4、[attribute^=value]

示例：$("input[name^=text]") 选取拥有name属性以text开始的input元素

5、[attribute$=value]

示例：$("input[name$=text]") 选取拥有name属性以text结束的input元素

6、[attribute*=value]

示例：$("input[name*=text]") 选取拥有name属性含有text的input元素

7、[attribute~=value]

示例：$("input[class~=text]") 选取拥有class属性以空格分割的值中含有text的input元素

8、[attribute1][attribute2][attributeN]

描述：合并多个属性过滤选择器

5>表单对象属性过滤选择器（返回元素集合）

1、:enabled

描述：选取所有可用元素

2、:disabled

描述：选取所有不可用元素

3、:checked

描述：选取所有被选中的元素（单选框，复选框）

示例：$("input:checked") 选取所有被选中的<input>元素

4、:selected

描述：选取所有被选中的选项元素（下拉列表）

示例：$("select option:selected") 选取所有被选中的选项元素

四、表单选择器（返回元素集合，使用相似）

1、:text

描述：选择所有的单行文本框

示例：$(":text")选取所有的单行文本框

2、:password

描述：选择所有的密码框

3、:button

描述：选择所有的按钮

4、:checkbox

描述：选择所有的多选框

㈤ css的选择器有哪些优先级

1、标记选择器（如：body,div,p,ul,li）

2、id选择器（如：id="name",id="name_txt"）

3、类选择器（如：id="name",id="name_txt"）

4、后代选择器（如：#head.navulli从父集到子孙集的选择器）

5、子元素选择器（如：div>p,带大于号>）

6、伪类选择器（如：就是链接样式,a元素的伪类，4种不同的状态：link、visited、active、hover。）

看完了基本的css选择器类型后，我们接着来看一下css优先级的概念。

当两个规则都作用到了同一个html元素上时，如果定义的属性有冲突，那么应该用谁的值的，用到谁的值谁的优先级就高。

我们来看一下css选择器优先级的算法：

每个规则对应一个初始"四位数"：0、0、0、0

若是行内选择符，则加1、0、0、0

若是ID选择符，则加0、1、0、0

若是类选择符/伪类选择符，则分别加0、0、1、0

若是元素选择符，则分别加0、0、0、1

算法：将每条规则中，选择符对应的数相加后得到的”四位数“，从左到右进行比较，大的优先级越高。

看完了上述内容，那我们就来看看css选择器优先级的具体排序。

css选择器优先级最高到最低顺序为：

1.id选择器（#myid）

2.类选择器（.myclassname）

3.标签选择器（div,h1,p）

4.子选择器（ul<li）

5.后代选择器（lia）

6.伪类选择（a:hover,li:nth-child）

最后，需要注意的是：

!important的优先级是最高的，但出现冲突时则需比较”四位数“;

优先级相同时，则采用就近原则，选择最后出现的样式;

继承得来的属性，其优先级最低。

㈥ 后代选择器与子选择器有什么不同

后代选择器包含子选择器。
后代选择器选择某元素的所有后代元素，不分层级，也就是说子级的子级等也会被选择。
子选择器缩小选择范围，只选择子级元素，对子级之后的层级不会被选择。

㈦ 详细说明css的常用选择器类型有哪些

• css常用的四种选择器类型有：

• 标签选择器：针对一类标签

• ID选择器：针对某一个特定的标签使用

• 类选择器：针对你想要的所有标签使用

• 后代选择器：用空格隔开

1、标签选择器：选择器的名字代表html页面上的标签

标签选择器，选择的是页面上所有这种类型的标签，所以经常描述“共性”，无法描述某一个元素的“个性”。

举例：

<style type="text/css">
p{
font-size:14px;
}

</style>
<body>
<p>css</p>
</body>





再比如说，想让“学完了安卓，继续学前端哟”这句话中的“前端”两个变为红色字体，那么可以用<span>标签把“前端”这两个字围起来，然后给<span>标签加一个标签选择器。

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
span{
color: red;
}
</style>
</head>
<body>
<p>学完了安卓，继续学<span>前端</span>哟</p>
</body>
</html>





【总结】需要注意的是：

（1）所有的标签，都可以是选择器。比如ul、li、label、dt、dl、input、div等。

（2）无论这个标签藏的多深，一定能够被选择上。

（3）选择的所有，而不是一个。

2、ID选择器：规定用#来定义（名字自定义）

针对某一个特定的标签来使用，只能使用一次。css中的ID选择器以”#”来定义。

举例：


<head>
<title>Document</title>
<style type="text/css">
#mytitle
{
border:3px dashed green;
}
</style>
</head>





然后在别处使用id来引用它：

<body>
<h2 id="mytitle">你好</h2>
</body>





id选择器的选择符是“#”。

任何的HTML标签都可以有id属性。表示这个标签的名字。这个标签的名字，可以任取，但是：

（1）只能有字母、数字、下划线。

（2）必须以字母开头。

（3）不能和标签同名。比如id不能叫做body、img、a。

（4）大小写严格区分，也就是说aa,和AA是两个不同的ID

另外，特别强调的是：HTML页面，不能出现相同的id，哪怕他们不是一个类型。比如页面上有一个id为pp的p，一个id为pp的div，是非法的！

一个标签可以被多个css选择器选择：

比如，可以同时让标签选择器和id选择器作用于同一个标签。（用到了层叠）如下：

㈧ 后代选择器使用

position只影响的是位置关系，在DOM树上的继承关系还是不变的。即使父层在左上层，子层在右下角，但他们还是父子关系，存在继承的！而你所谓的脱离也只是位置上的，而不是继承上的。
<DIV
id="b"><div
id="a"></div></div>不管你如何定义b和a，也不管位置如何，已经决定a继承b的关系已经确定了！

㈨ 后代选择器和子代选择器的区别

嗯，有区别呀，而且区别还是挺大的，嗯，建议你还是选择后者吧，后者比较好一些。

㈩ 在“新建css样式”对话框中可用的选择器有哪四种

最常用的四种选择器是：元素选择器、类选择器、ID选择器、派生选择器

1、元素选择器

最常见的css选择器当属元素选择器了，在HTML文档中该选择器通常是指某种HTML元素，例如：p,h2,span,a,div乃至html。

例如：

html {background-color: black;}

p {font-size: 30px; backgroud-color: gray;}

h2 {background-color: red;}

以上css代码会对整个文档添加黑色背景；将所有p元素字体大小设置为30像素同时添加灰色背景；对文档中所有h2元素添加红色背景。

通过上面的例子也可以看出css的基本规则结构：由选择器和声明块组成。每个声明块中包含一个或多个声明。每个声明的格式为：属性名 ： 属性值。如下图所示：

(1)后代选择器(descendant selector)

如上图，如果想要选择body元素的所有li子元素，方法如下：

body li { ...}

这里会选择所有的li后代，也就是图中的body下的所有li，不论他们之间相隔的代数有多少。同理，如果想要选择h1元素下的span，可以使用以下代码：

h1 span { ...}

如果我们要选择拥有warning类的元素的li后代，可以使用下面的方法：.warning li { ...}

当然，如果希望只选择拥有warning类的div元素的li后代，可以写作：div.warning li { ...}

由上面的例子不难看出，后代选择器的规则就是用空格连接2个或多个选择器。空格的含义为：…的后代。多个选择器的情况如下： ul li li { ...}

这样，就会选择所有ul下包含在li元素下的所有li元素了，听起来十分拗口，参考我们的DOM树，会选择到文档树种最后一排li元素。

(2)子元素选择器(child selector)

子元素选择器和后代选择器不同，它只能选择某元素的直接后代，不能跨代选取，用法如下：ul > li { ...}

两个子元素中间用一个大于号>连接。上面的代码会选择到所有ul元素的直接li子元素。对应到DOM树中，所有的li元素都会被选中，原因是图中所有的li元素都是ul的子元素。

但是，以下代码将不会选中任何元素：h1 > span { ...}

由于span是h1的”孙子元素”，h1没有直接的span子元素，因而上面的代码将不会选到任何结果。其他方面和后代元素类似，需要特别注意的就是子元素选择器不能隔代选取。

(3)相邻兄弟选择器(Adjacent sibling selector)

相邻兄弟选择器，故名思意将会选取某个元素的相邻兄弟元素，注意它选取的是相邻的兄弟元素而不是所有的兄弟元素，实际上选取的是紧跟在后面的兄弟元素。

相邻兄弟选择器在实践中有比较不错的应用，例如，你想在一个h2标题后面的段落应用某种独到的样式或者希望在某类p段落后的table上添加一个额外的边距等等。它的用法如下：

li + li { ...}

以上代码会选择所有作为li相邻元素的li元素，听起来又有点拗口，参考DOM树，它会选择除了排在第一个li元素的其余4个li元素，因为2个排在第1的li元素没有更靠前的兄弟元素来选择它。

再比如：h1 + p { ...} 会选择所有紧跟h1后面的p兄弟元素。h1.warning + p { ...} 会选择所有有用warning类的h1元素后面紧跟的p兄弟元素。

(4)几种派生选择器的结合使用

实际上，以上介绍的几种派生选择器可以结合使用，看下面的例子：

html > body li.warning + li { ...}

上面的选择器含义为：html元素的body子元素中，所有拥有warning类的li元素的相邻兄弟元素。