1、属性选择器

在CSS3中，追加了3个属性选择器，分别为：[att*=val]、[att^=val]和[att$=val]，使得属性选择器有了通配符的概念。

 <!doctype html>
 <html>
 <head>
     <meta charset="utf-8">
     <title></title>
     <style>
         /*id包含div字符串，就加载效果*/
         [id*=div]{
             color:lime;
         }
         /*首字母为div的，才加载效果*/
         [id^=div]{
             color:darkgoldenrod;
         }
         /*最后几个三个字母为div，才加载效果*/
         [id$=div]{
             color:red;
         }
     </style>
 </head>
 <body>
     <div id="div1">示例文本1</div>
     <div id="div2">示例文本2</div>
     <div id="div3">示例文本3</div>
     <div id="div4">示例文本4</div>
     <div id="5div">示例文本5</div>
     <div id="my">示例文本6</div>
 </body>
 </html>

2、结构性伪类选择器

包括伪类选择器和伪元素选择器，下面是第二种：

 <!doctype html>
 <html>
 <head>
     <meta charset="utf-8">
     <title></title>
     <!--first-line-->
     <style>
         p:first-line{
             color:chocolate;
         }
         /*first-letter*/
         p:first-letter{
             color:royalblue;
         }
         /*before*/
         li:before{
             content:"---";
         }
         /*after*/
         li:after{
             content:"  对列表做一个解释";
             color:gray;
         }
     </style>
 </head>
 <body>
     <p>这是在第一行的内容<br/>这是在第二行的内容</p>
     <ul>
         <li>列表1</li>
         <li>列表2</li>
         <li>列表3</li>
         <li>列表4</li>
         <li>列表5</li>
     </ul>
 </body>
 </html>

3、选择器root、not、empty和target

这四种都是结构性伪类选择器，在CSS3 中，结构性伪类选择器的共同特征是允许开发者根据文档中的结构来指定元素的样式。

 <!doctype html>
 <html>
 <head>
     <meta charset="utf-8">
     <title></title>
     <!--root-->
     <!--将样式绑在根元素中，即<html>中-->
     <style>
     :root{
         background-color:gray;
         color:green;
     }
     /*not*/
     /*如果想对结构元素使用样式，但想拍出结构元素下面的子结构元素*/
     div *:not(h1){
         color:crimson;
     }
     /*emtpy    */
     /*当前元素为空时，指定的样式    */
     :empty{
         background-color: aqua;
     }
     /*target    */
     /*当用户点击超链接，并跳转到某个target元素后，起作用*/
      :target{
          background-color: orange;
      }
     </style>
 </head>
 <body>
     <div>
         你好吗？
     </div>
     <div>
         <h2>
             我很好
         </h2>
     </div>
     <table border="1">
         <tr>
             <td>内容1</td>
             <td>内容2</td>
         </tr>
         <tr>
             <td>内容3</td>
             <td></td>
         </tr>
         <tr>
             <td></td>
             <td>内容4</td>
         </tr>
     </table>
     <br/>
     <a href="#a1">菜单1</a>|
     <a href="#a2">菜单2</a>|
     <a href="#a3">菜单3</a>|
     <a href="#a4">菜单4</a>|
     <div id="a1">
         <h1>菜单1</h1>
         <p>菜单1内容</p>
     </div>
     <div id="a2">
         <h1>菜单2</h1>
         <p>菜单2内容</p>
     </div>
     <div id="a3">
         <h1>菜单3</h1>
         <p>菜单3内容</p>
     </div>
     <div id="a4">
         <h1>菜单4</h1>
         <p>菜单4内容</p>
     </div>
 </body>
 </html>

