CSS属性选择器、关系选择器、伪类选择器、伪元素选择器
CSS选择器
- 属性选择器
-
- 种类
- 用法
- 关系选择器
-
- 种类
- 用法
- 伪类选择器
-
- 种类
- 用法
- a标签的伪类
- 伪元素选择器
-
- 种类
- 用法
属性选择器
属性选择器可以根据元素的属性及属性值来选择元素。
CSS3中新增了3种属性选择器。
种类
（1）E[att^=value]
这里的^表示以某个“value”开头
（2）E[att$=value]
这里的$表示以某个“value”结尾
（3）E[att*=value]
这里的*表示包含“value”
用法
//属性选择器
p[id^='xiao']{
/* p标签的id属性是以xiao开头的 */
color: pink;
}
p[id$='zi']{
/* id属性是以zi结尾的 */
color:royalblue;
}
p[class*='xiao']{
/* p标签的class属性值中包含'xiao' */
font-size: 35px;
}
//标签
<p id="xiaowen">我是小文p>
<p id="dawenzi">也是大文子p>
<p class="xiaoyan">又叫小严p>
<p class="xiaowenzi">也叫小文子p>
<p class="xingzi">也可以叫我星子p>
关系选择器
种类
（1）子元素选择器：只能选择作为某元素的最近一级子元素。
简单理解就是选亲儿子元素。
语法：
元素1 > 元素2 {
样式规则
}
// 表示选择元素1 里面的所有直接后代(子元素) 元素2。
-
元素1 和 元素2 中间用 大于号 隔开
-
元素1 是父级，元素2 是子级，最终选择的是元素2
-
元素2 必须是亲儿子，其孙子、重孙之类都不归他管。所以也可以叫它为亲儿子选择器
例如：
div > p {
样式规则
} /* 选择 div 里面所有最近一级 p 标签元素 */
（2）相邻兄弟选择器（+，~）
- 临近兄弟选择器：选择器使用加号“+”来链接前后两个选择器。
选择器中的两个元素有同一个父亲， 而且第二个元素必须紧跟第一个元素。
- 普通兄弟选择器：使用 “~”来链接前后两个选择器。
选择器中的两个元素有同一个父亲，但第二个元素不必紧跟第一个元素。
用法
//选择器
<div>
.p1+#p2{ //属性为p1的标签的临近兄弟标签
/* 临近兄弟选择器 */
color: rgb(250, 100, 100); //红色
}
.p1~#p3{ //属性为p1的标签的普通兄弟标签
/* 普通兄弟选择器 */
color: rgb(200, 200, 100); //青色
}
div>
//标签
<p class="p1">西安p>
<p id="p2">江苏p>
<p id='p3'>云南p>
伪类选择器
种类
下面只列举出了一些常用的伪类选择器
（1）:first-child选择器 ：为父元素中的第一个子元素设置样式
（2）:last-child 选择器：为父元素中的最后一个子元素
（3）:nth-child(n)选择器: 选择第几个子元素
（4）:nth-last-child(n)选择器：选择倒数第几个子元素
（5）:empty选择器：选择没有子元素或文本内容为空的所有元素。
用法
//选择器
div p:first-child{
/* 伪类选择器 ,选中第一个子元素*/
color: rgb(8, 206, 196);
}
div p:nth-child(3){
/* 选中第三个 */
font-size: 25px;
}
div p:nth-last-child(2){
/* 选中倒数第二个 */
font-size: 45px;
}
//标签
<div>
<p class="p1">巧克力p>
<p id="p2">棒棒糖p>
<p id='p3'>小熊饼干p>
<p id="p2">旺仔牛奶p>
<p id='p3'>可口可乐p>
div>
a标签的伪类
（1）:link选择器：用户没有点击过的链接状态（特指a标签）
（2）:visited选择器：用户点击过的链接状态（特指a标签）
（3）:hover选择器：用户鼠标悬停到链接上的状态（不限于a标签，p，li也可以使用）
a:hover{color: red}
p:hover{font-size: 20px}
< a href=" " >超链接
<p>段落p >
（4）:active选择器：用户鼠标点击且不松手之前的状态（不限于a标签）
注意：在css中必须按照以上固定顺序写，否则不起作用
（5）:not(s)选择器：选择不含有s选择器的元素，s一般是id或者类选择器
p:not(.p1){color: red}
<p class="p1">段落1p >
<p class="p1 p2">段落2p >
<p class="p2 p3">段落3p >
<p class="p4">段落4p >
伪元素选择器
种类
（1）:before伪元素选择器：用于在被选元素的内容前面插入内容，必须配合content属性来指定要插入的具体内容。
语法：
<元素>:before
{
content:文字/url();
}
（2）:after伪元素选择器：用于在某个元素之后插入一些内容
语法：
<元素>:after
{
content:文字/url();
}
用法
<style>
p:before{ //在p标签的内容前面添加内容
content:"文子";
}
p:after{ //在p标签的内容后面添加内容
content:"文文";
}
style>
<body>
<p>小文p>
body>
