首页 > 代码库 > css 选择器
css 选择器
css选择有十种方式:元素选择器、类选择器、ID选择器、选择器分组、属性选择器、子元素选择器、后代选择器、相邻兄弟元素选择器、伪元素、伪类。
- 元素选择器。文档的元素就是最基本的选择器。如:html {color:black;}、note{font-family:Verdana, Arial;}(xml)。
- 选择器分组。结合选择器和声明的分组:h1, h2, h3, h4, h5, h6 {color:gray;background: white;padding: 10px; border: 1px solid black;font-family: Verdana;};通配符选择器:* {color:red;}
- 类选择器。允许以一种独立于文档元素的方式来指定样式。如:修改html代码:<h1 class="important">; 语法:.important {color:red;};结合元素选择器:h1.important {color:blue;}; css多类选择器:.important.warning {background:silver;},通过把两个类选择器链接在一起,仅可以选择同时包含这些类名的元素(类名的顺序不限)。
- ID选择器。允许以一种独立于文档元素的方式来指定样式。如:<p id="intro"> #intro {font-weight:bold;}。只能在文档中出现一次,不能使用ID词列表,ID能包含更多含义。
- 属性选择器。可以根据元素的属性及属性值来选择元素。
简单属性选择:选择有某个属性的元素,而不论属性值是什么。如:*[title] {color:red;} ; a[href] {color:red;} ;a[href][title] {color:red;}(同时有 href 和 title 属性);
根据具体属性值选择:可以进一步缩小选择范围,只选择有特定属性值的元素。如:a[href="http://www.baidu.com"] {color: red;};
a[href="http://www.baidu.com"][title="W3School"] {color: red;}(同时具备)
属性与属性值必须完全匹配:这种格式要求必须与属性值完全匹配。如果属性值包含用空格分隔的值列表,匹配就可能出问题。p[class="important warning"] {color: red;}
根据部分属性值选择:如果需要根据属性值中的词列表的某个词进行选择,则需要使用波浪号(~)。如:p[class~="important"] {color: red;}。(部分值属性选择器与点号类名记法的区别在于,可以使用一个基于 title 文档的部分属性选择器,只选择这些图片,img[title~="Figure"] {border: 1px solid gray;})
<img title="Figure 1" src="http://www.mamicode.com/i/figure-1.gif" />
<img title="Figure 2" src="http://www.mamicode.com/i/figure-2.gif" />子串匹配属性选择器:
类型 描述 [abc^="def"] 选择 abc 属性值以 "def" 开头的所有元素 [abc$="def"] 选择 abc 属性值以 "def" 结尾的所有元素 [abc*="def"] 选择 abc 属性值中包含子串 "def" 的所有元素 特定属性选择类型:会选择 lang 属性等于 en 或以 en- 开头的所有元素。如:*[lang|="en"] {color: red;};
<p lang="en">Hello!</p> <p lang="en-us">Greetings!</p> <p lang="en-au">G‘day!</p> <p lang="fr">Bonjour!</p> <p lang="cy-en">Jrooana!</p>
总结:
选择器 描述 [attribute] 用于选取带有指定属性的元素。 [attribute=value] 用于选取带有指定属性和值的元素。 [attribute~=value] 用于选取属性值中包含指定词汇的元素。 [attribute|=value] 用于选取带有以指定值开头的属性值的元素,该值必须是整个单词。 [attribute^=value] 匹配属性值以指定值开头的每个元素。 [attribute$=value] 匹配属性值以指定值结尾的每个元素。 [attribute*=value] 匹配属性值中包含指定值的每个元素。
- 后代选择器。
- 子元素选择器。
- 相邻兄弟元素选择器。
- 伪元素。
- 伪类。
css 选择器