复习

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. [Usaco2016 Open]Diamond Collector

    题目描述 Bessie the cow, always a fan of shiny objects, has taken up a hobby of mining diamonds in her s ...

  2. ECMAScript 6 入门学习笔记（二）——变量的解构赋值

    一.数组的解构赋值 let [foo, [[bar], baz]] = [1, [[2], 3]]; ①可多不可少,等号的右边是数组 let [x, y] = [1, 2, 3]; //可以 let ...

  3. Ubuntu 16.04安装PPA图形化管理工具Y PPA Manager

    安装: sudo add-apt-repository ppa:webupd8team/y-ppa-manager sudo apt-get update sudo apt-get install y ...

  4. nodejs fs.open

    fs.open(path, flags, [mode], [callback(err, fd)])是 POSIX open 函数的封装,与 C 语言标准库中的 fopen 函数类似.它接受两个必选参数 ...

  5. 从一个简单的例子谈谈package与import机制

    转,原文:http://annie09.iteye.com/blog/469997 http://blog.csdn.net/gdsy/article/details/398072 这两篇我也不知道到 ...

  6. putty SSH出现乱码

    解决方法如下: 打开PuTTY主程序 选择window-〉Appearance-〉Font settings-〉点击Change.按钮,字体中选择"新宋体". 选择window-〉 ...

  7. [Vue-rx] Cache Remote Data Requests with RxJS and Vue.js

    A Promise invokes a function which stores a value that will be passed to a callback. So when you wra ...

  8. JAVA 网络长短连接

       作为java的刚開始学习的人,看了网上的资料后,关于java的长短连接,感觉理解的不是非常深刻.结合自己的学习和网上的资料整理例如以下.不对之处请大家批评指正.                  ...

  9. Tomcat PK Resin

    特征 Tomcat Resin 所属公司 Apache CAUCHO 用户数 多 少 可參考文档 多 少 与Eclipse集成复杂度 适中 较复杂. Eclipse下调试开发 简便 复杂.更新类后会自 ...

  10. HDU 5311 Sequence

    Hidden String Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 262144/262144 K (Java/Others) ...