复习

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. RAR5格式不同词典大小下压缩率的简单测试

    一个VMWare虚拟机安装Win7后的磁盘文件进行压缩,已经进行了清理处理,原始大小为12.1GB 词典大小  压缩后大小  压缩比率 32MB 4.08GB 33.7% 256MB 3.88GB 3 ...

  2. Leetcode题解（5）：L58/Length of Last Word

    L58: Length of Last Word Given a string s consists of upper/lower-case alphabets and empty space cha ...

  3. Ubuntu中取消秘钥环

    1.打开应用程序->附件->password和加密密钥(或者在终端中输入 seahorse) 2.切换到password选项卡,会看到一个password密钥环 3.右击->更改pa ...

  4. 【cocos2dx 小技巧】半透明屏蔽罩和弹出框的实现

    今天介绍一下,弹出框的和屏蔽罩的小实现~ 弹出框主要用到了cocos2dx生命周期里面的OnEnter()函数,就是当Layer被addChild的时候会调用的函数(所以假设把OnEnter的代码加到 ...

  5. MongoDB使用初步

    我很快就要离开现在这个使用nodejs + mongodb + redis的项目,转而去搞 塞特ID 之类的别的项目了.可惜这些技术对我来说浅尝辄止,半生不熟,胎死腹中.业余时间自学当然也可以,但哪有 ...

  6. 曼哈顿距离（坐标投影距离之和）d(i,j)=|X1-X2|+|Y1-Y2|.

    曼哈顿距离(坐标投影距离之和)d(i,j)=|X1-X2|+|Y1-Y2|. 我们可以定义曼哈顿距离的正式意义为L1-距离或城市区块距离,也就是在欧几里德空间的固定直角坐标系上两点所形成的线段对轴产生 ...

  7. POJ 2195 Going Home 最小费用流

    POJ2195 裸的最小费用流,当然也可以用KM算法解决,但是比较难写. 注意反向边的距离为正向边的相反数(因此要用SPFA) #include<iostream> #include< ...

  8. 面向对象软件工程与UML

    软件工程基本概念 软件危机 软件的功能.规模及复杂性与日俱增,软件的复杂性达到了它的开发者难以控制的程度 这种情况导致了严重的后果: 软件可靠性下降 开发效率低下 维护极为困难 这使软件开发者陷入困境 ...

  9. php使用163邮箱发送邮件

    email.class.php文件 <? class smtp { /* Public Variables */ var $smtp_port; var $time_out; var $host ...

  10. LuaBridge

    不能直接公开基类的函数,必须单独公开基类,并声明继承关系  deriveClass<Player, BaseController>("Player") 直接公开基类的函 ...