选择器：选择器是一种模式，用于选择需要添加样式的元素。

首先简述六大选择器

基本选择器

　　标签选择器

　　类选择器

　　ID选择器

高级选择器

　　层次选择器

　　结构伪类选择器

　　属性选择器

其中基本选择器与层次选择器较为常用。

一.基本选择器

　　1.标签选择器

　　使用HTML标签来设置标签内的图文样式。

　　2.类选择器

　　使用class属性定义标签类值，指定某一类属性值来定义其样式。

　　 <h1 class=”classname”></h1>

　　 .classname{font-size:18px;}

　　3.ID选择器

　　给特定标签赋一个独有的id值，一个html文档里不能够有重复的id值。可以准确定位到标签。

　　 <header id=”idname”></header>

　　 #idname{font-size:18px;}

基本选择器代码介绍：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>CSS选择器</title>

     <link rel="stylesheet" type="text/css" href="../css/demo03.css"/>

 </head>

 <body>

 <h1>信息表格填写</h1>

 <hr/>

     <form>

         <h3>账户信息</h3>

         <p id="id1">姓&nbsp;&nbsp;名：<input type="text" name="uname"/></p>

         <p class="intro">Email：<input type="email" name="myemail"/></p>

         <h3>隐私信息</h3>

         <p id="id2">手机号：<input type="number" name="phone"></p>

         <p class="intro">密&nbsp;&nbsp;&nbsp;码：<input type="password" name="pass"></p>

         <p><input type="submit" value="提交"></p>

     </form>

 </body>

 </html>

demo03.css代码：

 h1{color:red;}/*这是标签选择器*/

 .intro{color:green;} /*这是类选择器*/

 #id1{color: #E864D1;}

 #id2{color: #A03200;}/*这是ID选择器*/

运行效果图：

二.高级选择器

　　1.层次选择器

 
选择器 类型 功能描述
E F 后代选了器 选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内
E>F 子选择器 选择匹配的F元素，且匹配的F元素是匹配的F元素的子元素
E+F 相邻兄弟选择器 选择匹配的F元素，且匹配的F元素紧位于匹配的E元素的后面
E~F 通用兄弟选择器 选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素

　

　　2.结构伪类选择器

 
选择器 功能描述
E：first-child 作为父元素的第一个子元素的元素E
E：last-child 作为父元素的最后一个子元素的元素E
E F：nth-child(n) 选择父级元素E的第n个子元素F，（n可以是1,2,3）关键字为even，odd
E:first-of-type 选择父元素内具有指定类型的第一个E元素
E：last-of-type 选择父元素内具有指定类型的最后一个E元素
E F：nth-of-type(n) 选择父元素内具有指定类型的第n个F元素

　

　

使用E F：nth-child(n)和E F:nth-of-type(n)的关键点：

　　E F:nth-child(n)在父级里从第一个元素开始查找不分类型。

　　E F:nth-of-type(n)在父级里先看类型，再看位置。

　　3.属性选择器

 
属性选择器 功能描述
E[attr] 选择匹配具有属性attr的E元素
E[attr=val] 选择匹配具有属性attr的E元素，并且属性值为val（其中val区分大小写）
E[attr^=val] 选择匹配元素E，且E元素定义了属性attr,其属性值是以val开头的任意字符串
E[attr$=val] 选择匹配元素E，且E元素定义了属attr，其属性值是以val结尾的任意字符串
E[attr*=val] 选择匹配元素E，且E元素定义了属性attr，其属性值包含了“val”，换句话说，字符串val与属性值中的任意位置相匹配

