CSS选择器复习

通用选择器：* 选择到全部的元素

选择子元素：> 选择到元素的直接后代(第一级子元素)

相邻兄弟选择器：+ 选择到紧随目标元素后的第一个元素

普通兄弟选择器：~ 选择到紧随其后的全部兄弟元素

伪元素选择器：

::first-line 匹配文本块的首行

::first-letter 选择文本块的首字母

伪类选择器：

:before, :after在元素内容前面、后面加入内容(相当于行内元素)

CSS3结构选择器

:nth-child 选择指定索引处的子元素

nth-child(n) 父元素下的第n个子元素

nth-child(odd) 奇数子元素(同nth-child(2n-1))

nth-child(even) 偶数子元素(同nth-child(2n))

nth-child(an+b) 公式

(nth-child从1開始)

:nth-last-child(n) 倒数第n个子元素

:nth-of-type(n) 父元素下的第n个指定类型的子元素

:nth-last-of-type 父元素下的倒数第n个指定类型的子元素

:first-child 选择父元素下的第一个子元素

:last-child 选择父元素下的最后一个子元素

:only-child 选择父元素下唯一的子元素

:only-of-type 选择父元素下指定类型的唯一子元素

:root 选择文档的根文件夹。返回html

div :only-child注意空格（选中div下唯一的子元素）

伪类选择器

:link指向未被訪问页面的链接设置样式

:visited设置指向已訪问页面的链接的样式

:hover鼠标悬停时触发

:active在点击时触发

:enabled 选择启用状态元素

:disabled 选择禁用状态元素

:checked 选择被选中的input元素（单选button或复选框）

:default 选择默认元素

:valid、invalid 依据输入验证选择有效或无效的input元素

:in-range、out-of-range 选择指定范围之内或者之外受限的元素

:repuired、optional 依据是否同意:required属性选择input元素



假设将link的颜色设置的与visited同样。则页面打开时，link的样式被visited样式覆盖，如上，a标签显示的字体颜色为绿色。

可是假设设置为不同的属性，能够呈现出叠加的效果。



点击a标签时。字体的颜色为黄色。

