1. 层次选择器

  • 子元素选择器: 只选择子元素    父选择器 > 子选择器
  • 后面紧相邻的兄弟元素:  选择器1 + 选择器2
  • 后面所有的兄弟元素:   选择器1 ~ 选择器2

2.属性选择器   [属性名]

  • 选择具有指定属性名的元素   [属性名]
  • 选择具有指定属性名并且属性值为指定   [属性名=属性值]
  • 选择具有指定属性名并且属性值中包含某个单词  [属性名 ~= 属性值]      单词与单词之间: 使用空格
  • 选择具有指定属性名并且属性值中以某个单词开头: 单词之间使用空格分隔,   是连接符 - 连接的    [属性名 |= 属性值]
  • 选择具有指定属性名并且属性值中以某个字符开头: [属性名 ^=值]
  • 选择具有指定属性名并且属性值中以某个字符结尾: [属性名 $=值]
  • 选择具有指定属性名并且属性值中包含某个字符结尾: [属性名 *=值]
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Document</title>
    6.     <style type="text/css">
    7.         p{
    8.             margin: 10px;
    9.         }
    10.         /*查找含有href属性为http的a元素*/
    11.         /*a[href^="http"]{
    12.             background-color: yellow;
    13.         }*/
    14.  
    15.         /*a[href$="pdf"]{
    16.             background-color: pink;
    17.         }*/
    18.  
    19.         /*a[href*="age"]{
    20.             background-color: orange;
    21.         }*/
    22.  
    23.     </style>
    24. </head>
    25. <body>
    26.     <p><a href="http://www.baidu.com/name.pdf">PDF文件</a></p>
    27.     <p><a href="http://www.baidu.com/name.svg">SVG</a></p>
    28.     <p><a href="http://www.baidu.com/name.ppt">PPT文件</a></p>
    29.     <p><a href="http://www.baidu.com/age.xls">age.XLS文件</a></p>
    30.     <p><a href="http://www.baidu.com/name.pdf">PDF文件</a></p>
    31.     <p><a href="www.baidu.com/name.pdf">PDF文件</a></p>
    32.     <p><a href="http://www.baidu.com/age.gif">age.GIF文件</a></p>
    33.     <p><a href="http://www.baidu.com/name.pdf">PDF文件</a></p>
    34. </body>
    35. </html>

3.过滤选择器:   :过滤条件

  • 选择第一个字符   :first-letter
  • 选择第一行 :first-line
  • 选择第一个子元素   :first-child     位置的第一个  选择器:first-child:  选择指定第一个子元素选择器       注意: 选择器:  子元素   *
  • 选择最后一个子元素   :last-child
    1. <style>
    2.         /* odd奇数,oven偶数 */
    3.  
    4.         /* 一个标签内，第一个为p的子元素 */
    5.         p:first-child{
    6.             background-color: red;
    7.         }
    8.  
    9.     </style>
    10. </head>
    11. <body>
    12.     <div>
    13.         <p>div里第一个p</p>
    14.         <p>div里第二个p</p>
    15.     </div>
    16.  
    17.     <p>外面第一个p</p>
    18.     <p>外面第二个p</p>
    19.     <span>
    20.         <p>span里第一个p</p>
    21.     </span>
    22. </body>

  • 选择的是子元素中某个指定选择器第一个   :first-of-type   类型的第一个   *
  • 选择的是子元素中某个指定选择器类型最后一个 :last-of-type
  • 选择只有一个子元素  :only-child
  • 选择子元素某个类型只有一个  :only-of-type
    1. <style>
    2.         /* 每个地方的第一个p */
    3.         p:first-of-type{
    4.             background-color: red;
    5.         }
    6.     </style>
    7. </head>
    8. <body>
    9.     <div>
    10.         <p>div里第一个p</p>
    11.         <p>div里第二个p</p>
    12.     </div>
    13.  
    14.     <p>外面第一个p</p>
    15.     <p>外面第二个p</p>
    16.     <span>
    17.         <p>span里第一个p</p>
    18.     </span>
    19. </body>

  • 选择第几个子元素   :nth-child(n) ,  下标:从1
  • 选择倒数第几个子元素   :nth-last-child(n)  下标:从1
  • 选择相同类型的第几个子元素  :nth-of-type(n)（常用）
  • 选择相同类型的倒数第几个子元素  :nth-last-of-type(n)

input标签中常用的选择器

  1. <style type="text/css">
  2.         /*input[type="text"]:enabled{
  3.             background-color: #ffff00;
  4.         }*/
  5.  
  6.         /*input[type="text"]:disabled{
  7.             background: pink;
  8.         }*/
  9.  
  10.         /*input:required{
  11.             background: #ff5aba;
  12.         }*/
  13.  
  14.         /*input:read-only{
  15.             background: blue;
  16.         }*/
  17.  
  18.         /*::selection{
  19.             color: red;
  20.         }*/
  21.     </style>
  22. </head>
  23. <body>
  24.     <form action="#" name="myform" method="get">
  25.         name: <input type="text" name="xiaohua"><br>
  26.         country: <input type="text" disabled="disabled" value="china"><br>
  27.         <input type="radio" checked="checked" value="male">男<br>
  28.         <input type="radio" value="female">女<br>
  29.  
  30.         <p>普通的input元素:<br><input value="hello"></p>
  31.  
  32.         <p>只读的input元素:<br><input readonly="" value="hello"></p>
  33.  
  34.         <div>这是div元素的文本：</div>
  35.         <input type="number" min="1" max="10" value="6">
  36.         <p>可选择的input元素: <br><input type="text"></p>
  37.  
  38.         <p>必填的input元素: <br><input required type="text"></p>
  39.  
  40.         <input type="email" value="w1418899@163.com">
  41.     </form>
  42. </body>
  43. </html>