[CSS3] 学习笔记-CSS3选择器详解（一）的更多相关文章

  1. expect学习笔记及实例详解【转】

    1. expect是基于tcl演变而来的,所以很多语法和tcl类似,基本的语法如下所示:1.1 首行加上/usr/bin/expect1.2 spawn: 后面加上需要执行的shell命令,比如说sp ...

  2. CSS3 结构伪类选择器 详解

    1 CSS3 结构伪类选择器 1.E:root 匹配E元素所在的根元素 即:html 2. E:nth-child(n) (1)匹配E元素的父元素中第n个子元素,(2)且该位置的子元素类型必须是E类型 ...

  3. Docker技术入门与实战 第二版-学习笔记-3-Dockerfile 指令详解

    前面已经讲解了FROM.RUN指令,还提及了COPY.ADD,接下来学习其他的指令 5.Dockerfile 指令详解 1> COPY 复制文件 格式: COPY  <源路径> .. ...

  4. Redis学习笔记4-Redis配置详解

    在Redis中直接启动redis-server服务时, 采用的是默认的配置文件.采用redis-server   xxx.conf 这样的方式可以按照指定的配置文件来运行Redis服务.按照本Redi ...

  5. Struts2学习笔记(二)——配置详解

    1.Struts2配置文件加载顺序: default.properties(默认常量配置) struts-default.xml(默认配置文件,主要配置bean和拦截器) struts-plugin. ...

  6. Struts2学习笔记二 配置详解

    Struts2执行流程 1.简单执行流程,如下所示: 在浏览器输入请求地址,首先会被过滤器处理,然后查找主配置文件,然后根据地址栏中输入的/hello去每个package中查找为/hello的name ...

  7. Android学习笔记之Activity详解

    1 理解Activity Activity就是一个包含应用程序界面的窗口,是Android四大组件之一.一个应用程序可以包含零个或多个Activity.一个Activity的生命周期是指从屏幕上显示那 ...

  8. [C#] 类型学习笔记二：详解对象之间的比较

    继上一篇对象类型后,这里我们一起探讨相等的判定. 相等判断有关的4个方法 CLR中,和相等有关系的方法有这么4种: (1) 最常见的 == 运算符 (2) Object的静态方法ReferenceEq ...

  9. vue.js学习笔记(二)——vue-router详解

    vue-router详解 原文链接:www.jianshu.com 一.前言 要学习vue-router就要先知道这里的路由是什么?为什么我们不能像原来一样直接用<a></a> ...

  10. linux命令学习笔记-eval命令详解

    功能说明:重新运算求出参数的内容. 语 法:eval [参数] 补充说明:eval可读取一连串的参数,然后再依参数本身的特性来执行. 参 数:参数不限数目,彼此之间用分号分开. .eval命令将会首先 ...

随机推荐

  1. hive第一篇----简介和使用客户端

    摘要by crazyhacking:•Hive是基于Hadoop的一个数据仓库工具,可以将结构化的数据文件映射为一张数据库表,并提供类SQL查询功能.•本质是将SQL转换为MapReduce程序的映射 ...

  2. python redis list操作

    LPUSH list_name value [value ...] Prepend one or multiple values to a list 从左侧插入值,最早插入的值在最右边 LPUSHX ...

  3. 怎么把自己电脑上开发的项目发布到自己电脑IIS上面？

    windowsxp中: 步骤: 1.新建一个文件夹,把项目发布到里面(发布的时候需要注意的是: ) 注意:发布方法要选择:文件系统 目标位置选择:你新建来发布的那个文件夹名称 2.在IIS中新建网站 ...

  4. python基础（二）字符串內建函数详解

    字符串 定义:它是一个有序的字符的集合,用于存储和表示基本的文本信息,''或""或''' '''中间包含的内容称之为字符串特性:1.只能存放一个值2.不可变,只能重新赋值3.按照从 ...

  5. Repeater绑定事件ItemDataBound中获取数据库中数据

    protected void rp1_ItemDataBound(object sender, RepeaterItemEventArgs e)        { if (e.Item.ItemTyp ...

  6. 黄聪：VPS用轻松备份工具备份Wordpress，文件夹通配符

    db;log;wp-admin;wp-includes;temp;upgrade;twentyfourteen;twentyfifteen;twentysixteen;twentythirteen;t ...

  7. dp中表示无限取的写法

    dp[i][j]=dp[i-a[i][j]+dp[i-a[i]][j-1]; 其中前一项j不变表示j这一项无限取

  8. 样式（Style）和主题（Theme）资源——样式资源

    样式和主题资源都是用于对Android应用进行“美化”的,只要充分利用Android应用的样式和主题资源,开发者可以开发出各种风格的Android应用. 样式资源:         如果我们经常需要对 ...

  9. spring3.1........jar包下载

    1.common-dbcp-1.4.jar 下载地址:http://commons.apache.org/dbcp/ 2.common-pool-1.6.jar 下载地址:http://commons ...

  10. 给 Memo 排序的函数

    本例效果图: 代码文件: unit Unit1; interface uses   Windows, Messages, SysUtils, Variants, Classes, Graphics, ...