专栏首页编程微刊前端css常用的选择小汇

前端css常用的选择小汇

要使用css对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器。选择器就是选择器用来指定样式的作用范围。

类选择器:

类选择器在css中比较常见,首先要在普通标签中设置一个类,类名不可为中文,然后在 style 标签中添加该类名的样式。类选择器在选择器前要加一个点”.”

例子:

<head>
<style type="text/css">
.shasha{
    color:red;
    font-size:20px;    
}
<style>
</head>
<body>
    <h1 class="shasha">标题</h1>
    <p class="shasha">第一段</p>
    <p> 第二段</p>
</body>

样式会作用于class类型为shasha的标签内容上,类名可以随便取,别用中文。

ID选择器

ID选择器与类选择器大致相同,不同的是:

  • ID选择起标签内部指定ID;
  • ID选择器前面不用点”.”,而用井号”#”
  • ID选择器只能起一个ID名;类选择器可以起多个类名。

例子:

<head>
<style type="text/css">
#shasha2{
    color:red;
    font-size:20px;    
}
<style>
</head>
<body>
    <h1 id="shasha2">标题</h1>
    <p id="shasha2">第一段</p>
    <p> 第二段</p>
</body>

子选择器:

小于这个类的子标签

例子:

.shasha>li{
    border:1px solid red;
}

所有后代标签选择器

小于号代表第一个后代,空格可以指定其所有后代标签

例子:

.shasha li{
    border:1px solid red;
}

通用选择器

通用选择器,选择html文档中的所有标签。

*{
    border:1px solid red;
    font-size:20px;
}

伪类选择符

给标签的某一个状态设定一个类,例如超链接标签可以设置为鼠标停留后显示别的颜色。 最常用的也就是a:hover

a:hover{
    color:red;
    font-size:20px;    
}

分组选择符

选择符中间以逗号隔开,等于同时给多个选择符添加样式

.shasha,#shasha2 span{
    color:red;
}

标签选择器:

直接以html中的标签作为选择器:如果设置 HTML 的样式,选择器通常将是某个 HTML 元素,比如 p、h1、em、a,甚至可以是 html 本身,也称元素选择器

<style tye="text/css">
p{
    font-size:12px;
    line-height:1.6em;
}
html {color:black;}
h1 {color:blue;}
h2 {color:silver;}
</style>

总结:

  1. 普通标签选择:以html中的标签选择
  2. 类选择器:给标签添加一个类属性,根据类属性添加样式,可以使用多个类名,多次使用
  3. ID选择器:给标签添加一个ID属性,ID必须是要唯一的,一个文档只能使用一次ID选择器。
  4. 子选择器:用小于号分隔,指其选择器中的子标签
  5. 包含选择器:用空格分隔,指其选择器中的所有后代标签
  6. 通用选择器:对html中所有的标签有效
  7. 伪类选择器:给标签的一个动作添加一个选择器
  8. 分组选择器:逗号分隔,同时作用给多个标签

CSS 选择器参考手册:http://www.w3school.com.cn/cssref/css_selectors.asp

原文作者:祈澈姑娘 原文链接:https://www.jianshu.com/u/05f416aefbe1 创作不易,转载请告知

90后前端妹子,爱编程,爱运营,爱折腾。 坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。

自荐前端干货:

进阶攻略|前端最全的框架总结:https://www.jianshu.com/p/2a8ce7075d79 web开发快速提高工作效率的一些资源:https://www.jianshu.com/p/3cede64e87e5 前端学习的几个网站:https://www.jianshu.com/p/c36463dd56db 老司机程序员用到的各种网站整理:https://www.jianshu.com/p/c806eabe5bec 进阶攻略|前端完整的学习路线:https://www.jianshu.com/p/ed50ee3889d4 八款前端开发人员更轻松的实用在线工具:https://www.jianshu.com/p/267a01fb8bdb 前端几个常用简单的开发手册拿走不谢:https://www.jianshu.com/p/fd9689046a9b 程序员常用的六大技术博客类:https://www.jianshu.com/p/d1614f890282 九款优秀的企业项目协作工具推荐:https://www.jianshu.com/p/7df25e438610 移动端手势的七个事件库:https://www.jianshu.com/p/0754d5daa27e Bootstrap相关优质项目学习清单:https://www.jianshu.com/p/80d229e7fedc 2018前端越来越流行的的技术:https://www.jianshu.com/p/d4af2aa96cee

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 2018年各大互联网前端面试题三(阿里)

    王小婷
  • ES6系列笔记-数组方法filter(过滤)

    王小婷
  • 七个帮助你处理Web页面层布局的jQuery插件

    王小婷
  • CSS选择器是如何确定优先级的?

    先看下面的示例 <div id="content"> <p id="title">Hello world</p> </div> 有如下的2个css选择器...

    dys
  • css选择器攻略

    很多小伙伴对css选择器表示不屑,觉得很简单没必要学习,其实你究竟了解多少呢?当面试官问你的时候,你能分出哪些是css3新增的选择器,他们兼容如何?又该如何处理...

    RobinsonZhang
  • 前端基础-CSS伪类选择器和类选择器一起使用

    cwl_java
  • HTML|css选择器模型

    我们在做前端网页的时候需要简单的布局形式使网页变得美观好看。一些尺寸,颜色,背景等形式都可以通过CSS选择器模型来解决。往往布局网页形式的方法很多,但CSS选择...

    算法与编程之美
  • 前端-CSS-初探-注释-语法结构-引入方式-选择器-选择器优先级-01(待完善)

    suwanbin
  • CSS基础

    css:Cascading Style Sheet 层叠样式表,简而言之 就是css的样式 是可以叠加的。默认 是根据css选择器的权重,按权重进行叠加,权重值...

    lesM10
  • Web前端学习 第2章 网页重构5 css选择器进阶

    上一节我们已经掌握了常用css选择器和css的一些常用属性,本节我们进一步扩展css选择器的内容包括内容如下:

    学习猿地

扫码关注云+社区

领取腾讯云代金券