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. scrapy 简单操作

    1.创建一个简单的scrapy项目 scrapy startproject search(项目名称)按照提示cd searchscrapy genspider serachname search.co ...

  2. django 菜单权限

    一.什么是权限 能做哪些事情,不能做哪些事情,可以做的权限 二.设计权限 思路: web应用中,所谓的权限,其实就是一个用户能够访问的url,通过对用户访问的url进行控制,从而实现对用户权限的控制. ...

  3. 【转】linux read 用法

    转自:http://www.cnblogs.com/iloveyoucc/archive/2012/04/16/2451328.html 1.基本读取 read命令接收标准输入(键盘)的输入,或其他文 ...

  4. mysql子查询与连接查询

    表结构以及数据: CREATE TABLE `student` ( `id` ) NOT NULL AUTO_INCREMENT, `name` ) CHARACTER SET utf8 COLLAT ...

  5. synchronized关键字详解（二）

    synchronized关键字的性质 1.可重入:同一线程的外层函数获得锁之后,内层函数可直接再次获得该锁,好处:避免死锁,提升封装性 证明可重入粒度:1.同一个方法是可重入的 2.可重入不要求是同一 ...

  6. [ NOIP 1998 ] TG

    \(\\\) \(\#A\) 车站 火车从第\(1\)站开出,上车的人数为\(a\),然后到达第\(2\)站,在第\(2\)站有人上.下车,但上.下车的人数相同,因此在第\(2\)站开出时(即在到达第 ...

  7. 搭建本地wordpress

    1.首先,下载xampp,安装按默认勾选即可. 2.安装完成后,启动Apache和MySQL这两个服务. 启动后变成绿色,表示启动成功. 3.点击MySQL项的Admin进入数据库后台. 4.点击用户 ...

  8. nodejs全局安装路径的位置

    一般nodejs安装在默认的C盘,如果不知道安装在哪里,可以打开控制面板-系统和安全-系统-高级配置中找到 所谓全局安装: 是指安装在node中node_module的根目录里,可以在电脑的任何位置调 ...

  9. asp.net——根据时间，显示内容

    题目: 在VS 2010中建立一个网站,命名为Lab5_1,建立时注意项目文件夹的存放位置.根据当前时间,在页面上显示早上好或下午好或晚上好,并显示相应的不同图片. 体验: 一开始看到这个题目的时候, ...

  10. python gdal 修改shp文件的属性值

    driver = ogr.GetDriverByName('ESRI Shapefile')datasource = driver.Open(shpFileName, 1)layer = dataso ...