CSS的六大选择器的更多相关文章

  1. CSS伪类选择器

    一.CSS伪类选择器用于给某些选择器添加效果语法规则:选择器:伪选择器例:a:link {color: #FF0000} 未访问的链接 a:visited {color: #00FF00} 已访问的链 ...

  2. Lining.js - 为CSS提供 ::nth-Line 选择器功能

    在CSS中,我们使用 ::first-line 选择器来给元素第一行内容应用样式.但目前还没有像 ::nth-line.::nth-last-line 甚至 ::last-line 这样的选择器.实际 ...

  3. CSS 子元素选择器与后代选择器区别实例讲解

    css子元素选择器和后代选择器在功能描述上非常相同,但是他们其实是有区别的,本文章通过两个简单的实例向大家介绍子元素选择器与后代选择器的区别,需要的朋友可以参考一下. 首先我们来了解一下子元素选择器与 ...

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

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

  5. CSS的总结(选择器,伪类等...)

    关于组合选择器可参考:http://www.cnblogs.com/starof/p/4453458.html 主要内容 CSS概述 CSS和HTML结合的四种方式 CSS样式优先级和代码规范 CSS ...

  6. 关于CSS伪类选择器

    #CSS伪类选择器 ##使用css伪类选择器需要注意的 使用css的伪类选择器来选择某元素时,需要特别注意 :first-child 和 :nth-child(n) 等时, 网页渲染是从语句的后面开始 ...

  7. CSS之后代选择器与多类选择器

    <新人报到,欢迎拍砖#- -> 一.后代选择器 说起CSS的后代选择器.它属于派生选择器中的一种,两者附属关系如下: -->派生选择器 ----CSS 后代选择器 ----CSS 子 ...

  8. jQuery的hover方法搭配css的hover选择器，实现选中元素突出显示

    问题简述: 今天做帮一个师姐做网页遇到一个这样的要求: 鼠标不移动进表格,表格透明度不变. 鼠标移动进表格,hover到的单元格透明度不变,没hover到的单元格透明度改变. 先贴我已经实现好的效果, ...

  9. css的各种选择器

    一.基本选择器 1. * 通用元素选择器,匹配任何元素 2. E 标签选择器,匹配所有使用E标签的元素 3. .info class选择器,匹配所有class属性中包含info的元素 4. #foot ...

随机推荐

  1. spring boot通过Interceptor和HandlerMethodReturnValueHandler实现统一处理为controller返回对象统计处理时间

    思路:实现思路都是基于Aop实现,方式上可以通过spring aop和spring mvc的aop机制都能实现. 通过Interceptor的可以实现为controller插入开始时间和执行结束时间, ...

  2. windows server系统查看tomcat版本

    线上服务器系统是windows server版本,由于tomcat进行了apache httpd集群,所以对tomcat进行了统一编号: 在jprofiler中需要监听一个server实例,需要先搞清 ...

  3. java中拼接两个对象集合

    目标:  根据两个list中每条记录的某个属性是否相同来拼接. 1.首先定义一个字符串 String str = "[{\"ITEMID\":2,\"ITEMN ...

  4. 基于CentOS搭建个人Leanote云笔记本

    Leanote 依赖 MongoDB 作为数据存储,下面开始安装MongoDB: 1. 下载启动 MongoDB 下载 MongoDB 进入 /home 目录,并下载 MongoDB: cd /hom ...

  5. 内训--2小时 Word精髓

    企业内部使用Word最常见就是用来写产品手册与合同,产品手册是书版(即可以出版,与买到的书类似),合同重点是修订.Word的精髓在于样式,或者说在企业办公使用,学会样式就可以了.什么域.宏.VBA几乎 ...

  6. POJ3259 Wormholes

    Description While exploring his many farms, Farmer John has discovered a number of amazing wormholes ...

  7. mybatis入门篇：通过SqlSession.selectList进行数据查询

    作为一个java菜鸟,早就从慕课网中学到一些基本的mybatis的用法,但是一直不成体系,懵懵懂懂,既然正式入了java这个坑,就打算好好学学,所以买了本<MyBatis从入门到精通>,在 ...

  8. Redis管理：安全/耗时命令日志与命令监控/数据库管理工具

    1.安全管理 1)绑定指定IP Redis的安全设计是在“Redis运行在可信环境”这个前提之下的,在生产环境中建议通过应用程序连接Redis.Redis可以配置只接受来自指定IP的的请求,可通过修改 ...

  9. RobotFramework - AppiumLibrary 之元素定位

    一.介绍 AppiumLibrary 是 Robot Framework 的App测试库. 它使用Appium 与Android 和 iOS应用程序进行通信,类似于Selenium WebDriver ...

  10. Android Room 学习（一）

    Room简介 Room persistence库为SQLite提供了一个抽象层,以便在利用SQLite的全部功能的同时实现更强大的数据库访问. 该库可帮助您在运行应用程序的设备上创建应用程序数据的缓存 ...