1、属性选择器
/*
[属性名称=值]{
设置样式
}
*/
a[href='a.txt']{
color:yellow;
}
/* 拿到以什么开头的值*/
a[href^='a']{
color:greenyellow;
}
/* 以什么结尾 */
a[href$='3']{
color:pink;
}
/* 属性的值中带带有某个字符串 */
a[href*='m']{
color:red;
}
2、伪类选择器
/*获取到第一个设置样式*/
li:first-child{
color:red;
}
/* 获取最后一个 */
li:last-child{
color:yellow;
}
/* 获取第n个 */
li:nth-child(7){
color:red;
}
li:nth-of-type(2){
background:green;
}
li:nth-child(7n){
color:red;
}
li:nth-child(7n-1){
color:red;
}
/*偶数*/
li:nth-child(2n){
color:red;
}
li:nth-child(even){
color:red;
}
/*奇数*/
li:nth-child(2n+1){
color:red;
}
li:nth-child(odd){
color:green;
}
/* 拿到空的元素*/
li:empty{
background:red;
}
/*选中的是当前处于锚点位置的元素*/
/*在某些特定场合灵活使用会带来很好的效果*/
/*学习它的目的只是知道有这个一个特殊的选择器*/
h2:target{
color:red;
}
/*not()
拿到没有指定的 类样式 的元素,并且给它设置样式.*/
li:not(.special){
background:red;
}
/*伪元素before,after
before,after一定要结合 content属性一起使用。默认是行类元素 */
div::before{
content:'';
height:100px;
width:100px;
background:red;
display:block;
}
div::after{
content:'';
height:100px;
width:100px;
background:yellow;
display:block;
}
/*first-letter 获取首个字符,给它设置样式。*/
li:first-letter{
color:red;
}
/*first-line 获取第一行文字,给它设置样式。*/
div::first-line{
color:red;
font-size:40px;
}
/*浏览器选中文字样式设置*/
div::selection{
color:red;
background:yellow;
font-size:40px;
}