属性选择器可以根据元素的属性及属性值来选择元素。
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>
(1):link
选择器:用户没有点击过的链接状态(特指a标签)
(2):visited
选择器:用户点击过的链接状态(特指a标签)
(3):hover
选择器:用户鼠标悬停到链接上的状态(不限于a标签,p,li也可以使用)
a:hover{color: red}
p:hover{font-size: 20px}
< a href=" " >超链接 a>
<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>