<!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title></title>

     <link rel="stylesheet" type="text/css" href="style.css">

 </head>

 <body>

     <h1 class="class1" class="class2">h1标题内容</h1><!--一个元素可以有多个类名称-->

     <p class="class1">p段落内容</p>

     <div id="div1" class="class1">div的内容</div>

 </body>

 </html>
 p{color:green;}/*元素选择器样式优先级高于通用选择样式*/

 *{color: red}/*星号*为通用样式*/

 #div1{color: blue}/*id选择器样式高于通用选择器和元素选择器样式*/

 div{color: yellow}

 .class1{color: pink}/*类选择器样式低于id选择器样式，高于元素选择器样式和通用选择器样式*/

 h1.class1{padding: 20px}/*指定类名称为某个特定元素的*/
 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title></title>

     <link rel="stylesheet" type="text/css" href="style.css">

 </head>

 <body>

     <form>

         <input type="text" name="text1" style="padding: 10px 20px 30px">

         <input type="text" name="text2" style="padding: 15px 25px 35px">

         <input lang="en-us" type="tel">

         <input type="email" name="email" value="qq@qq.com">

         <input type="submit" name="submit" value="确认">

     </form>

 </body>

 </html>
 /*input[name]{background: red}*/

 /*input[name][value]{background: green}*//*含指定属性的元素*/

 /*input[name="email"]{background: blue}*//*指定属性等于指定值的元素*/

 /*input[style~='25px']{background:green}*/

 /*input[lang|='en']{background: pink}*//*属性值以en开头，并后跟-的元素*/

 /*input[name^="e"]{background:red }*//*属性name值以e开头的元素*/

 /*input[name$="t"]{background: red}*//*指定属性值以特定字符串结尾的元素*/

 input[name*="a"]{background: red}/*指定属性值包含特定字符串的元素*/
 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title></title>

     <link rel="stylesheet" type="text/css" href="style.css">

 </head>

 <body>

     <ul>

         <li>第一个li元素

             <ol>

                 <li>后代选择器</li>

                 <li>后代选择器</li>

             </ol>

         </li>

     </ul>

     <div>

         <h1>h1h1</h1>

         <p>p标签</p>

         <h2>h2标签</h2>

         <h1>h1标签</h1>

     </div>

     <h1>第3个h1标签</h1>

 </body>

 </html>
 /*ul li{background: red}*/

 /*ul>li{color: red;border:1px solid;}*//*颜色会被继承下去。边框不会被继承，只对子级有效，对孙级无效。*/

 /*div h1{color: red}*/

 /*p+h1{color: red}*//*紧贴在p之后的h1元素，如果p和h1之间有其他元素则无效*/

 p~h1{color: red}/*p之后的所有h1，p之前的h1无效，p之后的h1和p之间有其他元素不会干扰。超出同个父级标签范围之后的h1无效*/

伪元素选择器：

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title></title>

     <link rel="stylesheet" type="text/css" href="style.css">

 </head>

 <body>

     <p>

         万里长城永不倒<br>

         千里黄河水涛涛

     </p>

 </body>

 </html>
 /*伪元素选择器*/

 p::first-letter{color: red;font-size: 60px}

 p::first-line{background: red}

 p::before{content: "前插入内容"}

 p::after{content: "后插入内容"}/*不止插入文字，还可插入图片等*/

 p::selection{background: pink}

