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. http升https笔记

    证书申请的: 1.lets encrypt 国际公益项目发展很快的,不过在国内暂时有些支持度还不够高,如微信安卓版就不认lets encrypt的证书.跳转进去一直处于空白页状态 2.沃通证书  国内 ...

  2. _stdcall,_cdecl区别

    (1) _stdcall调用 _stdcall是Pascal程序的缺省调用方式,参数采用从右到左的压栈方式,被调函数自身在返回前清空堆栈. WIN32 Api都采用_stdcall调用方式,这样的宏定 ...

  3. Oracle insert大量数据经验之谈（转）

    在很多时候,我们会需要对一个表进行插入大量的数据,并且希望在尽可能短的时间内完成该工作,这里,和大家分享下我平时在做大量数据insert的一些经验. 前提:在做insert数据之前,如果是非生产环境, ...

  4. java中的权限修饰符的理解

    首先了解概念: 在java中有四种权限修饰符:范围从大到小分别是:public.protect.default(friendly).private,它们之间的区别是: public: Java语言中访 ...

  5. JVM调优总结 -Xms -Xmx -Xmn -Xss

    http://blog.csdn.net/ye1992/article/details/9344807 堆大小设置JVM 中最大堆大小有三方面限制:相关操作系统的数据模型(32-bt还是64-bit) ...

  6. 2016 ACM/ICPC Asia Regional Dalian Online(更新到五道题)

    1006 Football Games 这道题输入也很阴险!!! 这道题过题姿势最优雅的,不是if else if else if.那样很容易wa的. 如果没有平手选项, 赢得加一分的话, 可以用La ...

  7. python 获取日期

    转载   原文:python 获取日期 作者:m4774411wang python 获取日期我们需要用到time模块,比如time.strftime方法 time.strftime('%Y-%m-% ...

  8. sql 动态行转列

    create table u01 (医案编号 varchar(5),药物编号 varchar(5)) insert into u01 select '01','01' union all select ...

  9. 数据结构之平衡二叉树（AVL树）

    平衡二叉树(AVL树)定义如下:平衡二叉树或者是一棵空树,或者是具有以下性质的二叉排序树: (1)它的左子树和右子树的高度之差绝对值不超过1: (2)它的左子树和右子树都是平衡二叉树. AVL树避免了 ...

  10. CentOS7中DHCP配置

    因为需要网络引导系统的安装,所以需要安装和配置DHCP服务器.DHCP(Dynamic Host Configuration Protocol) 动态主机配置协议,它提供了一种动态指定IP地址和配置参 ...