文章目录
选择器
一、基本选择器
命名规则:
1、只能包含字母、数字、-、_
2、只能以字母开头
3、区分大小写
4、多个标签可以有相同的类名
5、一个html文档中id值唯一
-
“*” 通用元素选择器,匹配任何元素
-
h1 标签选择器,匹配所有使用h1标签的元素
-
.title class选择器,匹配所有class属性中包含title的元素
- 根据需要可以定义二个或二个以上的标签
- 例:
<h2 class="title html5">HTML5T CSS3新特性</h2>
- 根据需要可以定义二个或二个以上的标签
-
#footer id选择器,匹配所有id属性等于footer的元素
二、多元素的组合选择器
-
E,F 多元素选择器,同时匹配所有E元素或F元素,E和F之间用逗号分隔
-
E F 后代元素选择器,匹配所有属于E元素后代的F元素,E和F之间用空格分隔
-
E > F 子元素选择器,匹配所有E元素的子元素F
-
E + F 毗邻元素选择器,匹配所有紧随E元素之后的同级元素F
-
E ~ F 匹配任何在E元素之后的同级F元素
三、 伪类选择器
css伪类选择器大全:
https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-classes
伪类 | 含义 |
---|---|
:link | 选中未访问过的超链接 |
:visited | 选中已访问过的超链接 |
:hover | 选中鼠标移入的元素 |
:active | 选中鼠标按下的元素 |
:focus | 选中聚焦的表单元素 |
:disabled | 选中被禁用的表单元素 |
:checked | 选中被选中的表单元素 |
:first-child | 选中第一个子元素 |
:last-child | 选中最后一个子元素 |
:nth-child(an+b) | 选中第「an+b」个子元素 a和b是常量,n的值会从0开始依次递增 |
:first-of-type | 选中第一个指定类型的子元素 |
:last-of-type | 选中最后一个指定类型的子元素 |
:nth-of-type(an+b) | 选中第「an+b」个指定类型的子元素 a和b是常量,n的值会从0开始依次递增 |
E:not(s) 匹配不符合当前选择器的任何元素
E:target 匹配文档中特定"id"点击后的效果
E::selection 匹配用户当前选中的元素
四、结构性伪类
-
E:root 匹配文档的根元素,对于HTML文档,就是HTML元素
-
E:nth-child(n) 匹配其父元素的第n个子元素,第一个编号为1
-
E:nth-last-child(n) 匹配其父元素的倒数第n个子元素,第一个编号为1
-
E:nth-of-type(n) 与:nth-child()作用类似,但是仅匹配使用同种标签的元素
-
E:nth-last-of-type(n) 与:nth-last-child() 作用类似,但是仅匹配使用同种标签的元素
-
E:last-child 匹配父元素的最后一个子元素,等同于:nth-last-child(1)
-
E:first-of-type 匹配父元素下使用同种标签的第一个子元素,等同于:nth-of-type(1)
-
E:last-of-type 匹配父元素下使用同种标签的最后一个子元素,等同于:nth-last-of-type(1)
-
E:only-child 匹配父元素下仅有的一个子元素,等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)
-
E:only-of-type 匹配父元素下使用同种标签的唯一一个子元素,等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
-
E:empty 匹配一个不包含任何子元素的元素,注意,文本节点也被看作子元素
五、 伪元素选择器
-
E:first-line 匹配E元素的第一行
-
E:first-letter 匹配E元素的第一个字母
-
E:before 在E元素之前插入生成的内容
-
E:after 在E元素之后插入生成的内容
例:
span::before{
content:"《";
color:red;
}
span::after{
content:"》"
color:red;
}
六、属性选择器
-
E[att^=“val”] 属性att的值以"val"开头的元素
-
E[att$=“val”] 属性att的值以"val"结尾的元素
-
E[att*=“val”] 属性att的值包含"val"字符串的元素
七 input:checked + label;input:checked ~ label
input:checked ~ label :相邻同胞选择器,选择被勾选的input标签后 所有的label标签[input 和 label标签有共同的父元素];
input:checked + label :相邻同胞选择器,选择被勾选的input标签后 第一个label标签[input 和 label标签有共同的父元素];
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#checked_1:checked+label{
background-color:red;
}
.checked_class:checked~label{
background-color:red;
}
</style>
</head>
<body>
<div >
<input id="checked_1" type="checkbox" />
<label for="checked_1">aaaa</label>
<label for="checked_1">bbbb</label>
</div>
<div >
<input id="checked_2" class="checked_class" type="checkbox" />
<label for="checked_2">aaaa</label>
<label for="checked_2">bbbb</label>
</div>
</body>
</html>