Css基础——选择器介绍
Css选择器
- 基础选择器
- *选择器
- id选择器
- 类选择器
- 标签选择器
对应做一个实例，先写一个html的测试代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<h1>基準選択器紹介-[*]选择器</h1>
<p>ID选择器</p>
<div id ="ID选择器">
<p class="P1">ID选择器 </p>
<p class="P2">类选择器 </p>
</div>
<h2 class="P2">类选择器</h2>
</body>
</html>
image.png
先做一对测试准备！
- 组合选择器
-
多元素选择器
用［,］分隔，同时匹配元素的选择器
a1.PNG
-
后代选择器
用空格分开，匹配该元素的所有后代元素，不仅仅是子元素。ct. 后代元素名。
-
a2.PNG
-
子元素选择器
用［>］分隔，匹配该元的所有子元素
a3.PNG
-
直接相邻选择器
用［+］连接，匹配指定元素相邻的同级元素。
a4.PNG
-
普通相邻选择器
是指第三选择器，匹配该元素之后的同级元素，无论是否相邻。
-
属性选择器
- E［attr］
匹配所有具有属性attr的元素，div［id］就能取到所有有id属性的div - E［attr ＝value］
匹配属性attr的值为value的元素，div［id＝test］，匹配id＝test的div - E［attr~＝value］
匹配所有属性attr具有多个空格分隔，其中一个值等于value的元素 - E［attr^＝value］
匹配属性attr的值以value开头的元素 - E［attr$＝value］
匹配属性attr的值以value结尾的元素 - E［attr*＝value］
匹配属性attr的值包含value的值
- E［attr］
-
伪类选择器
选择器 含义
a:link 匹配所有未被点击的链接
a:visited 匹配所有已被点击的链接
a:hover 匹配鼠标悬停其上的a元素
a:active 匹配鼠标已经其上按下、还没有释放的a元素
a:focous 匹配获得当年焦点的a元素
a:enable 匹配表单中可使用的元素
a:disenable 匹配表单中不可使用的元素
a:checked 匹配表单中被选中的radio或checkbox元素
li:first-child 匹配父元素的第一个子元素li
li:last-child 匹配父元素的最后一个子元素li
li:nth-child(n) 匹配父元素的第n个子元素li（odd奇数，even偶数） -
伪元素
选择器 含义
E::before 在E元素内创建一个子元素，插入生成的内容作为伪元素，放在最前面
E::after 在E元素内创建一个子元素，插入生成的内容作为伪元素，放在最后面
E::selection 应用于文档中被用户选中的部分
E::first-letter 匹配E元素的第一个字母第一行的第一个字母
E::first-line 匹配E元素的第一行
该部分参考来源
作者：晓风残月1994的简书
