复习

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. [NOI2000] 单词查找树

    ★★   输入文件:trie.in   输出文件:trie.out   简单对比 时间限制:1 s   内存限制:128 MB 在进行文法分析的时候,通常需要检测一个单词是否在我们的单词列表里.为了提 ...

  2. 【Chrome】Chrome浏览器怎么查看版本信息

    第一步,打开Chrome浏览器 第二步,弹出浏览器主界面 第三步,点击右上按钮(三横杠) 第四步,下拉中选择“关于” 第五步,弹出窗口,可以看到版本信息 第二种方法: 第六步,也可以通过地址栏里输入命 ...

  3. ORACLE-020：ORACLE技巧002 批量操作表

    有时候须要批量操作一些表,比方授权,清空数据等.能够使用拼接sql语句的方式来实现. 比如.须要将一个用户中的全部表,授权查询权限给还有一个用户,能够拼接例如以下sql: select 'grant ...

  4. springMVC和ckeditor图片上传

    springMVC和ckeditor图片上传 http://blog.csdn.net/liuchangqing123/article/details/45270977 修正一下路径问题: packa ...

  5. JavaScript初探之——图片移动

    在我们打开页面的时候我们看到的大部分页面都是动态的,曾经学习VB的时候要实现一些动态的画面第一个想到的就是用Flash,如今学习了BS的东西,才算是开眼界了,刚刚学习了一个动画的效果,给大家展示一下. ...

  6. Oracle 闪回区满解决的方法

    闪回区满: OS: rm -rf [archivelog  autobackup  backupset  controlfile  flashback  onlinelog] eg : archive ...

  7. iOS开发之剖析&quot;秘密&quot;App内容页面效果(一)

    近期在玩"秘密",发现点击主界面的Cell进去后的页面效果不错,就写了个Demo来演示下. 它主要效果:下拉头部视图放大,上拉视图模糊并且到一定位置固定不动,其它Cell能够继续上 ...

  8. hdu3488Tour KM算法

    //给一个有向图, //找出若干环,使得这些环覆盖全部点且每一个点仅仅能在一个环中 //问所得的全部环的全部边权值之和的最小值为多少 //对于每一个点仅仅有一个入度和一个出度.那么将每一个点拆成 // ...

  9. web的自己主动化公布

    </pre>基于眼下业务的版本号.使用的maven 及tomcat <p></p><p>假设我们使用 Jenkins 公布是比較好的,可是存在一定的问题 ...

  10. android Activity初次的启动的时候播放声音

    代码例如以下: private MediaPlayer mMediaPlayer; mMediaPlayer = new MediaPlayer(); mMediaPlayer = MediaPlay ...