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. Fourinone 作者博客 -集群复制

    http://my.oschina.net/fourinone/blog http://www.iteye.com/blogs/subjects/fourinone http://fourinone. ...

  2. 一、MongoDB安装及启动

    1 安装 在官网http://www.mongodb.org/downloads下载对应版本,并安装.安装在D:\MongoDB下. 2 设置 1) 新建文件夹,用于存放db数据 D:\MongoDB ...

  3. unity3d 之本地推送

    1. 本地推送主要包括在android和ios上,下面所有的代码都是本人写的,经过测试是没有问题的,已经运用到项目中了.首先是接口INotification: using System; public ...

  4. log4CXX第二篇---配置文件（properties文件）详解

    一.Log4j简介 Log4j有三个主要的组件:Loggers(记录器),Appenders (输出源)和Layouts(布局).这里可简单理解为日志类别,日志要输出的地方和日志以何种形式输出.综合使 ...

  5. ZOJ 3930 Dice Notation

    简单模拟题.一个int写成了char,搞了4个多小时.真垃圾.. #include<stdio.h> #include<string.h> +],s[+]; +]; +]; i ...

  6. mvn

    http://blog.csdn.net/z69183787/article/category/2265961

  7. USB自定义HID设备实现-LPC1768

    首先在之前鼠标的基础上修改设备描述符 #include "usbdesc.h" //usb标准设备描述符 const U8 USB_DeviceDescriptor[] = { U ...

  8. HTML5语义化标签重构页面

    在HTML5未出现之前我们都用div+css来构建页面,比如<div id=”header”>,div的滥用,使得代码的可读性和可维护性很差,现在用本文来介绍一下用HTML5′干净的’语义 ...

  9. java线程 — 创建和启动线程

    创建和启动线程,传统有两种方式: 方式1:继承Thread类: 方式2:实现Runnable接口: 线程类(java.lang.Thread):Thread类和Thread的子类才能称之为线程类.阅读 ...

  10. ftp_get_file_and_directory

    class DirectoryItem { public Uri BaseUri; public string AbsolutePath { get { return string.Format(&q ...