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. Struts2---OGNL表达式和EL表达式

    在action里放入actioncontext的变量值 ActionContext.getContext().put("forumList", forumList); 在jsp里如 ...

  2. Java出现“Error configuring application listener of class...”类似的错误解决

    错误如下: Error configuring application listener of class com.jsoft.jblog.listener.SessionListener java. ...

  3. Activiti----hellowWorld(使用H2数据库)

    1.项目结构 2.pom <dependencies> <dependency> <groupId>junit</groupId> <artifa ...

  4. LPC1768的USB-相关结构体定义

    #ifndef __USB_H__ #define __USB_H__ //usb传输数据的宏定义描述 #include "sys.h" typedef __packed unio ...

  5. 《玩转Bootstrap（JS插件篇）》笔记

    导入JavaScript插件 不论是单独导入还一次性导入之前必须先导入jQuery库. 一次性导入 <script src="js/bootstrap.min.js"> ...

  6. LPC2478的GPIO使用详解

    GPIO使用 LPC2478的GPIO是不能断开时钟的,上电就连接.处理GPIO主要就下面几步 1.      设置为普通IO模式 2.      设置输入输出方向 3.      设置值 以下寄存器 ...

  7. 【转】int && 非常量右值

    C++ 11中引入的右值引用正好可用于标识一个非常量右值.C++ 11中用&表示左值引用,用&&表示右值引用,如: int &&a = 10 右值引用根据其修饰 ...

  8. js-权威指南学习笔记8

    第8章 函数 1.参数有形参和实参的区别,形参相当于函数中定义的变量,实参是在运行时的函数调用时传入的参数. 2.函数表达式可以包含名称,这在递归时很有用. 3.函数定义表达式特别适合用来定义那些只会 ...

  9. js实现的文章输入检查与测速。(纯js版本)

    朋友又提出一些需求.希望不要jquery .于是修改成js版本. <!DOCTYPE html> <html> <head> <meta charset=&q ...

  10. IOS开发中长按的手势事件编程

    长按手势事件: 长按按钮1S后改变按钮颜色: // 长按事件 #import "ViewController.h" @interface ViewController (){ UI ...