<!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. vsftpd 安装

    vsftpd 安装 这里有最简洁的安装步骤 理想流程 [root@itdragon ~]# useradd ftpuser [root@itdragon ~]# passwd ftpuser Chan ...

  2. jquery总结（来自于一个讲师的总结）

    选择器 基本选择器:id class 标签 eq()查找具体的列表中的元素:$('ul li:eq(n)').eq(n) 层 :div p,div>p 查找:find 选中元素中再查找子元素,p ...

  3. [flask 优化] 由flask-bootstrap,flask-moment引起的访问速度慢的原因及解决办法

    一周时间快速阅读了400页的<javascript基础教程>,理解了主要概念.虽然对jquery.ajax.json这些方法的运用还不熟练,但在理清了概念之后解决了一个很久之前的疑问. 我 ...

  4. 【转】用systemJS+karma+Jasmine+babel环境去编写简单的ES6工程

    原文链接:http://www.cnblogs.com/shuoer/p/7779131.html 用systemJS+karma+Jasmine+babel环境去编写简单的ES6工程 首先解释下什么 ...

  5. C#使用Xamarin开发可移植移动应用终章(11.获取设备信息与常用组件,开源一个可开发模版.)

    前言 系列目录 C#使用Xamarin开发可移植移动应用目录 源码地址:https://github.com/l2999019/DemoApp 可以Star一下,随意 - - 说点什么.. 本系列,终 ...

  6. Java SE 8 流库（二）

    1.3. filter,map,flatMAP方法 流的转换会产生一个新流,它的元素派生出自另一个流中的元素: Stream<T> filter(Predicate<? super ...

  7. （一）—Linux安装与硬盘分区

    相信很多人对linux充满了喜爱,尤其是技术人员,玩惯了windows更想尝试一下这个系统.关于它的优点多多,当然,你的好你的坏,用过才明白!下面我这个菜鸟也来玩装个玩玩. 我不会那么冲动,上来就把自 ...

  8. （二）—Linux远程连接与常用命令

    要学linux ,一定得用命令界面的,怎么也得是shell语言,用就最难最原始的,用的人都是专家,历史最少也得30年,不管有三七二十一上来就敲ls ,先看看当前目录都有什么.一口专业的linux范儿, ...

  9. Web离线应用解决方案——ServiceWorker

    什么是ServiceWorker 在介绍ServiceWorker之前,我们先来谈谈PWA.PWA (Progressive Web Apps) 是一种 Web App 新模型,并不是具体指某一种前沿 ...

  10. Java---String总结

    JAVA中的String类,不管是日常开发,或者是面试,都是常用的类之一,所以写在这里也为为了总结,方便以后的查阅与复习.   特点: 1.Java中所有的类中,String是使用最多的一个类 2.是 ...