<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>开始学习CSS</title> <style type="text/css"> <!-- CSS元素选择器(也称为类型选择器)通过node节点名称匹配元素. 因此,在单独使用时,寻找特定类型的元素时,元素选择器都会匹配该文档中所有此类型的元素. 元素 {样式声明 } --> span { background-color: DodgerBlue; color: #ffffff; } <!-- css类选择器,在一个HTML文档中，CSS类选择器会根据元素的类属性中的内容匹配元素。类属性被定义为一个以空格分隔的列表项，在这组类名中，必须有一项与类选择器中的类名完全匹配，此条样式声明才会生效。 .类名 {样式声明 } --> .class_name { color: red; font-size: 300%; } <!-- ID 选择器在一个HTML文档中,CSS ID 选择器会根据该元素的 ID 属性中的内容匹配元素,元素 ID 属性名必须与选择器中的 ID 属性名完全匹配，此条样式声明才会生效。 #id属性值 {样式声明 } --> #id_name { border: red 2px solid; } <!-- 通配选择器 在CSS中,一个星号(*)就是一个通配选择器.它可以匹配任意类型的HTML元素.在配合其他简单选择器的时候,省略掉通配选择器会有同样的效果.比如,*.warning 和.warning 的效果完全相同. 在CSS3中,星号(*)可以和命名空间组合使用: ns|* - 会匹配ns命名空间下的所有元素 *|* - 会匹配所有命名空间下的所有元素 |* - 会匹配所有没有命名空间的元素 --> * { color: green; } <!-- 属性选择器 CSS 属性选择器通过已经存在的属性名或属性值匹配元素。 语法 [attr] 表示带有以 attr 命名的属性的元素。 [attr=value] 表示带有以 attr 命名的属性，且属性值为 value 的元素。 [attr~=value] 表示带有以 attr 命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中至少有一个值为 value。 [attr|=value] 表示带有以 attr 命名的属性的元素，属性值为“value”或是以“value-”为前缀（"-"为连字符，Unicode 编码为 U+002D）开头。典型的应用场景是用来匹配语言简写代码（如 zh-CN，zh-TW 可以用 zh 作为 value）。 [attr^=value] 表示带有以 attr 命名的属性，且属性值是以 value 开头的元素。 [attr$=value] 表示带有以 attr 命名的属性，且属性值是以 value 结尾的元素。 [attr*=value] 表示带有以 attr 命名的属性，且属性值至少包含一个 value 值的元素。 [attr operator value i] 在属性选择器的右方括号前添加一个用空格隔开的字母 i（或 I），可以在匹配属性值时忽略大小写（支持 ASCII 字符范围之内的字母）。 [attr operator value s] 在属性选择器的右方括号前添加一个用空格隔开的字母 s（或 S），可以在匹配属性值时区分大小写（支持 ASCII 字符范围之内的字母）。 --> a[href*='example'] { color: red; } <!-- 相邻兄弟选择器 (+) 介于两个选择器之间，当第二个元素紧跟在第一个元素之后，并且两个元素都是属于同一个父元素的子元素，则第二个元素将被选中 语法：former_element + target_element { style properties } --> h1 + p { color: green; } <!-- 通用兄弟选择符，位置无须紧邻，只须同层级，A~B 选择A元素之后所有同层级B元素。 former_element ~ target_element { style properties } --> p ~ span { color: red; } <!-- 后代选择器当使用 ␣ 选择符 (这里代表一个空格,更确切的说是一个或多个的空白字符) 连接两个元素时使得该选择器可以只匹配那些由第一个元素作为祖先元素的所有第二个元素(后代元素) . 后代选择器与 子选择器 很相似, 但是后代选择器不需要相匹配元素之间要有严格的父子关系. 元素1 元素2 {样式声明 } --> div p { color: green; font-size: 50px; } <!-- 子选择器 当使用 > 选择符分隔两个元素时,它只会匹配那些作为第一个元素的直接后代(子元素)的第二元素. 与之相比, 当两个元素由 后代选择器 相连时, 它表示匹配存在的所有由第一个元素作为祖先元素(但不一定是父元素)的第二个元素, 无论它在 DOM 中"跳跃" 多少次. 元素1 > 元素2 {样式声明 } 与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。 --> h1 > strong {color:red;} <!-- 伪类选择器:CSS 伪类用于向某些选择器添加特殊的效果。 a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FF00} /* 已访问的链接 */ a:hover {color: #FF00FF} /* 鼠标移动到链接上 */ a:active {color: #0000FF} /* 选定的链接 */ --> a.Pseudo_name:link { color: red;} </style> </head> <body> <h1>This is <strong>very</strong> <strong>very</strong> important.</h1> <h1>This is <em>really <strong>very</strong></em> important.</h1> <h1>我是一级标题</h1> <p>相邻兄弟选择器</p> <a href="http://example.com">链接</a> <p>这是一个段落文本. 在文本中有一个 <span>span element</span> 并且还有一个 <a href="http://example.com">链接</a>.</p> <p>这是第二段. 包含了一个 <em>强调</em> 元素.</p> <p class="class_name"> 类选择器</p> <p> <span id="id_name"> ID 选择器 </span></p> <ul> <li>项目1</li> <li>项目2</li> <li>项目 <em>三</em></li> </ul> <span>This is not red.</span> <p>Here is a paragraph.</p> <code>Here is some code.</code> <span>And here is a span.</span> <div> <p>后代选择器</p> </div> <div> <p> 后代选择器</p> </div> <hr> <a class="Pseudo_name" href="https://www.baidu.com"> 超链接</a> </body> </html>