一、复合选择器
1)子选择器
- 父标签>子标签：将样式应用于该父标签下的第一级所有直接子标签
- 父标签>.class类名：将样式应用于该父标签下的第一级所有命名是该类名的子标签
- 父标签＃id>.class类名：将样式应用于该id的父标签下的第一级所有该class类名的直接子标签(父标签和id之间无空格)
2)包含选择器/后代选择器
- 父标签+空格+子标签: 将样式应用于该父标签包含的所有的该子标签，以及子标签包含的所有标签。同理，父标签可以用id或class代替，只要是在父标签中的，任何标签都可以作为子标签。可以包含很多层，但最好不要超过4层。
子选择器和父选择器区别：
<style>
div#box>span{
color:blue;
}
</style>
<body>
<h2>
<span>html</span>
<span>HTML树状图</span>
</h2>
<div id="box">
<span>
content:
<span>1</span>
</span>
<span>
<span>test</span>
</span>
<span>3</span>
<div>
<span>4</span>
</div>
</div>
</body>
<!--子选择器：数字4不会加载样式，其他会加载样式;包含选择器：所有的span都会加载样式-->
<!--即包含选择器是只要该规则下的子标签被包住，不管几层都会被作用于该样式；子选择器只有第一层。也就是一个是所有后代，一个是第一代后代-->
3)相邻选择器
- A标签+A标签相邻的标签(下一个标签，不是上一个)：将样式应用于Ａ标签的相邻标签，Ａ标签本身不会应用该样式。下面代码中，如果讲兄弟选择器更换为相邻选择器，则只有<div>HTML树状图</div>，会应用样式。
4)兄弟选择器
Ａ标签~B标签：指定Ａ元素后面的同级Ｂ标签，以及Ｂ标签包含的所有标签应用该样式。如下面代码，与h2同级的所有div均会应用该样式
<style>
h2~div{
font-size:16px;color: red
}
</style>
</head>
<body>
<h2>HTML结构</h2>
<div>HTML树状图</div>
<span>
HTML知识
<div>oo</div>
</span>
<div class="class1">问君能有几多愁</div>
<div>问君能有几多愁</div>
</body>
5)关于选择器嵌套
一层层的找，样式作用于最里面一层的标签,如：
#wrap #header h2 span{font-size: 24px; color: #55a532}，样式作用于最里面一层的span
6)Jquery属性选择器
- 基础样式
div[attr]：匹配带有一个名为attr的属性的元素——方括号里的值。attr可以是style/class/id/其他各种属性的名字。注意，style设置的样式名不能作为attr。
- 通过属性值来引用
通过属性值选择：div[attr＝"value"]，匹配带有一个名为attr的属性的元素，其值为value——引号中的字符串。
- 按是否包含该属性值匹配
p[attr~="value1"]，匹配带有一个名为attr的属性的元素 ，其值正为value1，或者匹配带有一个attr属性的元素，其值有一个或者更多，至少有一个和value1匹配。注意，比如class="a b",[class="a"]是可以找到的，但class="ab"，[class="a"]就找不到。
4.按是否以该属性值开头
div[attr|="value"]，匹配带有一个名为attr的属性的元素，其值可正为value，或者开始为value，后面紧随着一个连字符。比如：div[lang|="zh"]。注意，比如class="ab",[class|="a"]是可以找到的，但class="a b",[class|="a"]就找不到。
7)字符串匹配选择器
- 通过判断属性值是否包含该文本
<style>
div[class*="test"] {
background: #ffff00;
}
</style>
<body>
<div class="Nowteston">第三个 div 元素。</div>
</body>
<!--只要属性值包含test字段，则该样式被应用，无论value之间是否空格-->
2.通过判断属性值是否以该文本结尾
<style>
div[class$="test"]
{
background:#ffff00;
}
</style>
<body>
<div class="first_test">The first div element.</div>
<div class="test">This is some text in a paragraph.</div>
</body>
<!--只要属性值以test字段结尾，则该样式被应用，无论value之间是否空格-->
3.通过判断属性值是否以该文本开头
<style>
div[class^="test"] {
background: #ffff00;
}<!--只要属性值以test字段开头，则该样式被应用，无论value之间是否空格-->
<!--注意："-"用在两个单词间可以作为连字符，将二者合为一个单词-->
</style>
总结：
CSS选择器和CSS3在很多地方语言结构相似，CSS让项目更稳定，CSS3则支持更多渲染
网友评论