1.后代元素选择器

div p

以空格分隔，表示div的所有后代p元素

2.子元素选择器

div > p

以大于号分隔，表示div的直接子元素

3.相邻兄弟选择器

div  + p

选择紧接在div元素后面的p元素，中间不能有其他元素

4.兄弟选择器

　　div ~ p

选择div元素后面的所有兄弟元素p

5.选择p元素，并都p元素作些筛选

p:first-of-type:p元素是其父元素从上往下，遇到的首个p元素

p:last-of-type:p元素是其父元素从上往下，遇到的最后一个p元素

p:only-of-type:p元素是其父元素的唯一个p元素，父元素可能还有其他元素

p:nth-of-type(n):p元素是其父元素从上往下，遇到的第n个p元素

p:nth-last-of-type(n):p元素是其父元素从后往前，遇到的第n个p元素

p:only-child:p元素是其父元素的唯一个元素

p:nth-child(n):p元素是其父元素从上往下数的第n个子元素

p:nth-last-child(n):p元素是其父元素从后往前数的第n个子元素

p:last-child:p元素是其父元素的最后一个子元素

6.空选择器

p:empty

选择没有子元素(包括文本节点)的p元素

7.check选择器

input:checked

选择每个被选中的input元素，仅单选框和复选框有效

8.非选择器

:not(p)

选择不是p元素的其他元素

9.选取选择器

::selection

匹配用户选取的部分

<!DOCTYPE html>
<html>
<head>
<style>
::selection
{
color:#ff0000;
}
::-moz-selection
{
color:#ff0000;
}
</style>
</head>
<body>

<h1>请试着选取页面上的文本</h1>

<p>这是一个段落。</p>

<div>这是 div 元素中的文本。</div>

</body>
</html>

用户鼠标选中文本时，文本的颜色变为红色

只能向 ::selection 选择器应用少量 CSS 属性：color、background、cursor 以及 outline。

CSS之元素选择器的更多相关文章

  1. CSS 子元素选择器与后代选择器区别实例讲解

    css子元素选择器和后代选择器在功能描述上非常相同,但是他们其实是有区别的,本文章通过两个简单的实例向大家介绍子元素选择器与后代选择器的区别,需要的朋友可以参考一下. 首先我们来了解一下子元素选择器与 ...

  2. css伪元素选择器

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  3. css 为元素选择器，css目标状态伪类，结构化选择器，多媒体选择器，清除表默认样式、属性选择器

    伪元素选择器 :before 和 :after 添加的位置 :before --- 第一个子节点 :after --- 最后一个子节点 特点 1.默认是 inline 元素 2.必须包含 conten ...

  4. css 伪元素选择器

    /*设置第一个首字母的样式*/ p:first-letter{ color: red; font-size: 30px; } /* 在....之前 添加内容 这个属性使用不是很频繁 了解 使用此伪元素 ...

  5. CSS 子元素选择器

    所有选择器参考手册:http://www.w3school.com.cn/cssref/css_selectors.asp 1)子元素选择器 参考链接:http://www.w3school.com. ...

  6. css伪元素选择器（伪对象选择器）checked + 伪元素练习

    伪对象也叫伪元素,在过去,伪类和伪元素都被书写成前面只加一个冒号,实际上应该是: :weilei ::伪元素 而现在我们为了兼容旧的书写方式,用一个冒号引导伪类也是能被解析的. 伪类一般反应无法在CS ...

  7. CSS伪元素选择器和属性选择器

    伪元素 能使用伪元素来选择元素中的一些特殊位置 一.给段落定义样式 :first-letter  首字母(只能用于块元素) :first-line  第一行 1.为p元素中的第一个字符设置颜色为黄色, ...

  8. 前端学习 -- Css -- 兄弟元素选择器

    为一个元素后边的元素设置css样式: 语法:前一个 + 后一个. 作用:可以选中一个元素后紧挨着的指定的兄弟元素. 为一个元素后边的所有相同元素设置css样式: 语法:前一个 ~ 后边所有. < ...

  9. CSS 相邻元素选择器

    相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素.选择相邻兄弟 如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使 ...

随机推荐

  1. Mybatis #和$的区别

    1.#将传入的数据当成一个字符串,会自动加上双引号.如 oder by  #{id}  ,那么解析后为oder by  “id” 2.$对传入的数据不进行操作,直接显示原值.如oder by  ${i ...

  2. Spring + Jedis集成Redis（单例redis数据库）

    这几天没事,就把之前学习的redis代码整理一遍,废话不多说,上步骤. 1.pom.xml引入资源: <dependency> <groupId>org.springframe ...

  3. AngularJS 表格

    ng-repeat 指令可以完美的显示表格. 使用 angular 显示表格是非常简单的: <!DOCTYPE html> <html> <head> <me ...

  4. 最小生成树的Kruskal算法实现

    最近在复习数据结构,所以想起了之前做的一个最小生成树算法.用Kruskal算法实现的,结合堆排序可以复习回顾数据结构.现在写出来与大家分享. 最小生成树算法思想:书上说的是在一给定的无向图G = (V ...

  5. hdu 5073

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5073 思路:一开始忘了排序,wa了好几发...选择区间长度为N - K的连续的数, 然后其余的K个数都 ...

  6. Struts2 动态方法调用

    01.Struts 2基本结构 使用Struts2框架实现用登录的功能,使用struts2标签和ognl表达式简化了试图的开发,并且利用struts2提供的特性对输入的数据进行验证,以及访问Servl ...

  7. GeoJSON格式规范说明

    GeoJSON格式规范说明 1.简介 GeoJSON是一种对各种地理数据结构进行编码的格式.GeoJSON对象可以表示几何.特征或者特征集合.GeoJSON支持下面几何类型:点.线.面.多点.多线.多 ...

  8. BZOJ 2460 [BeiJing2011]元素 ——线性基

    [题目分析] 线性基,由于最多有63个,只需要排序之后,动态的去维护线性基即可. [代码] #include <cstdio> #include <cstring> #incl ...

  9. mysql错误汇总

    1,mysql报Fatal error encountered during command execution的解决办法 连接字符串里加上 Allow User Variables=True 解决. ...

  10. arcmap配置的mxd慢的问题

    http://www.360doc.com/content/13/0220/09/3046928_266688511.shtml