关于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常用选择器的更多相关文章

  1. CSS常用选择器的认识

    ---恢复内容开始--- 前言:在CSS中选择器的种类有很多很多,但是在实际的工作中,我们经常会用到的分为两大类:基础选择器和复合选择器这两个大类,学习选择器的目的就是为了在复杂的页面中能够快速定位到 ...

  2. CSS常用选择器名

    一.页面结构划分 box 盒子wrap 包裹container 容器 header 头部main 主要区域footer 底部 content 内容区域banner 横幅广告区域menu 菜单 二.模块 ...

  3. 【WEB前端】CSS常用选择器

    1.1 标签选择器 就是用标签名来当做选择器. 1) 所有标签都能够当做选择器,比如body.h1.dl.ul.span等等 2) 不管这个标签藏的多深,都能够被选择上. 3) 选择的是所有的,而不是 ...

  4. css常用选择器选择器

    tap选择器 ulclass选择器 .id选择器 #后代选择器 a b子代选择器 a>b兄弟选择器 a + b 以a为参考给b加样式属性选择器 input [type="text&qu ...

  5. 学习css常用基本层级伪类属性选择器

    常见的css选择器包含:常用选择器.基本选择器.层级选择器.伪类选择器.属性选择器,其中常用选择器分为:1.html选择符*{}//给页面上所有的标签设置模式:2.类选择符.hcls{}//给clas ...

  6. 23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍

    01 复习内容 复习之前的知识点 02演示VS创建元素 03div和span区别 通过display属性进行DIV与Span之间的转换.div->span 设置display:inline   ...

  7. CSS选择器详解(一)常用选择器

    目录 类型选择器 类选择器 ID选择器 伪类 伪元素 类型选择器 通过类型选择器可以选择某一类型的html标签,并对其使用样式. 语法: selector {property1: value; pro ...

  8. HTML&CSS基础-常用选择器

    HTML&CSS基础-常用选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> & ...

  9. 前端面试之CSS常用的选择器!

    前端面试之CSS常用的选择器! 标签选择器 <style> /* <!-- 标签选择器 :写上标签名 -->*/ p { color: green; } div { color ...

随机推荐

  1. 让linux(centos)支持中文文件和文件夹

    一.让linux支持中文 1.将Linux的env设置了LANG=en_US.UTF-8: 2.本地的Shell客户端编码也设置成UTF-8,这样让在windows上传到linux的文件或者目录不会出 ...

  2. jdbc02

    分层实现新闻管理系统 1.创建新闻信息实体类,jdbc配置文件以及工具类 public class News { // 新闻信息的实体类 private Integer id; //编号 privat ...

  3. 手机端input,select屏蔽浏览器默认事件

    文本框input:当文本框focus时会弹出软键盘,有时我们需要click事件而又不想触发focus事件(不要弹出软键盘) 给input添加 disabled="disabled" ...

  4. mongodb的oplog遇到的问题

    mongodb调整oplog的大小的方法 关闭当前服务器,将服务器以单机模式启动.这是一种方法,还有没有其他方法? mongodb实时扫描oplog,判断记录到哪个地方了 如果扫描oplog的程序挂掉 ...

  5. div中英文无法自动换行的解决办法

    在一个设定好宽度的div中,当我们输入的中文文字长度超过了设定宽度时,会自动换到下一行.   但是,如果输入的是英文字母,那么,无论你div设定宽度为多少,英文字母都是不换行直接在同一行输出,导致di ...

  6. pt-query-digest 安装及使用

    打个草稿 介绍:pt-query-digest 可用于mysql的慢查询的日志分析,分析统计出每种慢查询的基本信息,如响应时间.最大执行时间.最小执行时间.执行时间的中位数等.(当然不只是这个功能) ...

  7. 获取subview

    通常我们在view层级里面对subView的操作可以通过两种方式:1.保留一个subview的引用,然后在类中通过该引用对该subview进行操作,但是要注意在适当的位置添加内存维护的代码,退出前手动 ...

  8. PHP FTP

    安装 PHP 的 Windows 版本内置了对 FTP 扩展的支持.无需加载任何附加扩展库即可使用 FTP 函数. 然而,如果您运行的是 PHP 的 Linux 版本,在编译 PHP 的时候请添加 - ...

  9. 转:测试计划(出处:: 51Testing软件测试网--zfx081)

    测试计划阶段主要处于测试的先期准备阶段,在该阶段中主要是对将要进行的测试工作做一个整体的规划.包括一下内容:   1.测试目的和测试项目简介. 1.1测试目的:××××系统的测试计划有助于实现一下目标 ...

  10. jquery mobile页面切换效果(Flip toggle switch)(注:jQuery移动使用的数据属性的列表。 )

    1.页面切换(data-transition)