结构伪类选择器：

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title></title>

     <link rel="stylesheet" type="text/css" href="style.css">

 </head>

 <body>

     <ul>

         <li>第一个子元素</li>

         <ol>

             <li>第1个子元素</li>

             <li>第2个子元素</li>

             <li>第3个子元素</li>

         </ol>

         <li>第二个子元素</li>

         <li>第三个子元素</li>

     </ul>

     <ul><li>仅有的一个无序列表</li></ul>

     <ol><li>仅有的一个有序列表</li></ol>

     <div>

         <h1>父元素下同类型h1元素只有一个</h1>

         <p>父元素下同类型p元素只有一个</p>

     </div>

     <div>

         <p>父元素下同类型p元素只有一个</p>

     </div>

     <div>

         <p>父元素下同类型p元素有两个。有子元素。

             <h2>h2元素</h2>

         </p>

         <p>父元素下同类型p元素有两个</p>

     </div>

     <div></div>

 </body>

 </html>
 /*伪类选择器*/

 /*结构伪类选择器*/

 /*:root{background: blue};*//*root指html标签*/

 /*li:first-child{color: red}*//*要满足两个条件：1.是li元素；2.是其父元素的第一个子元素*/

 /*ol>li:first-child{background: green}

 ul>li:last-child{color:blue;}*/

 /*p:only-child{background: red}*//*要满足两个条件：1.是p元素；2.p元素的父元素内只有一个元素*/

 /*p:only-of-type{color: green}*//*要满足两个条件：1.是p元素；2.p元素的父元素内只有一个p元素*/

 /*li:first-of-type{color: red}*//*要满足两个条件：1.是li元素；2.li元素的父元素内是第一个li元素。即匹配同级同类型第一个元素*/

 /*li:last-of-type{color: red}*//*要满足两个条件：1.是li元素；2.li元素在父元素内是最后一个li元素。即匹配同级同类型最后一个元素*/

 /*li:nth-of-type(2){color: red}*//*要满足两个条件：1.是li元素；2.li元素的父元素内是同类型第2个li元素。即匹配同级同类型第2个元素*/

 /*li:nth-last-of-type(1){color: green}*//*要满足两个条件：1.是li元素；2.li元素的父元素内是同类型倒数第一个li元素。即匹配同级同类型倒数第1个元素*/

 /*li:nth-child(2){color: red}*//*要满足两个条件：1.是li元素；2.li元素是父元素内第2个元素*/

 /*li:nth-last-child(1){color: green}*//*要满足两个条件：1.是li元素；2.li元素是父元素内倒数第1个元素*/

 /*li:nth-child(odd){color: red}*//*要满足两个条件：1.是li元素；2.li元素是父元素内第奇数个元素*/

 /*li:nth-child(even){color: red}*//*要满足两个条件：1.是li元素；2.li元素是父元素内第偶数个元素*/

 /*li:nth-child(3n){color: red}*//*要满足两个条件：1.是li元素；2.li元素是父元素内第3n个元素。还可用3n+1等各种表达式*/

 div:empty{width: 300px;height: 200px;background: red}/*要绝对的空，连内容都不能有，空格都不能有*/

UI伪类选择器、其他伪类选择器：

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title></title>

     <link rel="stylesheet" type="text/css" href="style.css">

 </head>

 <body>

     <a href="">链接</a>

     <a href="">链接2</a>

     <a href="#p1">链接到target</a>

     <form>

         <input type="text" name="">

         <input type="email" name="">

         <input type="tel" name="" lang="zh-CN">

         <input type="checkBox" name="" disabled="">复选框

         <input type="radio" name="">单选按钮

     </form>

     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

     <p lang="" id="p1">target链接过来的文本内容</p>

 </body>

 </html>
 /*伪类选择器*/

 /*UI伪类选择器*/

 /*a:active{background: blue}*/

 /*a:hover{background: blue}*/

 /*a:link{color: pink;background: green}*//*未访问过的链接颜色设置要放在访问过的设置之前才有效*/

 /*a:visited{color: red}*/

 /*input:focus{background: pink}*/

 /*input:lang(zh-CN){background: pink}*/

 /*input:checked{width: 20px;height: 20px}*/

 /*input:disabled{width: 30px;height: 30px}*/

 /*input:enabled{width: 30px;height: 30px}*/

 /*p:target{color: red}*//*p元素的内容在被链接过来时会使用的样式*/

 :not(a){color: red}

选择器优先级：

一般情况：行内样式>ID>类>元素；

范围更小，描述更精准的优先级高；

后设置的优先级高。

