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. 控制流之continue

    continue语句continue语句被用来告诉Python跳过当前循环块中的剩余语句,然后 继续 进行下一轮循环.使用continue语句~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ...

  2. iOS学习笔记1--在xcode6以上的版本中不使用storyboard以及部分控件使用

    首先建立一个iOS新工程,删除工程自动建立的main.storyboard以及xib文件,并且在info.plist上删除这两个选项 然后在项目配置中将maninterface设置为空,将launch ...

  3. TCP协议和UDP协议的区别

    1. TCP协议面向连接. UDP协议面向非连接 (有无链接)2. TCP协议传输速度慢. UDP协议传输速度快 (传输速度)3. TCP协议保证数据顺序. UDP协议不保证 (数据的有序性. 在IP ...

  4. jqGrid的搜索框下拉

    当需要在jqGrid的搜索框里配置搜索条件时,如下拉,日期等,代码如下: datePick = function(elem) { jQuery(elem). } colNames : [ " ...

  5. asp.net-mvc验证码 asp.net-mvc c#验证码

    验证码看不清换一组 写一个类 public class ValidateCode { public ValidateCode() { } /// <summary> /// 验证码的最大长 ...

  6. svn 几个好用的命令

    Mac下操作的命令 1. 删除目录及子目录下,未添加的文件 svn status . | grep '^?' | awk '{print $2}' | xargs rm -rf 2.恢复根目录及子目录 ...

  7. Makefile — 基础

    参考: 跟我一起写 Makefile GNU make <GNU+Make项目管理(第三版)> 1.Makefile用途 使用GNU Make工具来管理程序是每个Linux工程师必须掌握的 ...

  8. C语言－结构体

    C语言中数组是把相同类型的数据类型的变量集中在一起了,而结构体则是把不同类型的变量聚集在一起. 结构体也是一种数据类型,但是它是一种自定义的数据类型,也就是说和使用其他数据类型不一样,我们得先定义这种 ...

  9. 内网服务器启动报错UNEXPECTED INCONSISTENCY解决方法

    一开始进入系统显示reboot and select proper boot device or insert boot media in selected boot device and press ...

  10. java设计模式面试

    设计模式 1. 单例模式:饱汉.饿汉.以及饿汉中的延迟加载,双重检查 2. 工厂模式.装饰者模式.观察者模式. 3. 工厂方法模式的优点(低耦合.高内聚,开放封闭原则) 单例模式 分类:懒汉式单例.饿 ...