css3 定义选择器

  引言:CSS样式规则有两个主要部分。选择器决定将格式化应用到哪些元素。声明则定义要应用的格式化。

  • 构造选择器

选择器可以定义五个不同的标准来选择要进行格式化的元素。

  1. 元素的类型或者名称。如下所示。
    h1{color:red;
    }

     

  2. 元素所在的上下文。如下所示。
    h1 em{color:red;
    }

     

  3. 元素的类或ID。如下所示。
    /*类选择器*/
    .error{color:red;  
    }
    /*ID 选择器*/
    #gaudi{color:red;
    }

     

  4. 元素的伪类或伪元素。如下所示。
    a:link{color:red;
    }

     

  5. 元素是否有某些属性和值。如下所示。
    a[title]{color:red  
    }

     

  • 按名称选择元素

选择要格式化的元素,最常见的标准可能是元素的名称。如下所示:

h2{color:red;  
}

按照类型选择要格式化的元素   

  1. 输入selector,其中selector是目标元素的类型名称。
  2. 输入{。
  3. 输入希望应用到选中元素的样式,用属性:值得形式表示。
  4. 输入}结束样式规则。
  • 按类或ID选择元素

元素中标识了class或id,可以在选择器中使用这个标准,从而支队已标识的元素进行格式化。推荐使用类选择器。如下所示:

/*类选择器*/
.error{color:red;  
}
/*ID 选择器*/
#gaudi{color:red;
}

     按类选择要格式化的元素 

  1. 输入.(点号)。
  2. 不加空格,直接输入classname.
  3. 输入{。

  4. 输入希望应用到选中元素的样式,用属性:值得形式表示。

  5. 输入}结束样式规则。

按id选择要格式化的元素

  1. 输入#(井号)。
  2. 不加空格,直接输入id。
  3. 输入{。
  4. 输入希望应用到选中元素的样式,用属性:值得形式表示。
  5. 输入}结束样式规则。
  • 按上下文选择元素

根据元素的祖先、父元素或同胞元素来定位需要格式化的元素。

祖先(ancestor)是包含目标(后代,descendant)元素的任何元素,不管它们之间隔了多少代。

按祖先元素选择要格式化的元素

  1. 输入希望格式化的元素的祖先元素的选择器。
  2. 输入一个空格。
  3. 如果需要,对后续的每个祖先元素重复以上两步。
  4. 输入希望格式化的元素的选择器。
    .architect p{color:red;
    }

     

按父元素选择要格式化的元素

  1. 输入希望格式化的元素的父元素的选择器。
  2. 输入>(大于号)。
  3. 如果需要,对后续每代父元素重复以上两步。
  4. 输入希望格式化的元素的选择器。
    .architect>p{color:red;
    }

     

 

按相邻同胞元素选择要格式化的元素

  1. 输入包含在同一父元素中的、直接出现在目标元素前面的元素选择器。
  2. 输入+(加号)。
  3. 如果需要,对每个后续的同胞元素重复以上两步。
  4. 输入要格式化的元素的选择器。
    .architect p+p{color:red;  
    }

     

 

  • 选择第一个或者最后一个子元素

有时需要选择仅作为某元素第一个或最后一个子元素的元素。需要使用伪类:firsh-child和:last-child。如下:

li:frist-child{color:red;  
}li:last-child{color:red;  
}

选择某元素的第一个或者最后一个子元素进行格式化

  1. 输入代表我们想应用样式的第一个或者最后一个子元素。
  2. 选择第一个子元素输入:first-child。最后一个子元素输入:last-child。 
  • 选择元素的第一个字母或者第一行

分别使用:first-letter和:first-line伪元素只选择元素的第一个字母或第一行。如下:

P:first-letter{color:red;font-size:1.4em;font-weight:bold;      
}p:first-line{color:red;  
}

选择元素的第一个字母

  1. 输入要对其格式化的元素选择器。
  2. 输入:first-letter。 

选择元素的第一行

  1. 输入要对其第一行进行格式化的元素的选择器。
  2. 输入:first-line。 
  • 按状态选择链接元素

CSS允许根据链接的当前状态对他们进行格式化。

按状态选择要格式化的链接元素的步骤

  1. 输入a(a是链接元素的名称)。
  2. 输入:(冒号),前后都没有空格。
  3. 完成第2步后,执行下列操作影响链接状态。
  4. 输入link以设置从未被激活或指向,当前页没有被激活或指向的链接的外观。
  5. 输入visited以设置访问者已激活过链接的外观。
  6. 输入focus,前提是链接是通过键盘选择并已准备好激活的。
  7. 输入hover以设置光标指向链接时链接的外观。
  8. 输入active以设置激活过的链接的外观。
    /*未访问过*/
    a:link{color:red;  
    }
    /*访问过的链接*/
    a:visited{color:orange;  
    }
    /*链接获取焦点*/
    a:focus{color:purple;  
    }
    /*光标停留在连接上*/
    a:hover{color:green;  
    }
    /*激活链接时*/
    a:active{color:blue;  
    }

    一定要按照以下的顺序定义规则:link、visited、focus、hover、active(缩写为LVFHA)。

  • 按属性选择元素

