CSS常用选择器
关于CSS常用选择器:
1、ID选择器
关于ID选择器具有唯一性,在文档流中,ID是唯一的,在低版本的浏览器中,允许出现不适唯一ID的情况,而在高版本的浏览器中,出现ID不唯一的情况浏览器会出现的报错的。
例如:<h1 id="warning">Meerkat <em>Central</em></h1> #warning{color:red} 进行CSS样式的设置
2、类选择器
对文档元素的class属性命名不具有唯一性,也就是说不用的元素可以拥有相同的类名
例如:<h1 class="warning">Meerkat <em>Central</em></h1>
<h2 class="warning">Shipping And Payment</h2>
这种情况在类的命名中是可以存在,而且当你用类选择器进行样式时 .warning{color:red}一级标题和二级标题的颜色都会被设置成红色
3、属性选择器
属性选择器顾名思义就是利用属性选择出某个标签然后对样式或者js进行操作的。属性选择器分为几类:
1)简单属性选择器
例如:<h1 class="hoopla">Hello</h1>
<h1 class="severe">Serenity</h1>
<h1 class="fancy">Fooling</h1>
h1[class] {color:red} 按上面设置样式h1标题的颜色都会被设置成红色,文档中设置了class属性的h1标签颜色都会被设置成红色
2)根据具体的属性选择
例如:<h1 class="hoopla">Hello</h1>
<h1 class="severe">Serenity</h1>
<h1 class="fancy">Fooling</h1>
h1[class="hoopla"] {color:red;} h1[class="severe"] {color:blue;} h1[class="fancy"] {color:yellow;} 根据以上特定属性选择,Hello被设置成红色,Serenity设置成蓝色,Fooling设置成黄色
还有两种属性选择器分别是:根据部分属性值选择和特定属性选择类型,这两种选择在实际开发的过程中用到较少,这里不做介绍。有兴趣的可以自己去了解
4、后代选择器
后代选择器分为几种情况:
1)选择后代元素
<h1 class="warning">Meerkat <em>Central</em></h1>
<p>Meerkat Central</p>
h1 em {color:red;}这里em标签的颜色会被设置成红色,这种后代选择器不仅限于两个选择器,例如:ul ol ul em {color:red;}
2)选择子元素
h1>em {color:red;}效果跟上面的效果是一样的,这里给出的例子h1标签只存在一个后代
3)选择相邻的兄弟元素
h1 + p {color:blue;}这种样式设置表现是与h1标签相邻的所有的p标签的颜色都会被设置成蓝色,h1也会被设置成蓝色
5、伪类选择器和伪元素选择器
这里暂不介绍伪类选择器和伪元素选择器,如果有感兴趣的人可以给我留言,后续我出去归纳总结,谢谢
CSS常用选择器的更多相关文章
- CSS常用选择器的认识
---恢复内容开始--- 前言:在CSS中选择器的种类有很多很多,但是在实际的工作中,我们经常会用到的分为两大类:基础选择器和复合选择器这两个大类,学习选择器的目的就是为了在复杂的页面中能够快速定位到 ...
- CSS常用选择器名
一.页面结构划分 box 盒子wrap 包裹container 容器 header 头部main 主要区域footer 底部 content 内容区域banner 横幅广告区域menu 菜单 二.模块 ...
- 【WEB前端】CSS常用选择器
1.1 标签选择器 就是用标签名来当做选择器. 1) 所有标签都能够当做选择器,比如body.h1.dl.ul.span等等 2) 不管这个标签藏的多深,都能够被选择上. 3) 选择的是所有的,而不是 ...
- css常用选择器选择器
tap选择器 ulclass选择器 .id选择器 #后代选择器 a b子代选择器 a>b兄弟选择器 a + b 以a为参考给b加样式属性选择器 input [type="text&qu ...
- 学习css常用基本层级伪类属性选择器
常见的css选择器包含:常用选择器.基本选择器.层级选择器.伪类选择器.属性选择器,其中常用选择器分为:1.html选择符*{}//给页面上所有的标签设置模式:2.类选择符.hcls{}//给clas ...
- 23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍
01 复习内容 复习之前的知识点 02演示VS创建元素 03div和span区别 通过display属性进行DIV与Span之间的转换.div->span 设置display:inline ...
- CSS选择器详解(一)常用选择器
目录 类型选择器 类选择器 ID选择器 伪类 伪元素 类型选择器 通过类型选择器可以选择某一类型的html标签,并对其使用样式. 语法: selector {property1: value; pro ...
- HTML&CSS基础-常用选择器
HTML&CSS基础-常用选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> & ...
- 前端面试之CSS常用的选择器!
前端面试之CSS常用的选择器! 标签选择器 <style> /* <!-- 标签选择器 :写上标签名 -->*/ p { color: green; } div { color ...
随机推荐
- 让linux(centos)支持中文文件和文件夹
一.让linux支持中文 1.将Linux的env设置了LANG=en_US.UTF-8: 2.本地的Shell客户端编码也设置成UTF-8,这样让在windows上传到linux的文件或者目录不会出 ...
- jdbc02
分层实现新闻管理系统 1.创建新闻信息实体类,jdbc配置文件以及工具类 public class News { // 新闻信息的实体类 private Integer id; //编号 privat ...
- 手机端input,select屏蔽浏览器默认事件
文本框input:当文本框focus时会弹出软键盘,有时我们需要click事件而又不想触发focus事件(不要弹出软键盘) 给input添加 disabled="disabled" ...
- mongodb的oplog遇到的问题
mongodb调整oplog的大小的方法 关闭当前服务器,将服务器以单机模式启动.这是一种方法,还有没有其他方法? mongodb实时扫描oplog,判断记录到哪个地方了 如果扫描oplog的程序挂掉 ...
- div中英文无法自动换行的解决办法
在一个设定好宽度的div中,当我们输入的中文文字长度超过了设定宽度时,会自动换到下一行. 但是,如果输入的是英文字母,那么,无论你div设定宽度为多少,英文字母都是不换行直接在同一行输出,导致di ...
- pt-query-digest 安装及使用
打个草稿 介绍:pt-query-digest 可用于mysql的慢查询的日志分析,分析统计出每种慢查询的基本信息,如响应时间.最大执行时间.最小执行时间.执行时间的中位数等.(当然不只是这个功能) ...
- 获取subview
通常我们在view层级里面对subView的操作可以通过两种方式:1.保留一个subview的引用,然后在类中通过该引用对该subview进行操作,但是要注意在适当的位置添加内存维护的代码,退出前手动 ...
- PHP FTP
安装 PHP 的 Windows 版本内置了对 FTP 扩展的支持.无需加载任何附加扩展库即可使用 FTP 函数. 然而,如果您运行的是 PHP 的 Linux 版本,在编译 PHP 的时候请添加 - ...
- 转:测试计划(出处:: 51Testing软件测试网--zfx081)
测试计划阶段主要处于测试的先期准备阶段,在该阶段中主要是对将要进行的测试工作做一个整体的规划.包括一下内容: 1.测试目的和测试项目简介. 1.1测试目的:××××系统的测试计划有助于实现一下目标 ...
- jquery mobile页面切换效果(Flip toggle switch)(注:jQuery移动使用的数据属性的列表。 )
1.页面切换(data-transition)