CSS选择器
CSS简介
CSS是装饰页面的技术。
语法结构
选择器 {
属性名1:属性值1;
属性名2:属性值2;
...
}
语法注释
/*注释内容*/
引入css的方式
1.head标签中的style标签内部直接编写css代码
2.head标签中的link标签引入外部css文件
3.标签内部通过style属性直接编写
CSS基本选择器
1.标签选择器：通过标签来定义css样式
/*选择页面的所有h1标签*/
h1 {
}
/*选择页面的所有img标签*/
img {
}
2.类选择器：通过标签的class属性定义css样式
html:
<p class='p1'>我的class属性值是p1</p>
<p class='p1'>我的class属性值是p1</p>
<p class='p2'>我的class属性值是p2</p>
css:
/*选择页面标签class属性为p1的标签*/
.p1 {
}
/*选择页面标签class属性为p2的标签*/
.p2 {
}
3.id选择器：通过标签的id属性定义css样式
html:
<p id='p1'>我的id属性值是p1</p>
<p id='p1'>我的id属性值是p1</p>
<p id='p2'>我的id属性值是p2</p>
css
/*选择页面标签id属性为p1的标签*/
#p1 {
}
/*选择页面标签id属性为p2的标签*/
#p2 {
}
4.通用选择器：选择所有标签定义css样式
/*选择页面所有标签*/
* {
}
组合选择器
通过标签关系选择标签来定义css样式。
html:
<div class='div1'>
<p class='p1'>
我是div1儿子p1
</p>
<p class='p2'>
我是div1儿子p2，p1的毗邻
</p>
<div class='div2'>
<p class="p3">
我是div1孙子p3
</p>
</div>
</div>
1.儿子选择器(使用大于号)，查找标签内部，只向内部查找一层。
/*选择class值为div1的标签内部儿子的class是p1的标签*/
.div1 > .p1 {
}
2.后代选择器(关键符号是空格)，查找标签内所有的标签。
/*选择class值为div1的标签内部所有的p标签*/
.div1 p {
}
3.毗邻选择器(关键符号是加号)，查找标签同级别下紧挨的第一个标签。
/*选择class值为p1的标签同级别下一个class值为p2的标签*/
.p1 + .p2 {
}
4.弟弟选择器(关键符号是小波浪号)，查找同级别下的所有标签。
/*选择class值为p1的标签同级别下所有p标签*/
.p1 ~ p {
}
属性选择器
根据标签内部的属性名和属性值查找标签(关键符号是中括号)。
1.直接通过属性名查找
/*选择所有标签中有class属性值的*/
[class] {
}
2.通过属性与值查找
/*选择所有标签中有type属性值的，并且值为text的*/
[type='text'] {
}
3.通过属性与值查找，并指定具体标签
/*选择所有input标签中有type属性值的，并且值为text的，*/
input[type='text'] {
}
分组与嵌套
分组
css定义样式时可以把多种样式相同的选择器放在一起定义。
/*选择p标签、div标签、class属性值为abc的标签*/
p, div, .abc {
}
嵌套
多种选择器可以混合起来使用。
/*选择div标签中id为d1的标签内部所有的p标签*/
div#d1 p{
}
伪类选择器
我们可以根据标签不同的状态，对标签进行一些修改。
1.鼠标悬浮
/*定义鼠标停在p标签上时的样式*/
p:hover {
}
2.获取聚点(选中输入框)
/*输入框被鼠标选择时的样式*/
input:focus {
}
其他伪类选择器：
/*未访问链接的样式*/
a:link {
}
/*选定链接后的样式*/
a:active {
}
/*已访问链接后的样式*/
a:visited {
}
伪元素选择器
伪元素选择器可以通过CSS操作文本内容。
first-letter：选择首个字设置样式
/*给class值为p1的标签的文本首字母设置样式*/
.p1:first-letter {
}
before：在标签之前插入内容
/*在每个p标签之前插入内容*/
p:before {
content:"内容";
}
after：在标签之后插入内容
/*在每个p标签之后插入内容*/
p:after {
content:"内容";
}
使用场景：
- 用于清除浮动带来的负面影响
- 使用伪元素选择器添加的内容无法在页面的html中找到，所以可以防止被爬取。
选择器优先级
有了这么多的选择器，CSS样式设计经常会出现对同一个标签设置多个样式，标签选择的样式是有优先级的。
相同选择器的情况：就近原则，谁离得近就选择哪个样式。比如使用link导入的样式和style添加的样式，谁里的标签近，标签就选择哪个。
不同选择器的情况：行内选择器 > id选择器 > 类选择器 > 标签选择器。
