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. MySQL查询in操作 查询结果按in集合顺序显示_Mysql_脚本之家

    body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI ...

  2. mrql初级教程-概念、使用（一）

    以下是本人原创,如若转载和使用请注明转载地址.本博客信息切勿用于商业,可以个人使用,若喜欢我的博客,请关注我,谢谢!博客地址 感谢您支持我的博客,我的动力是您的支持和关注!如若转载和使用请注明转载地址 ...

  3. Golang测试技术

    本篇文章内容来源于Golang核心开发组成员Andrew Gerrand在Google I/O 2014的一次主题分享“Testing Techniques”,即介绍使用Golang开发 时会使用到的 ...

  4. jquery弹窗插件

    .zhuti { position:absolute; z-index:; font-size:14px; border-radius:5px; box-shadow: 5px white; over ...

  5. JQuery checkbox全选多次点击后无效解决方法

    1. jquery设置checkbox时: <input type="checkbox" id="ckAll"/> $(function(){ va ...

  6. 轻轻的扩展了一下IEnumerable<T>

    今天用EF写东西玩,觉得IEnumerable里面除了where().select(),是不是能添加点其他方法呢. 想做就做,F12到方法定义: public static IEnumerable&l ...

  7. bzoj2453

    传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=2453 题目大意: (1)       若第一个字母为“M”,则紧接着有三个数字L.R.W.表 ...

  8. apue- chapter 3 文件IO

    1.函数open和函数openat #include<fcnl.h> int open(const char *path,int oflag,.../*mode_t mode */) in ...

  9. WGCNA算法研究笔记

    转自:http://www.gogoqq.com/ASPX/8390905/JournalContent/1303140588.aspx 研究了近半年的算法,记录下来给自己一个交代,也应该是考G前地最 ...

  10. 一句话绑定父函数的作用域this

    //如何在返回的函数中绑定父函数的作用域this function bound () { return function () { console.log(this); }.bind(this); } ...