HTML5-4(CSS选择器)

一.CSS有两大重点

  • 1.属性

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

  • 2.选择器

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

二.选择器的分类

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

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

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

id选择器的格式: #id名

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

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

并列选择器
  • 5.复合选择器 都满足才可以更改标签样式: 相当于iOS里面的 : &&
复合选择器
  • 6.后代选择器:儿子,孙子,重孙都无所谓

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

后代选择器

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

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

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

直接后代选择器

  • 8.相邻兄弟选择器

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

相邻兄弟选择器

  • 9.属性选择器

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

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

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

伪类的属性

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

伪类的属性focus的使用

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

伪类的属性hover的使用
  • 11.伪元素

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

伪元素

伪元素first-letter的使用

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,796评论 1 92
  • 其实平时用得多的选择器无非也就是那么几个,时间久了,许多不常用的选择器就慢慢忘记了。为了不让自己忘记这些选择器,今...
    盛夏晚清风阅读 1,874评论 0 5
  • 1.CSS 元素选择器 最常见的 CSS 选择器是元素选择器。换句话说,文档的元素就是最基本的选择器。如果设置 H...
    饥人谷_小侯阅读 884评论 0 1
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,923评论 18 139
  • 已经有好几天没有打卡了,无论是整理组,玩美组,还有读书小组和薄荷阅读,整个人也有点忙的浑浑噩噩了。 ...
    吃货东咯咯阅读 211评论 0 1