第十二章 高级选择器

伪类和伪元素区别 伪类一个冒号，伪元素两个冒号

一,伪类选择器

伪类性质:

伪类性质:加冒号
不会对页面产生布局结构的影响
不在HTML结构中

---

1.滑入

:hover 当鼠标移动上去改变css样式

 input:hover{
        background-color: red;           如当鼠标滑入input框,input框会变成红色 
}
  <input type="text">

image.png

---

2.聚焦

:focus 当鼠标聚焦上去更改css样式

 input:focus{
        background-color: green;
    }
    <input type="text">

image.png

---

3.后代聚焦

:focus-within 当自身或自身后代聚焦时触发

---

4.选中

:checked 被勾选上触发css样式

一般用于按钮 多选或单选,如鼠标点击按钮文字变成红色

 input:checked ~ p{
        background-color: red;
    }
<input type="radio">
    <p>123456789</p>

初始效果
鼠标勾选中

---

5.反选

:not(名字) 除了括号里面的其他都会被选择

div{
       width: 200px;
       height: 200px;
       background-color: red;                  //将所有盒子都设置为红色
       margin-top: 20px;
   }
   div:not(.second){
       background-color: green;
   }

例图

---

6.:link

写法:(a标签专用)a:link 没有进行点击前的颜色

  a:link{
            color: green;
        }

link

---

7.:active

写法:active 点击时触发css样式

  a:active{
            color: green;
        }

点击时触发

---

8.:visited

写法: (a标签专用) a:visited 访问后的颜色

  a:visited{
            color: orange;
        }

访问过后

---

9.::first-letter

写法:::first-letter 第一个文字或第一个字母改变样式

 p::first-letter{
      color: red;
      font-size: 30px;
  }
<p>百度淘宝京东天猫</p>

例2

---

10, ::first-line

写法: ::first-line 改变第一行文字样式
这个就不演示了.

---

11.:selection

写法::selection 改变选中后文字css样式

 p::selection{
      color: red;       //如我想选中淘---东这几个字
  }

例3

---

二,结构性伪类选择器

1.:nth-child(n)

写法::nth-child(n)
n表示 选择第几个 从第一个开始数起

如我们想选中第三个元素,按照原来的办法我们还得给元素取名字,而现在用这个就不需要这么麻烦了

li:nth-child(3){
    color: red;
}
<ul>
    <li>1</li>
    <p>我</p>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

例4

---

2.:nth-of-type() (看看这个和上面的区别)

写法:nth-of-type() 只关注同一类型元素

li:nth-of-type(3){
    color: red;
}
<ul>
    <li>1</li>
    <p>我</p>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

例6
它只会选择li的同元素,无视其他元素的存在
下面的几个就不演示了

            :first-child                  选中第一个
            :last-child                  选中最后一个 
            :nth-child(odd)              选择奇数
            :nth-child(even)             选择偶数

---

三,属性选择器

            div[属性]                       自定义属性 date名称
            div[class^="b"]               ^ shift + 6号键,以....开头选中
            div[class*="b"]                 只要有属性里面有b的就选中
             div[class$="b"]               以...结尾选中

---

四,伪元素

伪元素性质:
1.给页面进行修饰
2.给文本添加内容

伪元素(只有两个)行内样式
before / after 在元素的正文之前插入 / 在元素正文之后插入
::before{
content=" ";这个必须写 是激活
}

• 伪类 和 伪元素 的区别

          1. 伪元素会创建新的元素
          2. 伪类只是修改HTML的css样式

---

五,浏览器的渲染原理|( 扩展)

浏览器的渲染原理:
        从上到下

        解析完成生成一个页面的结构树 

        1.页面的结构树       DOM树   HTML的结构
        2.生成css树          css树   装饰
        3.合并Dom树和css树   生成一个render树
        4.开始渲染结构        重排 
        5.生成页面            重绘

---