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

首先简述六大选择器

基本选择器

　　标签选择器

　　类选择器

　　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. DataSource - 常用数据库连接池 (DBCP、c3p0、Druid) 配置说明

    1. 引言 1.1 定义 数据库连接是一种关键的有限的昂贵的资源,这一点在多用户的网页应用程序中体现得尤为突出.对数据库连接的管理能显著影响到整个应用程序的伸缩性和健壮性,影响到程序的性能指标.数据库 ...

  2. TCP/IP学习20180701-数据链路层-IP子网寻址

    IP-子网寻址IP地址是:网络号+主机号现在主机号都要求有子网号所以IP地址就变成了网络号+子网号+主机号例如一个B类地址:210.30.109.134210.30是网络号109是子网号134是主机号 ...

  3. php 7 event 安装

    有效安排I/O,时间和信号的扩展 使用可用于特定平台的最佳I/O通知机制的事件,是PHP基础设施的libevent端口. 下载地址:http://pecl.php.net/package/event ...

  4. CentOS7和CentOS6怎样开启MySQL远程访问

    CentOS6开启MySQL远程访问 1.开放MySQL访问端口3306 修改防火墙配置文件 vi /etc/sysconfig/iptables  加入端口配置      -A INPUT -m s ...

  5. C/C++中的volatile简单描述

    首先引入一篇博客: 1. 为什么用volatile? C/C++ 中的 volatile 关键字和 const 对应,用来修饰变量,通常用于建立语言级别的 memory barrier.这是 BS 在 ...

  6. 读写txt

    FileStream fileStr = new FileStream("shaftCofig.txt", FileMode.OpenOrCreate); StreamReader ...

  7. NodeJS学习之win10安装与sublime配置

    Window 上安装Node.js Node.js安装包及源码下载地址为:https://nodejs.org/en/download/ 下载安装就行了,安装node会同时安装npm. sublime ...

  8. 【亲测】在网页上查找接口，Network--XHR，出来的每个Name都是后台的一个接口

  9. PHP生成HTML静态页面。

    function Generate(){ $html = '<!DOCTYPE html><html lang="en"><head> < ...

  10. idea搭spring boot项目

    Spring Boot是由Pivotal团队提供的全新框架,设计目的是用来简化新Spring应用的初始搭建以及开发过程.它主要推崇的是'消灭配置’,实现零配置. 那么,如何在idea中创建一个spri ...