前端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 条评论
登录 后参与评论

相关文章

来自专栏HTML5学堂

移动端 模拟手机联系人触摸A~Z导航

HTML5学堂:今天要与大家分享一个当前移动端很常见的效果,类似于手机联系人的快速导航功能,即当触摸a~z的字母时,能够相对应的显示文字。有些手机的音乐导航也类...

41150
来自专栏姬小光

【第013期】如何查看页面图片尺寸

网页上的元素实际渲染的时候,其实都是方形的。由于很多图片有白色或者透明的背景,对于设计师来说,打开最终的网页并不能看出页面上的图片是否有按自己的设计实现。

12060
来自专栏腾讯社交用户体验设计

实现下划线的N个姿势

21240
来自专栏一个会写诗的程序员的博客

React 学习笔记 1 React 是什么实例JSX 语法React.Component

A declarative, efficient, and flexible JavaScript library for building user inte...

9520
来自专栏Coco的专栏

【前端性能】必须要掌握的原生JS实现JQuery

21230
来自专栏前端说吧

CSS-用伪类制作小箭头(轮播图的左右切换btn)

50080
来自专栏xiaoxi666的专栏

博客开通(附本博客样式)

博客于今日开通,在这网络资源日益丰富的年代,曾经在这里得到了许多宝贵的资料以及众多经验。想想也该到了分享心得的阶段了,顺便记录下成长的经历,共勉。

20350
来自专栏地方网络工作室的专栏

CSS3 做一个有闪光效果的进度条

CSS3 做一个有闪光效果的进度条 今天刚入职的小前端看到一个进度条的效果,想要实现,但是不知道如何下手,于是,我写了一个demo给它看下。 最终效果:CSS3...

27680
来自专栏菩提树下的杨过

用Flex模拟智能手机表单输入的自动放大功能

用iphone或itouch登录过微薄的同学们想必都会发现:登录一些手机版网站(比如微薄时),表单中的输入框会自动放大,以方便用户输入,等输入完成后,页面会再次...

24360
来自专栏我和未来有约会

用silverlight做动画-相机

用silverlight做动画-相机 适合初学者学习 做一个相机的动画 和做flash动画一样,准备好素材 将素材放入项目中 开始正式制作前为了方便以后重用,...

28940

扫码关注云+社区

领取腾讯云代金券