复习

div>p: 子代

div+p：div后面相邻的第一个p

div~p: div后面所有的兄弟p

属性选择器

标志：[]；区别于id选择器：#，区别于类名选择器：.

特殊符号：^：开头     $：结尾      *：包含

E[title] : 选中页面的E元素，并且E需要带有title属性

E[title="abc"] ：选中页面的E元素，并且E需要带有title属性,属性值为abc

E[title^="abc"] ：选中页面的E元素，并且E需要带有title属性,属性值以abc开头

E[title$="abc"] ：选中页面的E元素，并且E需要带有title属性,属性值以abc结尾

E[title*="abc"] ：选中页面的E元素，并且E需要带有title属性,属性值包含abc

结构伪类选择器

E：first-child　选中父元素中的第一个子元素

E：last-child　选中父元素中的最后一个子元素

E：nth-child(n)　属于其父元素中的第n个子元素，E是子元素

n: 0,1,2,3,4.....     偶数： 2n(even)     奇数：2n-1 (odd)      前5个： -n+5    7的倍数：nth-child(7n)

E：nth-last-child(3)，从后向前选择， 选中倒数第3个

E：empty 表示元素为空的状态

E:target：表示元素被激活的状态 要配合锚点使用

注意：所选到的元素的类型 必须是指定的类型E,否则选择无效；

伪元素

通过css模拟出html效果

E::before

E::after

注意：必须有content 属性

伪元素选择器

E::first-letter：选中第一个字母

E::first-line：选中第一行

E::selection：表示选择的区域 通过设置 color background

首字母下沉

<style>

    /*选中第一个字,加上左浮动，文字就会环绕，有下沉效果*/

    p:first-child::first-letter{

        font-size:40px;

        color:red;

        float: left;

    }

</style>
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .nav {

            position: fixed;

            top: 150px;

            left: 50px;

        }

        ul {

            list-style: none;

        }

        li {

            width: 50px;

            height: 30px;

            border: 1px solid #000;

            background-color: pink;

            text-align: center;

            font: 400 15px/30px "simsun";

            margin-top: 20px;

            color: red;

        }

        .box {

            width: 600px;

            height: 700px;

            margin: 20px auto;

            background-color: pink;

            font: 600 30px/700px "simsun";

            text-align: center;

            color: green;

        }

        /*target 伪类 要配合锚点使用 表示被激活的状态*/

        .box:target {

            background-color: #ccc;

        }

    </style>

</head>

<body>

<div class="nav">

    <ul>

        <li><a href="#yf1">上衣</a></li>

        <li><a href="#yf2">下衣</a></li>

        <li><a href="#yf3">内衣</a></li>

        <li><a href="#yf4">外衣</a></li>

    </ul>

</div>

<div class="box" id="yf1">上衣</div>

<div class="box" id="yf2">下衣</div>

<div class="box" id="yf3">内衣</div>

<div class="box" id="yf4">外衣</div>

</body>

</html>
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        div::before {

            content: "";

            display: inline-block;

            width: 50px;

            height: 50px;

            background-color: red;

        }

    </style>

</head>

<body>

<div>你好吗？</div>

</body>

</html>

参考：CSS3选择器手册