CSS3新增的选择器的更多相关文章

  1. CSS3新增的选择器和属性

    <!doctype html>无标题文档 一.新增的选择器 CSS3新增的属性选择器 {除ie6外的大部分浏览器支持) 序号 选择器 含义 实例 1 E[att^="val&qu ...

  2. CSS3新增（选择器{属性选择器，结构伪类选择器，伪元素选择器}）

    1.属性选择器 属性选择器,可以根据元素特定的属性来选择元素,这样就不用借助 类 或者 id选择器. E [ att ]   选择具有 att 属性的 E 元素   例如:input [ value ...

  3. CSS系列：CSS3新增选择器

    1. CSS1定义的选择器 选择器 类型 说明 E 类型选择器 选择指定类型的元素 E#id ID选择器 选择匹配E的元素,且匹配元素的id为“id”,E选择符可以省略. E.class 类选择器 选 ...

  4. CSS选择器及CSS3新增选择器

    转自:http://www.cnblogs.com/libingql/p/4375354.html 1. CSS1定义的选择器 选择器 类型 说明 E 类型选择器 选择指定类型的元素 E#id ID选 ...

  5. 认识CSS3新增选择器和样式

    前端之HTML5,CSS3(二) CSS3新增选择器和样式 CSS3新增选择器 结构伪类选择器 :first-child:选取父元素中的第一个子元素的指定选择器 :last-child:选取父元素中的 ...

  6. CSS3 新增选择器

    CSS3 新增选择器 结构(位置)伪类选择器(CSS3) :first-child :选取属于其父元素的首个子元素的指定选择器 :last-child :选取属于其父元素的最后一个子元素的指定选择器 ...

  7. 总结CSS3新特性(选择器篇)

    CSS3新增了嗯- -21个选择器,脚本通过控制台在这里运行; ~: p ~ p { color : red;/*此条规则将用于p后边所有的p...就是除了第一个p的所有p,规则同p:not(:nth ...

  8. css3新增属性API

    写在前面:由于CSS5标准还未完全订下来,所以各种内核的浏览器都有自己的标准,为了不使属性混淆,所以各家在各自标准前加了一个前缀. -moz-  主要是firefox火狐 -webikt-主要是chr ...

  9. h5新增标签及css3新增属性

    - h5新增的标签 新增元素 说明 video 表示一段视频并提供播放的用户界面 audio 表示音频 canvas 表示位图区域 source 为video和audio提供数据源 track 为vi ...

随机推荐

  1. 【JavaScript】DOM之表单操作

    DOM 表单操作 1.获取表单 获取表单元素 以Document对象中forms属性来获取当前HTML页面所有表单集合以Document对象中表单的name属性值来获取表单元元素 <body&g ...

  2. 一起学习vue源码 - Object的变化侦测

    作者:小土豆biubiubiu 博客园:www.cnblogs.com/HouJiao/ 掘金:https://juejin.im/user/58c61b4361ff4b005d9e894d 简书:h ...

  3. Redis(6)——GeoHash查找附近的人

    像微信 "附近的人",美团 "附近的餐厅",支付宝共享单车 "附近的车" 是怎么设计实现的呢? 一.使用数据库实现查找附近的人 我们都知道, ...

  4. JetBrains 第二轮：再为免费全家桶续命三个月

    昨天分享了如何通过参与JetBrains的解密任务来获取正版全家桶的兑换码.今天 JetBrains 一早继续在Twitter推出第二波任务: 下面,我们就继续来一起参与一下,为我们的正版JetBra ...

  5. 通过欧拉计划学Rust编程（第500题）

    由于研究Libra等数字货币编程技术的需要,学习了一段时间的Rust编程,一不小心刷题上瘾. "欧拉计划"的网址: https://projecteuler.net 英文如果不过关 ...

  6. Azure CLI 简单入门

    Azure CLI 是什么 Azure 命令行接口 (CLI) 是用于管理 Azure 资源的 Microsoft 跨平台命令行体验. Azure CLI 易于学习,是构建适用于 Azure 资源的自 ...

  7. Django中ORM中的get与filter区别

    本文出自 “orangleliu笔记本” 博客,出处http://blog.csdn.net/orangleliu/article/details/38597593 Django的orm中get和fi ...

  8. javascript中怎么判断两个数据类型相等

    在 JavaScript 中,判断一个变量的类型尝尝会用 typeof 运算符,在使用 typeof 运算符时采用引用类型存储值会出现一个问题,无论引用的是什么类型的对象,它都返回 "obj ...

  9. AspNetCore3.1_Secutiry源码解析_3_Authentication_Cookies

    系列文章目录 AspNetCore3.1_Secutiry源码解析_1_目录 AspNetCore3.1_Secutiry源码解析_2_Authentication_核心流程 AspNetCore3. ...

  10. 表格树 tableTree 高度 默认maxHeight，在isFold下不起作用，后期改值 vue-table-with-tree-grid

    表格树 tableTree 高度 默认maxHeight,在isFold下不起作用,后期改值  vue-table-with-tree-grid mounted () { this.$refs.tab ...