1:属性选择器
语法:[属性名]{} 选择含有指定属性的元素
[属性名=属性值]{} 选择含有指定属性以及指定属性值的元素
[属性名^=属性值]{} 选择含有指定属性以及指定属性值开头的元素
[属性名$=属性值]{} 选择含有指定属性以及指定属性值结尾的元素
[属性名*=属性值]{} 选择含有指定属性,只要含有某个属性值的元素
伪类选择器
伪类 不存在的类 表示元素的一种状态,好比排在第一位,倒数第一个,鼠标悬浮,鼠标点击
:first-child 第一个子元素
:last-child 最后一个子元素
:nth-child(n) 选中第n个子元素
n 选中所有的子元素
2n/even 偶数
2n+1/odd 奇数
以上的伪类,是根据所有的子元素进行排序的
:first-of-type 第一个子元素
:last-of-type 最后一个子元素
:nth-of-type(n) 选中第n个子元素
在同类型中,进行排序
知识点1:去掉项目符号*/
ul,li{
list-style: none;
margin: 0;
padding: 0;
}
需求一:将ul里的第一个li自动一直设置为红色
li:last-of-type{color: red;}
二、:not() 否定伪类 将符合条件的元素去除
li:not(.l1){
background-color: pink;
}
需求四:鼠标点击后,增加背景色pink
4、:active 鼠标点击,元素的状态
需求一:给未访问过的超链接加红色字体
需求二:给访问过的超链接加绿色字体
需求三:鼠标移入,链接字体变大到30px
需求四:鼠标点击后,增加背景色pink
lorem 随机生成单词
需求一:让文章的首字母一直为字体为24px
需求二:让文章的第一行添加背景色黄色
需求三:让选中的内容,字体为红色
需求四:在元素开始的位置前+‘你好'
伪元素 不存在的元素
::first-letter 第一个字母
::first-line 第一行
::selection 选中的内容
::before 在元素开始的位置前
::after 在元素结束的位置后