1.CSS组合选择符
CSS组合选择符包括各种简单选择符的组合方式。
在CSS3中包含了四种组合方式:
· 后代选择器(以空格 分隔)
· 子元素选择器(以大于 > 号分隔）
· 相邻兄弟选择器（以加号 + 分隔）
· 普通兄弟选择器（以波浪号 ～ 分隔）
1.1 后代选择器
后代选择器用于选取某元素的后代元素。
以下实例选取所有 <p> 元素插入到 <div> 元素中：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>CSS简单学习</title> <style type="text/css"> div p { background-color: red; } </style> </head> <body> <div> <p>段落1在div中。</p> <p>段落2div中。</p> </div> <p>段落3不在div中。</p> <p>段落4不在div中。</p> </body> </html>
1.2 子元素选择器
与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。
以下实例选择了<div>元素中所有直接子元素 <p> ：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>CSS简单学习</title> <style type="text/css"> div>p { background-color: #FF0000; } </style> </head> <body> <h1>网页的第一个标题</h1> <div> <h2>姓名：张三</h2> <p>性别：男</p> </div> <div> <span><p>联系电话：1234567890</p></span> </div> <p>张三是我的好朋友！！！</p> </body> </html>
1.3 相邻兄弟选择器
相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。
以下实例选取了所有位于 <div> 元素后的第一个 <p> 元素：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>CSS简单学习</title> <style type="text/css"> div+p { background-color: #FF0000; } </style> </head> <body> <h1>文章标题</h1> <div> <h2>div内部标题</h2> <p>div内部段落</p> </div> <p>div之后的第一个p元素</p> <p>div之后的第二个p元素</p> </body> </html>
1.4 后续兄弟选择器
后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。
以下实例选取了所有 <div> 元素之后的所有相邻兄弟元素 <p> :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>CSS简单学习</title> <style type="text/css"> div~p { background-color: #FF0000; } </style> </head> <body> <h1>文章标题</h1> <div> <p>段落1在div中。</p> <p>段落2div中。</p> </div> <p>段落3不在div中。</p> <p>段落4不在div中。</p> </body> </html>
2.CSS伪类
CSS伪类是用来添加一些选择器的特殊效果。
伪类的语法：
selector:pseudo-class {property:value;}
CSS类也可以使用伪类：
selector.class:pseudo-class {property:value;}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>CSS简单学习</title> <style type="text/css"> a:link {color: blue;} a:visited {color: purple;} a:hover {color: red;} a:active {color: green;} </style> </head> <body> <p><b><a href="https://www.runoob.com" target="_blank">这是一个链接</a></b></p> <p><b>注意：</b> a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果。</p> <p><b>注意：</b> a:active 必须在 a:hover 之后。 </body> </html>
可以使用 :first-child 伪类来选择父元素的第一个子元素。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>CSS简单学习</title> <style type="text/css"> p:first-child { color: #0000FF; } </style> </head> <body> <p>这是一个段落</p> <p>这是一个段落</p> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>CSS简单学习</title> <style type="text/css"> p>i:first-child { color: #0000FF; } </style> </head> <body> <p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p> <p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p> </body> </html>
2.2.3 匹配所有作为第一个子元素的<p>元素中的所有<i>元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>CSS简单学习</title> <style type="text/css"> p:first-child i { color: #0000FF; } </style> </head> <body> <p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p> <p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p> </body> </html>
:lang伪类使你有能力为不同的语言定义特殊的规则
在下面的例子中，:lang 类为属性值为 "no" 的q元素定义引号的类型：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>CSS简单学习</title> <style type="text/css"> q:lang(no) { quotes: "~" "~"; } </style> </head> <body> <p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p> <p>在这个例子中, :lang定义了q元素的值为lang =“no”</p> <p><b>注意:</b> 仅当 !DOCTYPE 已经声明时 IE8 支持 :lang.</p> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>CSS简单学习</title> <style type="text/css"> input:focus { background-color: aqua; } </style> </head> <body> <form action="https://www.baidu.com"> 账号：<input type="text" name="user" /><br /> 密码：<input type="password" name="password" /><br /> <input type="submit" name="..." value="登录" /> </form> </body> </html>
3.CSS伪元素
CSS伪元素是用来添加一些选择器的特殊效果。
伪元素的语法：
selector:pseudo-element {property:value;}
CSS类也可以使用伪元素：
selector.class:pseudo-element {property:value;}
3.1 CSS :first-line、:first-letter 伪元素
"first-line"伪元素用于向文本的首行设置特殊样式。注意："first-line"伪元素只能用于块级元素。
"first-letter"伪元素用于向文本的首字母设置特殊样式。注意： "first-letter"伪元素只能用于块级元素。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>CSS简单学习</title> <style type="text/css"> p::first-line { color: #FF0000; font-size: small; } p::first-letter { color: #0000FF; font-size: xx-large; } </style> </head> <body> <p>你可以结合使用"first-line"和"first-letter"伪元素向文本的首行和首字母设置特殊样式。</p> </body> </html>
":before"伪元素可以在元素的内容前面插入新内容。
":after"伪元素可以在元素的内容之后插入新内容。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>CSS简单学习</title> <style type="text/css"> h1::before { content: url(img/images/tx.jpg); } h2::after { content: url(img/images/tx.jpg); } </style> </head> <body> <h1>图片插入到了标题之前</h1> <h2>图片插入到了标题之后</h2> </body> </html>
4.所有CSS伪类、伪元素
详情请参考菜鸟教程！！！
选择器 |
示例 |
示例说明 |
input:checked |
选择所有选中的表单元素 |
|
input:disabled |
选择所有禁用的表单元素 |
|
p:empty |
选择所有没有子元素的p元素 |
|
input:enabled |
选择所有启用的表单元素 |
|
p:first-of-type |
选择的每个 p 元素是其父元素的第一个 p 元素 |
|
input:in-range |
选择元素指定范围内的值 |
|
input:invalid |
选择所有无效的元素 |
|
p:last-child |
选择所有p元素的最后一个子元素 |
|
p:last-of-type |
选择每个p元素是其母元素的最后一个p元素 |
|
:not(p) |
选择所有p以外的元素 |
|
p:nth-child(2) |
选择所有 p 元素的父元素的第二个子元素 |
|
p:nth-last-child(2) |
选择所有p元素倒数的第二个子元素 |
|
p:nth-last-of-type(2) |
选择所有p元素倒数的第二个为p的子元素 |
|
p:nth-of-type(2) |
选择所有p元素第二个为p的子元素 |
|
p:only-of-type |
选择所有仅有一个子元素为p的元素 |
|
p:only-child |
选择所有仅有一个子元素的p元素 |
|
input:optional |
选择没有"required"的元素属性 |
|
input:out-of-range |
选择指定范围以外的值的元素属性 |
|
input:read-only |
选择只读属性的元素属性 |
|
input:read-write |
选择没有只读属性的元素属性 |
|
input:required |
选择有"required"属性指定的元素属性 |
|
root |
选择文档的根元素 |
|
#news:target |
选择当前活动#news元素(点击URL包含锚的名字) |
|
input:valid |
选择所有有效值的属性 |
|
a:link |
选择所有未访问链接 |
|
a:visited |
选择所有访问过的链接 |
|
a:active |
选择正在活动链接 |
|
a:hover |
把鼠标放在链接上的状态 |
|
input:focus |
选择元素输入后具有焦点 |
|
p:first-letter |
选择每个<p> 元素的第一个字母 |
|
p:first-line |
选择每个<p> 元素的第一行 |
|
p:first-child |
选择器匹配属于任意元素的第一个子元素的 <p> 元素 |
|
p:before |
在每个<p>元素之前插入内容 |
|
p:after |
在每个<p>元素之后插入内容 |
|
p:lang(it) |
为<p>元素的lang属性选择一个开始值 |
