CSS——选择器
CSS所编写的内容在<style>闭合标签下进行操作，而CSS作用HTML主要有三种方式...
一、类
诸如使用class属性，则在<style>的属性标签下，用.号代替~=来表示class属性
<style>
.pastoral{
color:green;
/*作用于所有的class属性包含pastoral的元素*/
}
h1.pastoral{
color:green;
/*该选择器只给class属性中包含pastoral的h1元素使用下面的样式*/
}
</style>
<html>
<h1>Not green</h1>
<h1 class="pastoral">green</h1>
</html>
类选择器还可以匹配class属性值的子集，eg：
p.marine.pastoral {color: green}
如下将会选中class属性值中包含有marine和pastoral的P元素。也就是说上面这条规则将会匹配到class="pastoral blue aqua marine"的P元素，但是不会匹配到class="pastoral blue"的P元素。
二、类型选择器
一个类型选择器匹配一种元素类型，类型选择器匹配该文档树中的所有此类元素
作用于元素的选择器只需在<style>的闭合标签下直接使用元素名进行操作即可
三、id选择器
在html中，所有的元素都可以通过ID来唯一表示
ID选择器由"#"加元素的id属性值组成
而在在下面的代码中，选择器将只会匹配到ID属性值为"z98y"的H1元素，而不会匹配到P元素：
<HEAD>
<TITLE>Match H1 only</TITLE>
<STYLE type="text/css">
H1#z98y { letter-spacing: 0.5em }
</STYLE>
</HEAD>
<BODY>
<P id=z98y>Wide text</P>
</BODY>
在html中，ID选择器的优先级比属性选择器的优先级高，例如选择器#p123将比选择器[id=p123]的优先级高。
四、属性选择器
属性选择器共有四种：
-
[att] 匹配设置了att属性的元素，不管属性的值是什么
-
[att=val] 匹配att属性值等于"val"的元素
-
[att~=val] 匹配这样的元素，该元素的att属性的值是一个由空白字符分隔的多个值组成的列表，这些值中有一个为"val"。如果"val"包含空白字符 ，则该条规则不生效（因为属性值列表就是有空白字符分隔的）。如果"val"是一个空字符串，该条规则也不生效。
-
[att|=val] 匹配这样的元素，该元素的att属性要么就等于"val"，要么以"val"开头并且紧跟一个"-"(U+002D)。该规则主要用于匹配语言区域码。
属性值必须是标识符或者字符串。选择器中的属性名是否大小写敏感由文档语言决定。 例如，下面的选择器匹配设置了title属性的所有H1元素，不管title的值是什么：
h1[title] {color: blue}
如下的选择器将会匹配所有的class属性值为"example"的SPAN元素：
span[class=example] {color: bule}
多个属性选择器可以用于同一个元素的多个属性，甚至可以多次应用于同一个元素的同一个属性。 如下选择器匹配所有的hello属性值为"Cleveland"，并且goodbye属性值为"Columbus"的SPAN元素：
span[hello="Cleveland"][goodbye="Columbus"] {color: blue}
383
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
