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. myeclipse如何设置字体？

    1.首先,将你的Myeclipse打开. 找到上面的菜单“windows”打开“Preferences” 2.然后,在弹出的设置窗口中找到“colors and fonts” 3.将右边的basic打 ...

  2. SQL入门语句之运算符

    运算符是一个保留字或字符,主要用于连接WHERE后面的条件. 一.算数运算符 运算符 描述 + 加法 - 把运算符两边的值相加 - 减法 - 左操作数减去右操作数 * 乘法 - 把运算符两边的值相乘 ...

  3. sqlserver索引小结

    1.1 什么是索引? SQL索引有两种,聚集索引和非聚集索引,索引主要目的是提高了SQL Server系统的性能,加快数据的查询速度与减少系统的响应时间 下面举两个简单的例子: 图书馆的例子:一个图书 ...

  4. linux下将不同线程绑定到不同core和cpu上——pthread_setaffinity_np

    =============================================================== linux下的单进程多线程的程序,要实现每个线程平均分配到多核cpu,主 ...

  5. C# RFID windows 服务 网络协议方式

    上篇话说是串口方式操作RFID设备. 下面介绍网络协议方式. 设备支持断线重连. 那我们的服务也不能差了不是. 所以这个服务类也是支持的哦. 不解释上代码: namespace Rfid { /// ...

  6. Image Blending

    给定两幅或者多幅图像,如何无缝自然拼接,这就是Image Blending 需要解决的问题(演示效果请看http://blog.sina.com.cn/s/blog_67f034a50100iuqt. ...

  7. EXT.NET 使用总结（1）

    前言 从系统改版到现在,将近半年的时间,原本陌生的Ext.NET的UI框架,也慢慢的熟悉了.总的来说,这个UI框架还是很优秀的,但是也没有100%完美的产品(老系统使用easy ui其实也挺好的).趁 ...

  8. 欲望 VS 抗拒

    总有很多事情在心里酝酿许久,但真要做起来却又很抗拒. 是在害怕,还是在逃避? 从心,快乐,都是这么难.

  9. 添加已运行daemon进程(falcon-agent)到supervisor测试

    falcon-agent now is running already, pid= falcon-agent now is running already, pid= falcon-agent now ...

  10. Js中强大的Promise异步机制

    少年别激动 我的这份随笔里面只涉及promise概念 如果想深入了解Promise的用法 可以去阮老师es6入门里面详读 奉上链接 http://es6.ruanyifeng.com/#docs/pr ...