html5——css选择器的更多相关文章

  1. html5 css选择器。 井号，句号的区别

    .理解CSS的样式组成CSS里的样式表是有规则组成的,每条规则有三个部分组成:1.选择器(如下面例子中的:“body”),告诉浏览器文档的哪个部分受规则影响:2.属性(如实例中的font-family ...

  2. html5 css选择器 井号, 句点的区别

    一.理解CSS的样式组成CSS里的样式表是有规则组成的,每条规则有三个部分组成:1.选择器(如下面例子中的:"body"),告诉浏览器文档的哪个部分受规则影响:2.属性(如实例中的 ...

  3. 第八十六节，html5+css3pc端固定布局,网站结构,CSS选择器,完成导航

    html5+css3pc端固定布局,网站结构,CSS选择器,完成导航 页面采用1280的最低宽度设计,去掉滚动条为1263像素. 项目是PC端的固定布局,会采用像素(px)单位. 网站结构语义 在没有 ...

  4. HTML5 -入门 (---css样式-------------（css基础与css选择器）---------------------—）

    ---恢复内容开始--- 一css基础入门与css选择器 CSS英文全拼:cascading style sheet 层叠样式表. 在html中使用:要在head中写style标签,所有样式放在sty ...

  5. IT兄弟连 HTML5教程 CSS3揭秘 CSS选择器1

    要使用CSS对HTML页面中的元素实现一对一.一对多或者多对一的控制,就需要用到CSS选择器.选择器是CSS3中一个重要的内容,使用它可以大幅度地提高开发人员书写或修改样式表的效率.在大型网站中,样式 ...

  6. HTML5新标签使用及CSS选择器(伪类)

    这些标签能够让搜索引擎更直接的解析页面内容. <header></header>语义:文档或者页面的头部 <nav></nav>语义:导航这两者不是组合 ...

  7. 你真的精通 CSS 了？来挑战一下 CSS 选择器测验吧

    CSS 选择器赋予 CSS 强大的 HTML 元素匹配功能.作为前端开发人员必须要掌握的一部分,可能基本的大家都知道.但是你真的精通 CSS 了吗?挑战一下 CSS 选择器测验就知道. 您可能感兴趣的 ...

  8. 第 13 章 CSS 选择器[上]

    学习要点: 1.选择器总汇 2.基本选择器 3.复合选择器 4.伪元素选择器 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 选择器,通过选择器定位到想要设置样式的元素.目前 CSS 选择器的 ...

  9. 30类css选择器

    大概大家都知道id,class以及descendant选择器,并且整体都在使用它们,那么你正在错误拥有更大级别的灵活性的选择方式.这篇文章里面提到的大部分选择器都是在CSS3标准下的,所以它们只能在相 ...

随机推荐

  1. HDU——1576 A/B

    A/B Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Submis ...

  2. 洛谷（cogs 1293/bzoj 1212） P2292 [HNOI2004]L语言

    1293. [HNOI2004] L语言 ★★★   输入文件:language.in   输出文件:language.out   简单对比时间限制:1 s   内存限制:162 MB [题目描述] ...

  3. 基本的文件I/O

    基本的文件 I/O 抽象基类 Stream 支持读取和写入字节. Stream 集成了异步支持. 其默认实现根据其相应的异步方法来定义同步读取和写入,反之亦然. 所有表示流的类都是从 Stream 类 ...

  4. ZOJ 题目2859 Matrix Searching（二维RMQ）

    Matrix Searching Time Limit: 10 Seconds      Memory Limit: 32768 KB Given an n*n matrix A, whose ent ...

  5. go语言使用官方的 log package 来记录日志

    原文:https://www.goinggo.net/2013/11/using-log-package-in-go.html ------------------------------------ ...

  6. 如何让图片开口说话 3DMeNow教程

    菜鸟玩3D--3DmeNow初级教程 3D软件对于我们这些菜鸟来说,一直是可望而不可及的一种东西,深奥的3D建模,复杂的面板操作--都使我们对之望而却步,有没有一种很简单的3D造型软件,使我们这些菜鸟 ...

  7. iOS 文字属性字典

    iOS开发过程中相信大家常常遇到当须要给字体,颜色,下划线等属性的时候參数是一个NSDictionary 字典 可是字典里面究竟有哪些键值对了 我们把经常使用的总结一下 首先我们创建一个最简单的.设置 ...

  8. 大数据技术之Flume研究摘要（一）

    Flume是Cloudera提供的一个高可用的,高可靠的.分布式的海量日志採集.聚合和传输的系统,Flume支持在日志系统中定制各类数据发送方,用于收集数据:同一时候,Flume提供对数据进行简单处理 ...

  9. linux查找nginx所在目录

    ps -ef |grep nginx

  10. 辛星浅谈mysql中的数据碎片以及引擎为MyISAM下的操作

    对于mysql中的数据碎片,事实上和我们删除数据是息息相关的,删除数据的时候必定会在数据文件里造成不连续的空白空间,对于少量的数据的删除,并不会产生多少的空白空间.假设在一段时间内的大量的删除操作,会 ...