复习

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. mcp2515 芯片驱动总线错误BUG的解决方法

    http://blog.renren.com/share/221002615/11483613167 来自张涛的日志 现象:CAN总线在线上设备热插拔或长时间运行后出现总线异常情况,有时不能发送和接收 ...

  2. kendo grid 报错：length

    其实是:events中的{}Onsave的问题,把events整个注释掉就好了

  3. TreeView获取目录下的所有文件

    /// <summary> /// TreeView获取目录下的所有文件 /// </summary> /// <param name="tree"& ...

  4. hdu 4587 推断孤立点+割点+ 删除点之后，剩下多少连通分量

    做了非常久...... 题目链接:  http://acm.hdu.edu.cn/showproblem.php?pid=4587 先枚举删除的第一个点,第二个点就是找割点.没有割点当然也有答案 学到 ...

  5. android推断是否连接wifi和网络状态的推断

    <span style="font-size:18px;">// 是否连接WIFI public static boolean isWifiConnected(Cont ...

  6. python实现自动重启本程序的方法 技术的漩涡

    python实现自动重启本程序的方法 http://www.jb51.net/article/69174.htm import requests, time url_l = []with open(' ...

  7. C# winform通过按钮上移下移 解决了datasource绑定问题

    事件代码: private void btn_frmDicType_MoveUp_Click(object sender, EventArgs e) { int lstLength = this.ls ...

  8. 【BZOJ 2160】 拉拉队排练

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=2160 [算法] 先简化题意 : 给定一个字符串,求最长的k个奇回文子串长度的乘积 先 ...

  9. openstack 杂记 备忘002

  10. Input 内提示填写内容

    输入框内提示默认内容,用户的点击后提示内容消失,如果填写内容为空,失去焦点后自动显示提示内容 <input type="text" value="搜索" ...