对给定属性或属性值的元素进行格式化。例如:

p[class]{color:red;  
}

 按属性选择要格式化的元素

  1. 输入要考察其属性的元素的选择器。
  2. 输入[。
  3. 输入选择元素需要考察的属性的名称。
  4. 根据需要输入属性的匹配符号和匹配值。
  5. 输入。如果想要为元素指定其他属性或者属性值。重复2-4步骤。
属性选择器参考表
选择器属性值
[attribute]匹配指定属性,不论具体指是什么。
[attribute="value"]完全匹配指定属性值。
[attribute~="value"]属性值是以空格分隔的多个单词,其中有一个完全匹配指定值。
[attribute|="value"]属性值以value-打头。
[attribute^="value"]属性值以value开头,value为完成的单词或单词的一部分。
[attribute$="value"]属性值以value结尾,value为完整的单词或单词的一部分。
[attribute*="value"]属性值为指定值的子字符串。
/*选择rel属性值等于external的a元素*/
a[rel="external"]{color:red;          
}/*配置以空格相隔的多个单词中的一个*/
article[class~="barcelona"]{color:red;  
}/*这个选择器也能匹配,因为这个选择器匹配部分字符串*/
article[class*="barcelona"]{color:red;  
}/*选择任何带有lang属性且属性值以es开头的h2*/
h2[lang|="es"]{color:red;  
}/*选择任何带有lang属性且属性值以es开头的元素*/
*[lang|="es"]{color:red;  
}/*选择既有href属性,又有任意是属性值包含单词howdy的title属性的a元素*/
a[href][title~="howdy"]{color:red;  
}/*选择既有href属性,又有任意属性值包含how的title属性的a元素*/
a[href][title*="how"]{color:red;  
}/*匹配href属性值以http://开头的a元素*/
a[href^="http://"]{color:red;  
}/*匹配任何src属性值完全等于logo.png的img元素*/
img[src="logo.png"]{border:1px solid green;  
}/*匹配任何src属性值以.png结尾的img元素*/
img[src$=".png"]{border:1px solid green;  
}
  • 指定元素组

对于使用相同样式规则的多个元素,可以使用元素组设置样式规则。

将样式应用于元素组的步骤

  1. 输入第一个元素名称。
  2. 输入,(逗号)。
  3. 输入第二个元素名称。
  4. 对其他元素重复第二和第三步。
    h1,
    h2{color:red;  
    }

     

  • 组合使用选择器

现实中常常需要组合使用以上技术,才能找到要格式化的元素。如:

/*选择em元素,包含在p元素中,这样的p元素是lang属性值以es开头的h2元素的直接相邻同胞元素,且class等于project的任何元素的子元素*/
.project h2[lang|="es"]+p em{color:red;  
}

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/459092.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

J2SE核心实战开发—— 集合类框架

文档都是基于 实验楼 线上环境制作的,因此文档叙述和截图均与其有关。使用其他实验环境也没有太大影响,知识点的操作是类似的。该系列的课程是在 实验楼 实习所原创的第一个课程,欢迎大家多提意见。 一、实验简介 在Java基础语法中&#xff0…

猫和老鼠java下载安装_tomcat(Java服务器)

Tomcat(Java服务器工具)是一款十分优质的Java服务器软件。在中小型系统和并发访问用户不是很多的场合下被普遍使用,是开发和调试JSP 程序的首选。对于一个初学者来说,可以这样认为,当在一台机器上配置好Apache 服务器,可利用它响应…

管道通信

*************************************************** 更多精彩,欢迎进入:http://shop115376623.taobao.com *************************************************** 什么是管道? 管道是单向的、先进先出的,它把一个进程的输出和另…

Linux 终端下 dstat 监控工具

dstat 是一个可以取代vmstat,iostat,netstat和ifstat这些命令的多功能产品。dstat克服了这些命令的局限并增加了一些另外的功能,增加了监控项,也变得更灵活了。dstat可以很方便监控系统运行状况并用于基准测试和排除故障。dstat可…

运用HTML5+CSS3和CSS滤镜做的精美的登录界面

原始出处http://chenjinfei.blog.51cto.com/2965201/774865<!DOCTYPE HTML> <html> <head> <meta http-equiv"Content-Type" content"text/html; charsetgb2312"> <meta http-equiv"description" content"运用C…

MyEclipse使用总结——MyEclipse文件查找技巧 ctrl+shift+R ctrl+H

一、查找文件 使用快捷键【ctrlshiftR】弹出弹出文件查找框&#xff0c;如下图所示&#xff1a; 二、查找包含某个字符串的文件 使用快捷键【ctrlH】在弹出对话框中选File Search选项&#xff0c;然后在第一个文本框中粘贴&#xff08;我一般用粘贴&#xff09;或自已手动录入&…

java实现控件绑定数据源_控件(三)——TreeView控件以XmlDataSource控件为数据源实现简单的绑定...

TreeView控件功能非常强大&#xff0c;今天&#xff0c;我们只是窥其一角。我们实现的例子是&#xff1a;TreeView控件与XmlDataSource控件绑定&#xff0c;然后在网页显示选中项。首先我们添加一个xml&#xff0c;取名为tv.xml。在其中写上如下代码&#xff1a;这时我们在defa…

手机屏幕原理和设计(触摸屏幕)

//本文参考了很多百度百科的知识  随着android手机的流行&#xff0c;手机触摸屏成为一个时尚。再购机的时候&#xff0c;就会有很多人去问手机的触屏是电阻式的还是电容式的呢&#xff1f;但是其实很多人应该是不知道个中的原委的。只是一个感觉电容式的一定要比电阻式的好。…

extjs5(05--主界面上加入顶部和底部区域)

这一节为主界面加一个顶部区域和底部区域。一个管理系统的界面可以粗分为顶部标题部分、中间数据展示和处理的部分、底部备注和状态部分。 在增加这二个区域之前&#xff0c;我们先在MainModel.js中加入一些数据。 1 Ext.define(app.view.main.MainModel, {2 extend: Ext.a…

java mongo 查询数组_MongoDB查询(数组、内嵌文档)

一、简介我们上一篇介绍了db.collection.find()可以实现根据条件查询和指定使用投影运算符返回的字段省略此参数返回匹配文档中的所有字段&#xff0c;我们今天介绍了对数组和内嵌文档的查询操作&#xff0c;尤其是对$elemMatch 同样可以用在find方法的第二个参数来限制返回数组…

手机触摸屏的分类和原理,供大家选择手机时用

转载自&#xff1a;http://www.51testing.com/?uid-144635-action-viewspace-itemid-216296 必大家很关心的一个问题就是手机的触摸屏寿命是多少吧&#xff01;还有就是到底是电阻式触摸屏&#xff08;诺基亚的&#xff09;好还是电容式触摸屏&#xff08;iPhone等&#xff09…

Java类初始化顺序

jvm系列垃圾回收基础JVM的编译策略GC的三大基础算法GC的三大高级算法GC策略的评价指标JVM信息查看GC通用日志解读jvm的card table数据结构Java类初始化顺序Java对象结构及大小计算Java的类加载机制Java对象分配简要流程年老代过大有什么影响Survivor空间溢出实例关于Objectnull…

Actionbarsherlock Demo 浅析 :Overlay

让Actionbar处于覆盖模式&#xff0c;当Activity需要显示大量滚动的内容&#xff0c;尤其是包含图片内容的时候&#xff0c;Overlay模式非常有效。 requestWindowFeature(Window.FEATURE_ACTION_BAR_OVERLAY);//将Actionbar设置为Overlay模式。 getSupportActionBar().setBackg…

java中 怎么获取bean_java普通类如何得到spring中的bean类

在SSH集成的前提下。某些情况我们需要在Action以外的类中来获得Spring所管理的Service对象。之前我在网上找了好几好久都没有找到合适的方法。例如&#xff1a;ApplicationContext context new ClassPathXmlApplicationContext();当时我觉得没有这个必要&#xff0c;浪费内存。…

浅析C#中构建多线程应用程序

*************************************************** 更多精彩&#xff0c;欢迎进入&#xff1a;http://shop115376623.taobao.com *************************************************** 引言 1.理解多线程 2. 线程异步与线程同步 3.创建多线程应用程序 3.1通过System.Threa…

58同城高性能移动Push推送平台架构演进之路

2019独角兽企业重金招聘Python工程师标准>>> 本文详细讲述58同城高性能移动Push推送平台架构演进的三个阶段&#xff0c;并介绍了什么是移动Push推送&#xff0c;为什么需要&#xff0c;原理和方案对比&#xff1b;移动Push推送第一阶段&#xff08;单平台&#xff…

Android Studio 插件

https://plugins.jetbrains.com/?androidstudio转载于:https://www.cnblogs.com/xiaoyao095/p/4712552.html

resin指定java版本_resin的几个常用配置

本文着重介绍resin的几个常用配置注&#xff1a;1. 本文并非resin.conf的使用说明&#xff0c;只是从实用角度出发&#xff0c;按需分析常用的配置。更多的内容到官网学习吧&#xff1b;2. 基于resin3.x的探讨。(友情提示&#xff1a;刚下载的resin中&#xff0c;resin.conf里的…

Android生命周期函数执行顺序

转载自&#xff1a;http://blog.csdn.net/intheair100/article/details/39061473 程序正常启动&#xff1a;onCreate()->onStart()->onResume(); onCreate之后就会执行onStart,此时画面已经显示出来了&#xff0c;但还不能交互&#xff1b;然后执行onResume,此时可以与用…

hdoj-2028-Lowest common multiple plus

题目&#xff1a;Lowest common multiple plus 代码&#xff1a; #include<stdio.h> int common(int a,int b)//计算最大公约数 {int ca%b,t0;if(b>a){tb;ba;at;}while(a%b!0){ca%b;ab;bc;}return b; } int q[105]; int main() {int n,i,j,t0;while(scanf("%d&qu…