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. 357 Count Numbers with Unique Digits 计算各个位数不同的数字个数

    给定一个非负整数 n,计算各位数字都不同的数字 x 的个数,其中 0 ≤ x < 10n.示例:给定 n = 2,返回 91.(答案应该是除[11,22,33,44,55,66,77,88,99 ...

  2. Laravel5.1学习笔记15 数据库1 数据库使用入门

    简介 运行原生SQL查询  监听查询事件 数据库事务 使用多数据库连接 简介 Laravel makes connecting with databases and running queries e ...

  3. P3368 【模板】树状数组 2（树状数组维护差分序列）

    题目描述 如题,已知一个数列,你需要进行下面两种操作: 1.将某区间每一个数数加上x 2.求出某一个数的和 输入输出格式 输入格式: 第一行包含两个整数N.M,分别表示该数列数字的个数和操作的总个数. ...

  4. unity3d 各键值对应代码

    KeyCode :KeyCode是由Event.keyCode返回的.这些直接映射到键盘上的物理键.  值        对应键 Backspace     退格键 Delete      Delet ...

  5. Unity引擎 UGUI

    Unity UGUI讲解 1.导入UI图片资源 2.设置参数: TextureType(纹理类型) 精灵 2D and UI SpriteMode(精灵模式)  Single(单) multiple( ...

  6. cms中某些标题链接的单独写法

    href="{$CATEGORYS[45][url]}" 链接写法, {$CATEGORYS[45][catname]} 标题写法 在show页面中 src="{$thu ...

  7. 【译】x86程序员手册14-5.1段转换

    5.1 Segment Translation 段转换 Figure 5-2 shows in more detail how the processor converts a logical add ...

  8. 几种fullpage用法及demo

    jQuery全屏滚动插件fullPage.js https://github.com/alvarotrigo/fullPage.js http://www.dowebok.com/77.html 全屏 ...

  9. CAD从二制流数据中加载图形（com接口）

    主要用到函数说明: _DMxDrawX::ReadBinStream 从二制流数据中加载图形,详细说明如下: 参数 说明 VARIANT varBinArray 二制流数据,是个byte数组 BSTR ...

  10. wing ide破解

    LicenseID='CN123-12345-12345-67891' # RequestCode='RL634-8363J-X7E8K-95XD3' RequestCode = 'RW61C-NN6 ...