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

首先简述六大选择器

基本选择器

　　标签选择器

　　类选择器

　　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. Maven+Spirng+Mybatis+CXF搭建WebService服务

    https://jingyan.baidu.com/article/39810a23b1de2fb637fda66c.html

  2. django 神奇的双下划线，通过外键的三种查询方式

    一,用于跨表操作 只要是object后面字符串都是用双下划线__.其它地方用点. 如:的values中的group_code__name.group_code是一个外键 def list(reques ...

  3. 2、php中字符串单引号好和双引号的区别

    使用单引号和双引号的主要区别是:单引号定义的字符串中出现的变量和转义序列不会被变量的值代替,而双引号中使用变量名会显示该变量的值.

  4. Docker三大核心概念及DockerToolBox安装

    一.核心概念 Docker大部分操作都围绕三大概念——镜像.容器和仓库展开. 1.Docker镜像 Docker镜像类似于虚拟机镜像,可以将它理解为一个只读的模板.镜像是创建Docker容器的基础. ...

  5. Substring方法(C#,JS,Java,SQL)的区别

    C#: substring(第一参数,第二参数)//  第一参数:从第几位开始截,初始是从0位开始  第二参数:截取几位 substring(参数)  如果传入参数为一个长整, 且大于等于0,则以这个 ...

  6. 几种流行Webservice框架

    一. 几个比较流行的Webservice框架: Apache Axis1.Apache Axis2.Codehaus XFire.Apache CXF.Apache Wink.Jboss  RESTE ...

  7. 源码：Java集合源码之：数组与链表（一）

    数组和链表是数据结构中最基本的部分. 数组 在java中,数组定义为一种基本类型,其可以通过下标获取到对应位置的数据.那么这种结构的数据,在内存中是怎么存放的呢? 数组在内存中是一段连续的存储单元,每 ...

  8. vmware中的linux虚拟机配置以nat模式上网，并用xshell连接该虚拟机

    1.  首先确保宿主机上的vmnet8处于启用状态 2.  以管理员身份运行vmware >> 编辑 >> 虚拟机网络编辑器 >> 选中Vmnet8 >> ...

  9. gitea 源码阅读笔记 002 生成无依赖单文件可执行包

    gitea bindata static gitea 可以通过 make generate 生成一个单文件可执行程序, 该文件不需要任何其它依赖,直接可以单独执行. 对于用户的安装.升级和生成dock ...

  10. 换上 SansForgetica-Regular 字体,增加记忆能力

    最近澳大利亚的RMIT(皇家墨尔本理工大学) 搞出来这么个字体,号称能增强记忆,原理是通过难以识别的字体,让人提起精神去识别,从而记忆更深刻. 果断弄了个试试. 安装过程: 下载字体文件 点这里去下载 ...