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 ...
随机推荐
- 人工智能2:智能Agent
一.Agent基本定义 基于理性行为的Agent是本书人工智能方法的核心.Agent由传感器.执行器两个重要元件组成,具有与环境交互的能力,其能力是通过分析感知序列,经过Agent函数映射到相应的行动 ...
- int? 类型数据
在数据库操作中,会遇到在int的单元格恰好为NULL值的情况,这个时候我们可以直接判断是否为null然后进行赋值,有人就想那我刚好用一下:?表达式不就好了: ) ? ); 这时候编译器会报错,原因就是 ...
- 《CSS网站布局实录》学习笔记(五)
第五章 CSS内容排版 5.1 文字排版 5.1.1 通栏排版 进行网页通栏排版时,只要直接将段落文字放置于p或者其他对象中,再对段落文字应用间距.行距.字号等样式控制,便形成了排版雏形. 5.1.2 ...
- WEB文件上传下载功能
WEB文件上传下载在日常工作中经常用到的功能 这里用到JS库 http://files.cnblogs.com/meilibao/ajaxupload.3.5.js 上传代码段(HTML) <% ...
- 25 读取jar包内log4j.properties文件方法
//读取log4j日志配置文件 InputStream inputStream=ApplicationExecutor.class.getResourceAsStream("/log4j_h ...
- Java学习笔记(1):注释规范
注释规范 1. 类注释 在每个类前面必须加上类注释,注释模板如下: 2. 属性注释 在每个属性前面必须加上属性注释,注释模板如下: 3. 方法注释 在每个方法前面必须加上方法注释,注释模板 ...
- 自定义窗口 mfc
typedef struct _WNDCLASS { UINT style; //制定窗口的类型 WNDPROC lpfnWndProc; int cbClsExtra; //额外的数值 int cb ...
- Date对象
<script type="text/javascript"> /* 日期对象(Date) */ var date = new Date(); //获取到当前的系统时间 ...
- python 3.5 购物小程序
#!/usr/bin/env python #encoding: utf-8 import time import os nowtime = time.strftime('%Y-%m-%d %H:%M ...
- 推荐IOS开发3个工具:Homebrew、TestFight、Crashlytics-备
1. Homebrew 什么是Homebrew? Homebrew is the easiest and most flexible way to install the UNIX tools App ...