码迷,mamicode.com
首页 > Web开发 > 详细

html之css选择器语法学习笔记

时间:2018-03-03 00:35:49      阅读:268      评论:0      收藏:0      [点我收藏+]

标签:参考资料   top   学习   根据   指定   school   选择器   col   inline   


相关内容:

css选择器的用法:

  • 选择器的语法
  • 标签选择器
  • 类选择器
  • id选择器
  • 选择器的分组
  • 嵌套选择
  • 属性选择器
  • 子标签选择器
  • 相邻兄弟选择器

 

参考资料:w3school

 

首发时间:2018-03-02 23:54

 


css选择器的用法:

  • css选择器的语法:css选择器的定义有两部分组成,一个是选择器,一个是样式定义 技术分享图片 

 

  • 标签选择器(直接根据标签来选择):
    • h1 {color:red; font-size:14px;}
      p { color: #ff0000; }
      body {
        color: #000;
        background: #fff;
        margin: 0;
        padding: 0;
        font-family: Georgia, Palatino, serif;
        }

 

 

  • 类选择器:
    • 在 CSS 中,类选择器以一个点号代表
    • 技术分享图片
    • 可以在标签选择的基础上根据它们的类而选择:技术分享图片
    • 把两个类选择器链接在一起,仅可以选择同时包含这些类名的元素,比如.important.warning {background:silver;} 只会选择class="important warning"的标签

 

 

  • id选择器【根据标签的id来筛选出指定的标签来添加特定的样式】:
    • id 选择器以 "#" 来定义。
    • 技术分享图片
    • 可以在选择标签的基础上根据它们的id而选择:技术分享图片

 

 

  • 选择器的分组 【同时给多种标签加样式,使用逗号分隔各个选择器】
    h1,h2,h3,h4,h5,h6 {color: green;}

 

  • 派生选择器\后代选择器【根据文档上下文关系来筛选】:技术分享图片

 

  • 属性选择器:
    • 技术分享图片
    • 技术分享图片技术分享图片

 

  • 子标签选择器:
    • 子标签选择器只能选择作为某标签子标签的元素
    • 技术分享图片

 

  • 相邻兄弟选择器:
    • 如果需要选择紧接在另一个标签后的标签,而且二者有相同的父标签,可以使用相邻兄弟选择器
    • 技术分享图片

 

 

由于本人并不是专业学前端的,学也只是为了方便其他开发,所以只会抓住重点

如果想要了解更多css语法,可以参考w3school


html之css选择器语法学习笔记

标签:参考资料   top   学习   根据   指定   school   选择器   col   inline   

原文地址:https://www.cnblogs.com/progor/p/8495520.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!