CSS 规则
-
类型选择器（type selector） 或 元素选择器
- 文档的元素就是最基本的选择器;元素选择器又称为类型选择器（type selector）
html {color: black;} h1 {color: blue;} h2 {color: silver;} - 选择器分组
假设希望 h2 元素和 p元素都有灰色。为达到这个目的，最容易的做法是使用以下声明(选择器分组)：h2, p {color:gray;} - 通配符选择器
通配选择器（universal selector），显示为一个星号（*）。该选择器可以与任何元素匹配，就像是一个通配符* {color:red;} - 声明分组
可以对选择器进行分组，也可以对声明部分进行分组;对声明分组，一定要在各个声明的最后使用分号:h1 {font: 28px Verdana; color: white; background: black;}
- 文档的元素就是最基本的选择器;元素选择器又称为类型选择器（type selector）
-
类选择器
- 类选择器
在使用类选择器之前，需要修改具体的文档标记,为了将类选择器的样式与元素关联，必须将 class 指定为一个适当的值:后我们使用类名前有一个点号（.），然后结合通配选择器使用：<h1 class="important"> This heading is very important. </h1> <p class="important"> This paragraph is very important. </p> //css 通配符选择器： *.important {color:red;} //选择所有类名相同的元素，可以在类选择器中忽略通配选择器: .important {color:red;} //结合元素选择器 p.important {color:red;} - 多类选择器
在 HTML 中，一个 class 值中可能包含一个词列表，各个词之间用空格分隔;通过把两个类选择器链接在一起，仅可以选择同时包含这些类名的元素（类名的顺序不限）<p class="important warning"> This paragraph is a very important warning. </p> //css 多类选择器 .important {font-weight:bold;} .warning {font-style:italic;} .important.warning {background:silver;}
- 类选择器
-
ID 选择器
ID 选择器允许以一种独立于文档元素的方式来指定样式- ID 选择器前面有一个 # 号 - 也称为棋盘号或井号:
*#intro {font-weight:bold;} - ID 选择器中可以忽略通配选择器
#intro {font-weight:bold;} - ID 选择器引用 id 属性中的值
<html> <head> <style type="text/css"> #intro {font-weight:bold;} </style> </head> <body> <p id="intro">This is a paragraph of introduction.</p> <p>This is a paragraph.</p> </body> </html> - 类选择器和 ID 选择器可能是区分大小写的
- ID 选择器前面有一个 # 号 - 也称为棋盘号或井号:
-
ID 属性选择器
- 如果希望选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器。
//把包含标题（title）的所有元素变为红色 *[title] {color:red;} //根据多个属性进行选择，只需将属性选择器链接在一起即可 a[href][title] {color:red;} ``` - 根据具体属性值选择
除了选择拥有某些属性的元素，还可以进一步缩小选择范围，只选择有特定属性值的元素:a[href="http://www.w3school.com.cn/"][title="W3School"] {color: red;} - 根据部分属性值选择
如果需要根据属性值中的词列表的某个词进行选择，则需要使用波浪号（~）p[class~="important"] {color: red;} - 子串匹配属性选择器
类型 描述 [abc^="def"] 选择 abc 属性值以 "def" 开头的所有元素 [abc$="def"] 选择 abc 属性值以 "def" 结尾的所有元素 [abc*="def"] 选择 abc 属性值中包含子串 "def" 的所有元素 - 特定属性选择类型
*[lang|="en"] {color: red;} // **这个规则会选择 lang 属性等于 en 或以 en- 开头的所有元素** img[src|="figure"] {border: 1px solid gray;} //这个规则会选择 src属性等于 figuren 或以 figure- 开头的所有元素； //如：figure-1.jpg 和 figure-2.jpg figure-x.jpg - 选择器参考手册
选择器 描述 [attribute] 用于选取带有指定属性的元素。 [attribute=value] 用于选取带有指定属性和值的元素。 [attribute~=value] 用于选取属性值中包含指定词汇的元素。 [attribute|=value] 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。 [attribute^=value] 匹配属性值以指定值开头的每个元素。 [attribute$=value] 匹配属性值以指定值结尾的每个元素。 [attribute*=value] 匹配属性值中包含指定值的每个元素。
- 如果希望选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器。
-
后代选择器
后代选择器（descendant selector）又称为包含选择器; 后代选择器可以选择作为某元素后代的元素;在后代选择器中，规则左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符（combinator）。每个空格结合符可以解释为“... 在 ... 找到”、“... 作为 ... 的一部分”、“... 作为 ... 的后代”，但是要求必须从右向左读选择器。- 根据上下文选择元素
h1 em {color:red;} //只对 h1 元素中的 em 元素应用样式 //因此，h1 em 选择器可以解释为 “作为 h1 元素后代的任何 em 元素”。 //如果要从左向右读选择器，可以换成以下说法：“包含 em 的所有 h1 会把以下样式应用到该 em”。 ```
- 根据上下文选择元素
-
子元素选择器
只选择某个元素的子元素，请使用子元素选择器（Child selector）;子选择器使用了大于号（子结合符）:- 选择子元素
h1 > strong {color:red;} //从右向左读，选择器 h1 > strong 可以解释为“选择作为 h1 元素子元素的所有 strong 元素”。 - 结合后代选择器和子选择器
table.company td > p //选择作为 td 元素子元素的所有 p 元素， //这个 td 元素本身从 table 元素继承，该 table 元素有一个包含 company 的 class 属性.
- 选择子元素
-
相邻兄弟选择器
相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素;相邻兄弟选择器使用了加号（+），即相邻兄弟结合符（Adjacent sibling combinator）。``` <!DOCTYPE HTML> <html> <head> <style type="text/css"> li + li {font-weight:bold;} </style> </head> <body> <div> <ul> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> <ol> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ol> </div> </body> </html> ```
效果
- 选择相邻兄弟
h1 + p {margin-top:50px;} //这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。 ``` - 结合其他选择器
html > body table + ul {margin-top:20px;} //这个选择器解释为：选择紧接在 table 元素后出现的所有兄弟 ul 元素， //该 table 元素包含在一个 body 元素中，body 元素本身是 html 元素的子元素。 ```
-
伪类 (Pseudo-classes)
伪类用于向某些选择器添加特殊的效果:
-
语法：
selector : pseudo-class {property: value} //CSS 类也可与伪类搭配使用 selector.class : pseudo-class {property: value} -
伪类
属性 描述 CSS :active 向被激活的元素添加样式。 1 :focus 向拥有键盘输入焦点的元素添加样式。 2 :hover 当鼠标悬浮在元素上方时，向元素添加样式。 1 :link 向未被访问的链接添加样式。 1 :visited 向已被访问的链接添加样式。 1 :first-child 向元素的第一个子元素添加样式。 2 :lang 向带有指定 lang 属性的元素添加样式。 2
-
伪元素 (Pseudo-elements)
伪元素用于向某些选择器设置特殊效果。
- 语法：
selector:pseudo-element {property:value;} //CSS 类也可与伪类搭配使用 selector.class:pseudo-element {property:value;} - 伪元素
属性 描述 CSS :first-letter 向文本的第一个字母添加特殊样式。 1 :first-line 向文本的首行添加特殊样式。 1 :before 在元素之前添加内容。 2 :after 在元素之后添加内容。 2
网友评论