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. 350 Intersection of Two Arrays II 两个数组的交集 II

    给定两个数组,写一个方法来计算它们的交集.例如:给定 nums1 = [1, 2, 2, 1], nums2 = [2, 2], 返回 [2, 2].注意:       输出结果中每个元素出现的次数, ...

  2. scala的Map

    package com.test.scala.test object MapTest { def main(args: Array[String]): Unit = { //定义一个不可变的map v ...

  3. phpstorm如何配置xdebug?（hpStudy+PhpStorm+XDebug配置）

    xdebug是什么? 初次接触,反复试了几次终于把这个xdebug给搞清楚了,类似于前端的控制台这样的东西,可以根据断点展示我们想要看的数据. 如何配置xdebug? 配置前说明: 1.phpStud ...

  4. 【sqli-labs】 less59 GET -Challenge -Double Query -5 queries allowed -Variation2 (GET型 挑战 双查询 只允许5次查询 变化2)

    整型的注入 http://192.168.136.128/sqli-labs-master/Less-59/?id=1 or UpdateXml(1,concat(0x7e,database(),0x ...

  5. （转） Hibernate注解开发

    http://blog.csdn.net/yerenyuan_pku/article/details/70162268 Hibernate注解开发 在Hibernate中我们一般都会使用注解,这样可以 ...

  6. 在把table表格中的数据导出到Excel的时候，以科学计数法显示位数多的数字时怎么解决？

    sbHtml.AppendFormat("<td> {0}</td>", data[i].IDcard.ToString()); sbHtml.Append ...

  7. C# 打开模态对话框 和打开文件夹

    C# 打开另一个窗体,(模态对话框) Form1 frm= new Form1(); //创建对象 DialogResult retServer = frm.ShowDialog(); //模式对话框 ...

  8. uva 540 (Team Queue UVA - 540)

    又是一道比较复杂的模拟题.题中有两种队列,一种是总队列,从前向后.其他的是各个团体的小队列,因为入队的人如果有队友的话,会优先进入团体队列. 所以我们先设置两个队列和一个map,设置map倒是可以不用 ...

  9. 爬虫系列(九) xpath的基本使用

    一.xpath 简介 究竟什么是 xpath 呢?简单来说,xpath 就是一种在 XML 文档中查找信息的语言 而 XML 文档就是由一系列节点构成的树,例如,下面是一份简单的 XML 文档: &l ...

  10. 常用Git命令大全思维导图

    开发中代码管理少不了使用Git,对于初学者来说Git命令的学习是一个难过的坎,为了帮助大家记忆并快速掌握Git的基本使用,我把常用的Git命令整理成思维导图,分享给大家. 高清大图在线预览 http: ...