1.全局选择器
通配符：* 用于选择所有元素
实列：匹配body下所有的元素
body *{
margin: 0;
padding: 0;
list-style: none;
}
2.基础选择器
-- 元素选择器 ：选择器所有标签
-- id选择器 ：选择一个标签
-- class选择器/类选择器 ：选择一组标签
3.属性选择器
- 通过标签的属性匹配元素
- 所有属性选择器都以方括号开头
[属性]选择器最基础的用法：
示例：将属性为title的所有元素都设置上前景色。
[title]{
color: rgb(81, 150, 182);
}
示例：将属性title的属性值为二级标题的所有元素都设置上背景色。
[title=二级标题]{
color: cadetblue;
}
示例：将属性target的属性值为_blank的所有元素都设置上删除线。
超链接的原有属性的value值要添加引号。
[target="_blank"]{
text-decoration: line-through;
}
示例：将属性href的属性值为http://www.baidu.com的所有元素都设置上前景色。
^：指定了属性名，并且有属性值，属性值是以http://www.baidu.com开头的；
a[href^="http://www.baidu.com"]{
color: black;
}
示例：将属性target的属性值为"_blank"的所有元素都设置上前景色。
$：指定了属性名，并且有属性值，属性值是以_blank结尾的；
a[target$="_blank"]{
color: rgb(188, 95, 95);
}
示例：将属性href的属性值结尾为net的所有元素都添加文字。
$：指定了属性名，并且有属性值，属性值是以net结尾的；
[href$=net]::after{
content: "我爱你";
}
4，伪类选择器
伪类选择器的标志就是单冒号：
只能匹配元素不能创建元素
- :link：匹配未点击的超链接
- :hover：匹配悬停/悬浮状态的元素
- :active： 匹配激活状态（鼠标按下）的元素
- :visited：匹配访问过（抬起鼠标）的超链接
- :focus ：匹配焦点元素（不是所有元素都拥有焦点，像表单标签，超链接都拥有焦点）
- :ntn-child ：匹配第n个子元素
- :flrst-child：匹配第一个子元素
- :last-child：匹配最后一个子元素
- :root :匹配根元素
- :not() :匹配不是某个元素的元素
- :checked:匹配选中的元素
超链接伪类
<style>
/* 1.匹配未点击的超链接 */
a:link{
color: cadetblue;
}
/* 2.匹配悬停/悬浮状态的元素 */
a:hover{
color: #000;
}
/* 3. 匹配激活状态（鼠标按下）的元素*/
a:active{
color: cornflowerblue;
}
/* 4.匹配访问过（抬起鼠标）的超链接 */
a:visited{
color: rgb(255, 0, 0);
}
</style>
</head>
<body>
<a href="#">网易云</a>
</body>
:focus 实列
点击之后触发焦点元素，修改背景色
input:focus{
background-color: blueviolet;
}
:not() :匹配不是某个元素的元素
示例：排除掉.box1
.box:not(.box1){
background-color: rgb(255, 0, 0);
}
5.伪元素选择器
伪元素选择器的标志是双冒号
可以创建元素
- ::after：在元素zhi'qua
- ::before
- ::first-line：选中的第一段。
- ::first-letter ：选中第一个。
::first-letter的示例：选中段落p的第一个文字。
p::first-letter{
font-size: 2rem;
color: rgb(110, 63, 1);
}
::first-letter的示例：选中段落p的第一段文字设置上划线。
p::first-line{
text-decoration: overline;
}
6.组合选择器
组合选择器就算把上面五类选择器放在一起使用
- 分组选择器 ：使用逗号组合（匹配到使用逗号分割的每一项）
- 后代选择器 ：使用空格组合 （匹配当前元素的所有后代元素）
- 子元素选择器 ：使用>组合（匹配当前元素的所有子元素）
- 相邻兄弟选择器：使用+组合 （匹配当前元素后面的兄弟元素）
网友评论