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. [Luogu 1312] noip11 Mayan游戏

    [Luogu 1312] noip11 Mayan游戏 Problem: Mayan puzzle是最近流行起来的一个游戏.游戏界面是一个 7 行5 列的棋盘,上面堆放着一些方块,方块不能悬空堆放,即 ...

  2. 关于 android屏幕适配

    一.关于布局适配 1.不要使用绝对布局 2.尽量使用match_parent 而不是fill_parent . 3.能够使用权重的地方尽量使用权重(android:layout_weight) 4.如 ...

  3. Jquery 可拖拽的Ztree

    比较懒,就只贴关键代码吧,自己把有用的属性全部打印出来了,也加了不少注释. 保存后涉及到的排序问题,刷新问题还未考虑到,后面有的话再加. $.fn.zTree.init($("#ztree& ...

  4. android黑科技系列——解析公众号文章消息和链接文章消息自动打开原理

    一.辅助功能方案分析 关于WX的各种功能插件已经非常普遍了,而现在的插件都是依赖于Xposed框架进行的,所以个人觉得WX应该在这方便应对Xposed框架的使用防护,防止插件满天飞的现象,本文来介绍一 ...

  5. Python语言之类

    1.一个空类 #Filename : emptyclass.py class Empty: pass e = Empty() print( e ) #<__main__.Empty object ...

  6. lnmp环境搭建后续-php安装

    安装PHP7: 下载# wget http://PHP.net/get/php-7.0.2.tar.gz/from/a/mirror 建议安装之前先看看安装帮助文件INSTALL 解压安装 # tar ...

  7. python mongodb压力测试脚本

    $ pip install pymongo #!/usr/bin/env python #coding=utf-8 #Author: Ca0Gu0 from pymongo import MongoC ...

  8. cad二次开发中各种头的定义

    Database db=HostApplicationServices.WrokingDatabase; Editor ed=Autodesk.AutoCAD.ApplicationService.A ...

  9. zoj 3314 CAPTCHA（纯模拟）

    题目 有些人用深搜写的,当然我这弱弱的,只理解纯模拟... 纯模拟,第一次写了那么长的代码,我自己也是够坚韧不拔的,,,,必须留念啊!!! 注意,G包含C,E包含L,R包含P,(照图说O应该不包含C, ...

  10. php第十二节课

    练习 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o ...