【CSS3】选择器的更多相关文章

  1. 总结30个CSS3选择器

    或许大家平时总是在用的选择器都是:#id  .class  以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 ;; ...

  2. 总结30个CSS3选择器（转载）

    或许大家平时总是在用的选择器都是:#id  .class  以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 * ...

  3. CSS3 选择器——属性选择器

    上一节在<CSS3选择器——基本选择器>中主要介绍了CSS3选择器的第一部分,这节主要和大家一起来学习CSS3选择器的第二部分——属性选择器.属性选择器早在CSS2中就被引入了,其主要作用 ...

  4. css3 选择器（三）

    接css3选择器(一) 接css3 选择器(二) 这篇和前两篇内容相关性不大,主要是涉及到一些css3的状态选择器,所以标题从一开始. 一.[:enabled]选择器 一看这个属性就知道是专为表单元素 ...

  5. CSS3选择器介绍

    1.css3属性选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  6. CSS3 选择器——基本选择器

    CSS的选择器,我想大家并不会陌生吧,因为天天在使用,但对于CSS3的选择器,要运用的灵活到位,我想对很多朋友还是一定的难度,特别是CSS3中的:nth选择器.那么从现在开始我们先丢开他们版本的区别, ...

  7. CSS3选择器的研究，案例

    在上一篇CSS3选择器的研究中列出了几乎所有的CSS3选择器,和伪类选择器,当是并没有做案例的研究,本想在那篇文章里面写,但想想如果把案例都写在那篇文章里面,对于查找来说就不是很方便,所有另开一篇来讲 ...

  8. css3选择器（一）

    直接开始正文. 一.css3同级元素通用选择器[update20161228] 选择器:E~F 匹配任何在E元素之后的同级F元素 Note:E~F选择器选中的是E元素后面同级元素中的全部F元素. 例: ...

  9. css3 选择器（二）

    接css3选择器(一) 八.结构性伪类选择器[:nth-child(n)] :nth-child(n)选择器用来匹配某个父元素的一个或多个特定的子元素,和jquery中一样. 其中"n&qu ...

  10. [css3]CSS3选择器:nth-child和:nth-of-type之间的差异

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1709 一.深呼吸,直 ...

随机推荐

  1. javascript函数式编程（一）

    一.引言 javascript函数式编程在最近两年来频繁的出现在大众的视野,越来越多的框架(react,angular,vue等)标榜自己使用了函数式编程的特性,好像一旦跟函数式编程沾边,就很高大上一 ...

  2. 使用JavaMail发送带附件的邮件

    所需jar包 链接:http://pan.baidu.com/s/1dFo4cDz 密码:akap 工具类: package com.javamail.utils; import java.util. ...

  3. Qt----拖拽

    最近比较忙,今天此才有时间来继续学习下Qt.Qt的拖拽可以按字面意思分为拖和拽两部分.一般来说我们常见的拖拽分别由两个程序合作完成.例如我们经常把桌面的文件拖拽进其他目录: 这个拖拽在Qt中由两方合作 ...

  4. 设计模式-模板方法模式（Head First）

    参考书籍:Head First设计模式 什么是模板方法模式 定义:在一个方法中定义一个算法的骨架,而将一些步骤延迟到子类中.模板方法使得子类可以在不改变算法结构的情况下,重新定义算法中的某些步骤. 怎 ...

  5. python基础教程——dict和set

    dict python内置字典:dict,全称dictionary,在其他语言中称为map,使用键值对存储. ex: d = {'xiaoli' : 95 , 'xiaoming' : 98 , 'x ...

  6. spring各个版本开发包下载

    spring各个开发包版本下载地址:https://repo.spring.io/webapp/#/artifacts/browse/tree/General/libs-release-local/o ...

  7. 常见优化算法统一框架下的实现：最速下降法，partan加速的最速下降法，共轭梯度法，牛顿法，拟牛顿法，黄金分割法，二次插值法

    常见优化算法实现 这里实现的主要算法有: 一维搜索方法: 黄金分割法 二次差值法 多维搜索算法 最速下降法 partan加速的最速下降法 共轭梯度法 牛顿法 拟牛顿法 使用函数表示一个用于优化的目标, ...

  8. Bitmap.Config 说明 ALPHA_8 ARGB_4444 ARGB_8888 RGB_565

    这篇文章的目的是了解Bitmap.Config 你可以在使用这个方法的时候会遇到 Bitmap android.graphics.Bitmap.createBitmap(int width, int ...

  9. You may rarely look at it. But you'll always feel it

    You may rarely look at it. But you'll always feel it

  10. js代码大全（各种方法、属性）《转载》

      事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture();  event.sr ...