CSS学习笔记 2.选择器.属性.伪类.伪元素选择器

四、属性选择器
[属性名]选择含有指定属性的元素
[属性名=属性值]选择含有指定属性和属性值的元素
[属性名=属性值]选择属性值以指定值开头的元素
[属性名$-=-属性值]选择属性值以指定值结尾的元素
[属性名*=属性值]选择属性值中含有某值的元素的元素

p[title]{
  color:green;/*选中p标签里带title属性的元素*/
}

p[title=abcefg]{
color:red;/*选中p标签里title=abcefg的元素*/
}

其他同理

<p title="abcefg">你该如何<strong>快速有效</strong><em>上大分</em></p> <!-- strong加粗语句  em强调语句（变斜语句） -->

五、伪类选择器
伪类：不存在的类 特殊的类 用来描述一个类的特殊状态
如：被点击的元素，第一个子元素，鼠标移入的元素
1.伪类一般情况下都是使用：开头
：first-child 第一个子元素
：last-child 最后一个子元素
：nth-child() 第n个子元素 括号里面填n
以上三种是在所以的子元素中排序
类似有：first-type last-child nth-child() 与上述作用相同
不同点为 这个是从相同类型的子元素中排序
如ul>li:nth-child(3){}指的是在子元素中的第三个 ul>li:nth-type(3){}指的是在子元素li中的第三个

ul>li:nth-child(3){
color:red;/*li是ul的子元素  这里选中了ul的第三个子元素
括号里面填n时 选中0-正无穷  填2n或even时 选中2的倍数  偶数的子元素
填2n+1或odd时  选中奇数的子元素*/
}

2 . 否定伪类 :not()
将符合条件的元素从选择器中去除

ul>li:not(:nth-child(3)){
color:red;/* 如果不加not 则表示所以li都是红色  加了not 表示除了第三个子元素不是red 其他都是    */
}

4.鼠标移入的状态：鼠标移动到哪里就修改哪里的状态
语法 ：hover

h1:hover{
  color:red;font-size: 60px;/*鼠标移动到h1时修改h1的状态*/
}

5.鼠标点击 ：鼠标点击哪里就修改哪里的状态
语法：active

.music:active{
  font-size: 50px;/* 鼠标点击时修改class="music"元素的状态 */
}

6.超链接的伪类：
即a元素的伪类
选择 没访问过的超链接 语法:link
选择 访问过的超链接 语法:visited
由于隐私的问题 用:visited访问过的超链接只能修改它的颜色 不能修改其他的比如大小什么的

a:link{
  color:red;/* :link  选择没有访问过的超链接*/
}
a:visited{
  color:black;/* :visited 选择访问过的超链接 */
}

六、伪元素选择器
伪元素：表示页面中并不真实存在的元素（处于特殊的位置）
::开头

p::first-letter{
 color:red;/* 表示选中p中第一个字母*/
}
p::first-line{
  color:red;/*表示选中第一行*/
}
p::selection{
  color:red;/*表示为鼠标选中的类型设置样式*/
}
p::before{
  content:'abc';   /*before表示在开头  必须与content连用 表示在开头加上一个abc*/
  color:red;/*设置加上的abc的格式   */
}
p::after{
  content:'sssss';/*  after表示在末尾   必须与content连用  表示在末尾加上一个sssss*/
color:red; /* 设置加上的sssss的格式*/
}

before after用的频率较高 可以给文章前后加上括号等等 且在网页中不能被鼠标选中