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. JS中多种方式创建对象

    1.内置对象创建 var girl=new Object(); girl.name='hxl'; console.log(typeof girl); 2.工厂模式,寄生构造函数模式 function ...

  2. MySQL批量UPDATE多行记录

    UPDATE categories     SET display_order = CASE id         WHEN 1 THEN 3         WHEN 2 THEN 4        ...

  3. [Android Pro] 常用的android工具类和库

    reference to  : http://blog.csdn.net/lovexieyuan520/article/details/50614086 这篇博客主要记录我认为比较有用的Android ...

  4. tp框架之数据添加

    1.数组添加 //$attr = array("Code"=>"n088","Name"=>"哈萨克族"); ...

  5. windows批处理语法

    写批处理文件,除了了解基本语法外,你还需要熟悉常用的windows命令,那就先看看这篇文章:windows常用命令 #重要说明 文件及目录路径:要使用反斜杠'\',不要使用正斜杠'/' 如:del d ...

  6. 【leetcode】Find Minimum in Rotated Sorted Array I&&II

    题目概述: Suppose a sorted array is rotated at some pivot unknown to you beforehand.(i.e., 0 1 2 4 5 6 7 ...

  7. Could not load file or assembly 'System.ServiceModel.DomainServices.Hosting'.系统找不到指定文件

    项目部署到服务器后出现如下错误信息: Parser Error Message: Could not load file or assembly 'System.ServiceModel.Domain ...

  8. html（单纯html标签）

    html是超文本标记语言, 不是编程语言. 单标签:<br/>.<img>.hr(水平线).input, 双标签:h1~h6,p,a,div,head,body,title,s ...

  9. python 获取日期

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

  10. Wpf/Wp/Silverlight-Chart图表控件：柱状图、饼状图等使用汇总

    链接:http://www.cnblogs.com/jimson/archive/2010/06/21/Wpfchat.html http://www.cnblogs.com/mgen/p/32361 ...