当前位置:网站首页 > 网站建设教程 > HTML教程 > 正文

HTML5-4(CSS选择器)

教程管理员 发布于2023-09-27 09:05 HTML教程 141

简介: HTML5-4(CSS选择器)

一.CSS有两大重点


  • 1.属性


通过属性的复杂叠加才能做出漂亮的网页


  • 2.选择器
    通过选择器找到对应的标签设置样式,选择器的作用:选择对应的标签,为之添加样式


二.选择器的分类



  • 1.标签选择器:根据标签名找到标签


image.png

  • 2.类选择器


类选择器格式:** .+类名**


image.png

  • 3.id选择器:只能用给一个人(就像身份证一样,一一对应,HTML5是一门弱语言)

id选择器的格式: #id名



image.png

  • 4.并列选择器,满足一个条件就能更改样式,相当于iOS里面的 :||

并列选择器的格式:** div,p,.类名,#i名 都可以**

image.png


5.复合选择器 都满足才可以更改标签样式: 相当于iOS里面的 &&


image.png

  • 6.后代选择器:儿子,孙子,重孙都无所谓

格式: **div p 或者 p div **等等 : 彼此之间是空格


image.png

注意:后代选择器是有顺序的


  • 7.直接后代选择器:只有儿子才可以更改样式


格式: div 或者 p > div或者p 或者其他


image.png

  • 8.相邻兄弟选择器


格式: 标签 + 相邻的标签 :符号用 +


image.png

  • 9.属性选择器

格式:标签名[属性名][属性名]:属性可以随便添加


image.png

  • 10.伪类:主要是它的属性

格式:标签名:伪类属性名


image.png

(1).伪类的属性foucus的使用


image.png

(2).伪类的属性hover的使用


image.png

  • 11.伪元素


格式: 先找到再+ :伪元素


image.png

image.png

最后:选择器的作用:找到对应的标签设置标签的样式


琼ICP备09004296号-12