关于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. 人工智能2:智能Agent

    一.Agent基本定义 基于理性行为的Agent是本书人工智能方法的核心.Agent由传感器.执行器两个重要元件组成,具有与环境交互的能力,其能力是通过分析感知序列,经过Agent函数映射到相应的行动 ...

  2. int? 类型数据

    在数据库操作中,会遇到在int的单元格恰好为NULL值的情况,这个时候我们可以直接判断是否为null然后进行赋值,有人就想那我刚好用一下:?表达式不就好了: ) ? ); 这时候编译器会报错,原因就是 ...

  3. 《CSS网站布局实录》学习笔记(五)

    第五章 CSS内容排版 5.1 文字排版 5.1.1 通栏排版 进行网页通栏排版时,只要直接将段落文字放置于p或者其他对象中,再对段落文字应用间距.行距.字号等样式控制,便形成了排版雏形. 5.1.2 ...

  4. WEB文件上传下载功能

    WEB文件上传下载在日常工作中经常用到的功能 这里用到JS库 http://files.cnblogs.com/meilibao/ajaxupload.3.5.js 上传代码段(HTML) <% ...

  5. 25 读取jar包内log4j.properties文件方法

    //读取log4j日志配置文件 InputStream inputStream=ApplicationExecutor.class.getResourceAsStream("/log4j_h ...

  6. Java学习笔记(1):注释规范

    注释规范 1.   类注释 在每个类前面必须加上类注释,注释模板如下: 2.   属性注释 在每个属性前面必须加上属性注释,注释模板如下: 3.   方法注释 在每个方法前面必须加上方法注释,注释模板 ...

  7. 自定义窗口 mfc

    typedef struct _WNDCLASS { UINT style; //制定窗口的类型 WNDPROC lpfnWndProc; int cbClsExtra; //额外的数值 int cb ...

  8. Date对象

    <script type="text/javascript"> /* 日期对象(Date) */ var date = new Date(); //获取到当前的系统时间 ...

  9. python 3.5 购物小程序

    #!/usr/bin/env python #encoding: utf-8 import time import os nowtime = time.strftime('%Y-%m-%d %H:%M ...

  10. 推荐IOS开发3个工具:Homebrew、TestFight、Crashlytics-备

    1. Homebrew 什么是Homebrew? Homebrew is the easiest and most flexible way to install the UNIX tools App ...