我的进阶--css3 第一章 选择器

css选择器

  属性选择器

    E[attr]:只使用属性名,但没有确定任何属性值;
    E[attr="value"]:指定属性名,并指定了该属性的属性值;
    E[attr~="value"]:指定属性名,并且具有属性值,此属性值是一个词列表,并且以空格隔 开,其中词列表中包含了一个value词,而且等号前面的“~”不能不写;
    E[attr^="value"]:指定了属性名,并且有属性值,属性值是以value开头的;
    E[attr$="value"]:指定了属性名,并且有属性值,而且属性值是以value结束的;
    E[attr*="value"]:指定了属性名,并且有属性值,而且属值中包含了value;
    E[attr|="value"]:指定了属性名,并且属性值是value或者以“value-”开头的值(比如说zh-cn);

    注意:以上标红的选择器的属性值必须是独立的单词。例如 [title~=test] 中 test a可以被选中testa不能被选中.

  伪类选择器

    :link 伪类向未访问的链接添加特殊的样式。
    :visited 伪类向已访问的链接添加特殊的样式。
    :hover 伪类在鼠标移到元素上时向此元素添加特殊的样式。
    :active 伪类向激活(在鼠标点击与释放之间发生的事件)的元素添加特殊的样式。

    注意:这四个如果同时使用,则需要注意应用的顺序!

  结构性伪类选择器

    :root选择器用匹配文档的根元素。
    :not(selector) 选择器匹配非指定元素/选择器的每个元素。
    :empty 选择器匹配没有子元素(包括文本节点)的每个元素。
    :target 选择器可用于选取当前活动的目标元素。
      URL 带有后面跟有锚名称 #,指向文档内某个具体的元素。这个被 链接的元素就是目标元素(target element)。

    :first-child 选择器用于选取属于其父元素的首个子元素的指定选择器。
    :last-child 选择器匹配属于其父元素的最后一个子元素的每个元素。
    :only-child 选择器匹配属于其父元素的唯一子元素的每个元素。

    E:nth-child(n) 选择器匹配属于其父元素的第n个子元素,并且这个元素还得是E元素;
    E:nth-last-child(n) 选择器匹配属于其元素的第n个子元素的每个元素,并且这个元素还得是E元素,从最后一个子元素开始计数。

:    nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.
    :nth-last-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素,从最后一个子元素开始计数

  UI元素状态伪类选择器(表单专用)

    :focus 选择器用于选取获得焦点的元素。
    :enabled选择器被用来指定当元素处于可用状态时的样式。
    :disabled选择器被用来指定当元素处于不可用状态时的样式。

    :read-only选择器被用来指定当元素处于只读状态时的样式。
    :read-write 选择器用于匹配可读及可写的元素。

    :checked伪类选择器用来指定当表单中的radio单选框或者是checkbox复选框处于选取状态时的样式。
    :default选择器用来指定当页面打开时默认处于选取状态的单选框或复选框的控件的样式。
    :indeterminate选择器用来指定当页面打开时,一组单选框中没有任何一个单选框被设定为选中状态时,整组单选框的样式。

    ::selection伪类选择器用来指定当元素处于选中状态时的样式。

  伪元素选择器

    :first-line 选择器用于选取指定选择器的首行。
    :first-letter:为某个元素中的文字的首字母或第一个字使用样式;
    :before:在某个元素之前插入一些内容;(请使用 content 属性来指定要插入的内容。)
    :after: 在某个元素之后插入一些内容;(请使用 content 属性来指定要插入的内容。)
    Content 属性:需要与上面俩个配合使用!

谨记当初奋斗的自己,是他让现在的自己,享受美好,                                           敬给还在奋斗的你们,望与君共勉.

时间: 2024-10-18 05:30:04

我的进阶--css3 第一章 选择器的相关文章

html5 +css3 第一章学习和笔记

各位同学.身为本版的斑竹.,希望各位童鞋都能学到Html5 .特此没两天更新一个学习笔记和大家一起学习Html5.... 语法改变       1.新增的元素和废除的元素       2.新增的属性和废除的属性       3.全局属性 html5和4的区别:DOCTYPE.声明.内容类型.字符的编码的制定方法.元素标记的省略.布尔值的类型.引号的省略 一:html5中的标记方法        1内容类型:.html  .htm        2DOCTYPE声明: <!DOCTYPE html

《图解CSS3——第一章 揭开CSS3的面纱》