利用label改动radio的样式：例如以下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="Keywords" content="关键词一。关键词二">

    <meta name="Description" content="站点描写叙述内容">

    <meta name="Author" content="刘艳">

    <title></title>

    <style>

        input[type="radio"]{display: none;}

        label{display: inline-block;width: 24px;height: 24px;

            border-radius: 50%;border: 1px solid #ccc;margin: 5px;}

        :checked + label{background: #00b3ee;}

    </style>

</head>

<body>

    <input type="radio" name = "fruit" id = "check1"/>

    <label for="check1"></label>

    <input type="radio" name = "fruit" id = "check2"/>

    <label for="check2"></label>

    <input type="radio" name = "fruit" id = "check3"/>

    <label for="check3"></label>

    <input type="radio" name = "fruit" id = "check4"/>

    <label for="check4"></label>

</body>

</html>

实现的效果：

:default

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="Keywords" content="关键词一。关键词二">

    <meta name="Description" content="站点描写叙述内容">

    <meta name="Author" content="刘艳">

    <title></title>

    <style>

        :default{background: #009FE6;}

    </style>

</head>

<body>

    <form>

        <input type="text">

        <button>button</button>

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

    </form>

</body>

</html>

form表单中默认获取到焦点的是Buttonbutton

属性选择器

E[attr] 属性名，不确定详细属性值

E[attr=”value”] 指定属性名。并指定其相应属性值

E[attr ~=”value”] 指定属性名。找到的是具有此属性名，且与其他属性名之间用空格隔开。例如以下：



E[attr ^= “value”] 指定属性名。属性值以value开头

E[attr $=”value”] 指定属性名。属性值以value结束

E[attr *=”value”] 指定了属性名，属性值中包括了value

E[attr |= “value”] 指定属性名，属性值以value-开头或者值为value

CSS3选择器（全）的更多相关文章

  1. 最全CSS3选择器

    一,CSS3 选择器分类 二,选择器语法 1,基本选择器语法 选择器 类型 功能描述 *  通配选择器  选择文档中所以HTML元素 E  元素选择器 选择指定类型的HTML元素 #id  ID选择器 ...

  2. 1-最全CSS3选择器

    一,CSS3 选择器分类 二,选择器语法 1,基本选择器语法 选择器 类型 功能描述 *  通配选择器  选择文档中所以HTML元素 E  元素选择器 选择指定类型的HTML元素 #id  ID选择器 ...

  3. 总结30个CSS3选择器

    或许大家平时总是在用的选择器都是:#id  .class  以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 ;; ...

  4. 总结30个CSS3选择器（转载）

    或许大家平时总是在用的选择器都是:#id  .class  以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 * ...

  5. CSS3 选择器——属性选择器

    上一节在<CSS3选择器——基本选择器>中主要介绍了CSS3选择器的第一部分,这节主要和大家一起来学习CSS3选择器的第二部分——属性选择器.属性选择器早在CSS2中就被引入了,其主要作用 ...

  6. css3 选择器（三）

    接css3选择器(一) 接css3 选择器(二) 这篇和前两篇内容相关性不大,主要是涉及到一些css3的状态选择器,所以标题从一开始. 一.[:enabled]选择器 一看这个属性就知道是专为表单元素 ...

  7. CSS3选择器介绍

    1.css3属性选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  8. CSS3 选择器——基本选择器

    CSS的选择器,我想大家并不会陌生吧,因为天天在使用,但对于CSS3的选择器,要运用的灵活到位,我想对很多朋友还是一定的难度,特别是CSS3中的:nth选择器.那么从现在开始我们先丢开他们版本的区别, ...

  9. CSS3选择器的研究，案例

    在上一篇CSS3选择器的研究中列出了几乎所有的CSS3选择器,和伪类选择器,当是并没有做案例的研究,本想在那篇文章里面写,但想想如果把案例都写在那篇文章里面,对于查找来说就不是很方便,所有另开一篇来讲 ...

  10. css3选择器（一）

    直接开始正文. 一.css3同级元素通用选择器[update20161228] 选择器:E~F 匹配任何在E元素之后的同级F元素 Note:E~F选择器选中的是E元素后面同级元素中的全部F元素. 例: ...

随机推荐

  1. [转]linux下logrotate 配置和理解

    转自:http://blog.csdn.net/cjwid/article/details/1690101 对于Linux 的系统安全来说,日志文件是极其重要的工具.系统管理员可以使用logrotat ...

  2. 开始玩qt,使用代码修改设计模式生成的菜单

    之前制作菜单时,不是纯代码便是用设计模式 直接图形化完成. 今天我就是想用代码修改已经存在的菜单项,如果是用代码生成的可以直接调用指针完成: 但通过设计模式完成的没有暴露指针给我,至少我没发现. 在几 ...

  3. Java系列学习(九)-多态

    1.final关键字 (1)最终的意思, 可以修饰类,方法,变量 (2)特点: A:它修饰的类,不能被继承 B:它修饰的方法,不能被重写(覆盖) C:它修饰的变量,这个变量其实是一个常量 [扩展] ① ...

  4. 跨域请求之jsonp

    1.什么是跨域请求: 服务器A上的一个页面,要请求服务器B上的一个处理程序,这就叫做跨域请求 本次的测试页面为: 处理程序kimhandler.ashx,如下: http://qxw119243026 ...

  5. DML和DQL语句

    DML操作: a.插入单行数据:      INSERT INTO 表名(列名,列名,...) VALUE(列值,列值,...); 表的字段名是可选的,如果省略,则一次插入所有字段 多个列表和多个值之 ...

  6. Java&Xml教程（六）使用JDOM解析XML文件

    JDOM 提供了非常优秀的Java XML API来更方便的读取.修改.生成XML文档.JDOM还提供了包装类供用户从SAX.DOM.STAX事件解析.STAX流解析中选择具体的实现. 在本教程中,我 ...

  7. struts2.5.2 通配符问题_亲测有用

    学了一段时间struts2,跟着教程做,但发现struts2的版本不同,很多东西的使用是有差异的.例如之前遇到的创建sessionFactory的方式就跟之前版本有着明显的差异.今天又遇到一个问题,那 ...

  8. 不用float也可以让div横向显示

    display: inline-block; vertical-align: top; 就这两个属性,给div设置上,div就不会换行显示啦,而且还不影响横向的其他元素的显示.

  9. centos7 安装 PostgreSql

    确定你是管理员,然后运行命令: yum -y install postgresql-server postgresql-contrib 初始化数据库 postgresql-setup initdb 启 ...

  10. JavaScript day3（运算符）

    运算符(operator) 基本运算符: 算术运算符用于执行变量之间的算术运算,给定 y=5: 运算符 描述 例子 结果 + 加 x=y+2 x=7 - 减 x=y-2 x=3 * 乘 x=y*2 x ...