CSS3新增的选择器

标签：col   属性   之间   email   sel   ack   count   china   选择器   

1. 层次选择器

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

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

• 选择具有指定属性名的元素   [属性名]
• 选择具有指定属性名并且属性值为指定   [属性名=属性值]
• 选择具有指定属性名并且属性值中包含某个单词  [属性名 ~= 属性值]      单词与单词之间: 使用空格
• 选择具有指定属性名并且属性值中以某个单词开头: 单词之间使用空格分隔,   是连接符 - 连接的    [属性名 |= 属性值]
• 选择具有指定属性名并且属性值中以某个字符开头: [属性名 ^=值]
• 选择具有指定属性名并且属性值中以某个字符结尾: [属性名 $=值]
• 选择具有指定属性名并且属性值中包含某个字符结尾: [属性名 *=值]

• DOCTYPE html>
  html lang="en">
  head>
      meta charset="UTF-8">
      title>Documenttitle>
      style type="text/css">
          p{
              margin: 10px;
          }
          /*查找含有href属性为http的a元素*/
          /*a[href^="http"]{
              background-color: yellow;
          }*/
  
          /*a[href$="pdf"]{
              background-color: pink;
          }*/
  
          /*a[href*="age"]{
              background-color: orange;
          }*/
  
      style>
  head>
  body>
      p>a href="http://www.baidu.com/name.pdf">PDF文件a>p>
      p>a href="http://www.baidu.com/name.svg">SVGa>p>
      p>a href="http://www.baidu.com/name.ppt">PPT文件a>p>
      p>a href="http://www.baidu.com/age.xls">age.XLS文件a>p>
      p>a href="http://www.baidu.com/name.pdf">PDF文件a>p>
      p>a href="www.baidu.com/name.pdf">PDF文件a>p>
      p>a href="http://www.baidu.com/age.gif">age.GIF文件a>p>
      p>a href="http://www.baidu.com/name.pdf">PDF文件a>p>
  body>
  html>

   

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

• 选择第一个字符   :first-letter  
• 选择第一行 :first-line
• 选择第一个子元素   :first-child     位置的第一个  选择器:first-child:  选择指定第一个子元素选择器       注意: 选择器:  子元素   *
• 选择最后一个子元素   :last-child

• style>
          /* odd奇数,oven偶数 */
  
          /* 一个标签内，第一个为p的子元素 */
          p:first-child{
              background-color: red;
          }
  
      style>
  head>
  body>
      div>
          
  div里第一个p
          p>div里第二个pp>
      div>
  
      p>外面第一个pp>
      p>外面第二个pp>
      span>
          p>span里第一个pp>
      span>
  body>

  

• 选择的是子元素中某个指定选择器第一个   :first-of-type   类型的第一个   *
• 选择的是子元素中某个指定选择器类型最后一个 :last-of-type
• 选择只有一个子元素  :only-child
• 选择子元素某个类型只有一个  :only-of-type

• style>
          /* 每个地方的第一个p */
          p:first-of-type{
              background-color: red;
          }
      style>
  head>
  body>
      div>
          p>div里第一个pp>
          p>div里第二个pp>
      div>
  
      p>外面第一个pp>
      p>外面第二个pp>
      span>
          p>span里第一个pp>
      span>
  body>

  

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

input标签中常用的选择器

style type="text/css">
        /*input[type="text"]:enabled{
            background-color: #ffff00;
        }*/

        /*input[type="text"]:disabled{
            background: pink; 
        }*/

        /*input:required{
            background: #ff5aba; 
        }*/

        /*input:read-only{
            background: blue; 
        }*/

        /*::selection{
            color: red; 
        }*/
    style>
head>
body>
    form action="#" name="myform" method="get">
        name: input type="text" name="xiaohua">br>
        country: input type="text" disabled="disabled" value="china">br>
        input type="radio" checked="checked" value="male">男br>
        input type="radio" value="female">女br>
        
        p>普通的input元素:br>input value="hello">p>

        p>只读的input元素:br>input readonly="" value="hello">p>
        
        div>这是div元素的文本：div>
        input type="number" min="1" max="10" value="6">
        p>可选择的input元素: br>input type="text">p>

        p>必填的input元素: br>input required type="text">p>
        
        input type="email" value="w1418899@163.com">
    form>
body>
html>

CSS3新增的选择器

标签：col   属性   之间   email   sel   ack   count   china   选择器   

原文地址：https://www.cnblogs.com/64Byte/p/12546099.html