第一章 揭开CSS3的面纱 如果关注前端方面的技术,那么对CSS一定不会陌生,你肯定听说过CSS3.在使用CSS3之前,应该对这个新一代语言样式表语言的来龙去脉有个基本了解. 1.1 什么是CSS3 CSS3并不是一门新的语言.如果接触过CSS就知道,CSS是创建网页的另一个独立但并非不重要的一部分.CSS是种层叠样式表,是一种样式语言,用来告诉浏览器如何渲染你的web页面. CSS3是CSS规范的最新版本 1.1.1 CSS3的新特性 CSS3新特性非常多,这里挑选一些被浏览器支持较为完美.更

我的进阶--css3 第二章 为了移动端

meta 当服务器向浏览器发送文档时,会先发送许多名称/值对.虽然有些服务器会发送许多这种名称/值对,但是所有服务器都至少要发送一个:content-type:text/html.这将告诉浏览器准备接受一个 HTML 文档. meta 之http-equiv http-equiv 属性为名称/值对提供了名称.顾名思义,相当于http的文件头作用,他可以向浏览器传回一些有用的信息,以帮助正确和精确地显示网页内容,与之对应的属性值为content,content的内容其实就是各个参数的变量值. re

perl进阶中文版 第一章 介绍

翻译尊重原版,以自己的方式最大化地阐述原版内容. 更多内容请访问www.from0701.com.每周更新两章. 欢迎来到perl学习的下一阶段.你来这儿的理由可能是你想编写100行以上的代码或者仅仅是你的老板要求你这么做. 我们的<perl语言入门>如此伟大是因为他介绍了如何用perl编写中小型程序(在我们看来,这是perl最普遍的用途).但是为了不让我们的“小骆驼书”太厚重,我们有意并且小心地移除了很多内容. 接下来,我们将用和小骆驼书一样的风格去继续我们的故事.这儿包含了编写100-10

CSS3秘笈复习:第一章&amp;第二章&amp;第三章

第一章: 1.<cite>标签不仅可以将网页设置为斜体,还能给标题做上标记,使它便于被搜索引擎搜索到. 第二章: 1.import指令链接样式表: CSS本身有一种添加外部样式的方法:@import指令.把这个指令添加到一个HTML的<style>标签中,像这样: <style> @import url(css/styles.css); </style> 要将所有@import行都放在CSS规则之前. 第三章: 1.类选择器命名只允许使用字母数字连字符(-)

The Book of CSS3 中文版 第一章:介绍CSS3

在这一章,为了展示本书所用的代码约定我会介绍一些新的CSS3属性,但在此之前我想简要说明下CSS3的历史.很想然你不需要为了使用CSS3去了解它的历史,但是我认为有一些关于CSS3当前状态的背景是很重要的. CSS3是一个在变化的规范.规范的一部分被认为是稳定的并且在现代浏览器中得到了很好的实现:规范的另一部分应当作实验性的并且被部分地不同程度的实现:还有一部分则仍然是理论上的提议,并且没有得到任何实现.一些浏览器创建了它们自己的CSS属性,这些属性不属于任何CSS3规范也许将来也不会添加进去.

CSS3伪类选择器详解

前面花了两节内容分别在<CSS3基本选择器>和<CSS3属性选择器详解>介绍了CSS3选择器中的基本选择器和属性选择器使用方法,今天要和大家一起学习CSS3选择器中的第三部分,也是最后一部分——伪类选择器.伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了,因为这些在平时中是常用到的伪类选择器,那么先和大家一起简单总结一下CSS中常用的伪类选择器的使用方法,最后把重心放到CSS3新增加的":nth-child"选择器的使用方法.

iOS 读书笔记 第一章

1.确定某个实例或类方法是否可用. 1)使用NSObject的类方法instancesRespondToSelector:来确定是否在该类的一个实例中存在一个特定的选择器. NSArray *array = @[@"1",@"2"]; if ([NSArray instancesRespondToSelector:@selector(sortUsingComparator:)]) { //do something use sortUsingComparator: }

Pro ASP.NET Core MVC 第6版 第一章

第一章 ASP.NET Core MVC 的前世今生 ASP.NET Core MVC 是一个微软公司开发的Web应用程序开发框架,它结合了MVC架构的高效性和简洁性,敏捷开发的思想和技术,和.NET 平台的最好的部分.在本章,我们将学习为什么微软创建ASP.NET Core MVC, 看看他和他的前辈的比较以及和其他类似框架的比较,最后,大概讲一下ASP.NET core MVC里面有什么新东西,还有本书中包括哪些内容. 了解ASP.NET Core MVC的历史 最开始的ASP.NET 诞生