css3选择器

﹥>﹥吖頭↗ 提交于 2020-03-28 16:53:35

CSS3

  1. css3属性选择器
    • 根据属性名查找某个标签(E[attr]),代码如下
    • 复制代码
      <style>
          p {height: 30px; border: 1px solid black;}
          // 查找含有属性test的p标签
          p [test] {background: red;}
      </style>
      <body>
          <p test="dhl">dhl</p>
          <p test="xb">xiaobei</p>
      </body>
      复制代码
    • 查找某个属性名为固定值的某个标签(E[attr="value"]),测试代码如下:
    • 复制代码
      <style>
          p {height: 30px; border: 1px solid black;}
          // 查找test属性值为dhl的p标签
          p [test="dhl"] {background: red;}
      </style>
      <body>
          <p test="dhl">dhl</p>
          <p test="xb">xiaobei</p>
      </body>
      复制代码

       

    • E[attr~="value"] 指定属性名,并且具有属性值,此属性值是一个词列表,并且以空格隔开,其中词列表包含了一个value词,而且等号前面的"~"不能不写,详细代码如下:
    • 复制代码
      <style>
          p {height: 30px; border: 1px solid black;}
          // 查找含有属性test,并且属性值列表中含有young的p标签
          p [test~="young"] {background: red;}
      </style>
      <body>
          <p test="dhl young">dhl</p>
          <p test="xb">xiaobei</p>
      </body>
      复制代码

       

    • E[attr^="value"]指定了属性名,并且具有属性值,属性值是以value开头的,测试代码如下:
    • 复制代码
      <style>
          p {height: 30px; border: 1px solid black;}
          // 查找含有属性test,并且属性值以"girl"开头的p标签
          p [test^="girl"] {background: red;}
      </style>
      <body>
          <p test="gjrldhl">dhl</p>
          <p test="boyxb">xiaobei</p>
      </body>
      复制代码

       

    • E[attr$="value"]指定了属性名,并且具有属性值,属性值是以value结尾的,测试代码如下:
    • 复制代码
      <style>
          p {height: 30px; border: 1px solid black;}
          // 查找含有属性test,并且属性值以"dhl"结尾的p标签
          p [test$="dhl"] {background: red;}
      </style>
      <body>
          <p test="gjrldhl">dhl</p>
          <p test="boyxb">xiaobei</p>
      </body>
      复制代码

       

    • E[attr*="value"] 指定了属性名,并且有属性值,而且属性值中包含了value,测试代码省略
    • E[attr|="value"] 指定了属性名,并且属性值为value或者以"value-"开头的值
  2. css3结构性伪类
    • E:nth-child(n),表示E父元素中的第n个子节点,测试代码如下:
    • 复制代码
      <style>
          p {height: 30px; border: 1px solid black;}
          p: nth-child(1) {background: red;}
      </style>
      <body>
          <p>1</p>
          <p>2</p>
          <p>3</p>
          <p>4</p>
          <p>5</p>
      </body>
      复制代码

       

    • E:nth-child(even),表示E父元素中的偶数子节点,odd表示奇数子节点;
    • E:nth-child(2n),2n-1, 3n,,,
    • p:nth-child(2)找到p标签父级下的第二个子元素,并且这个元素还得是p标签,如果不是p标签,则不生效
    • E:nth-last-child(2),表示E的父元素的所有子节点中的倒数第二个
    • E:nth-of-type(2) {background: red}找到p标签父元素下的第二个p标签
    • E:nth-last-of-type(n),表示E的父元素的所有子节点倒数第n个
    • E:first-child  E元素父节点的第一个子节点
    • E:empty 表示E元素没有子节点,注意:子节点中包含文本节点
    • E:only-of-type表示E的父元素中只有一个子节点,且这个唯一的子节点的类型必须是E
  3. css3选择器-伪类
    • E:target表示当前的URL片段的元素类型,这个元素必须是E,代码如下:
    • 复制代码
      <style>
          div {width: 200px; height: 200px; background: black; font:50px/200px "微软雅黑"; color: #fff; text-align:center; display:none;}
          div:target {display:block;}
          
      </style>
      <body>
          <a href="#div1">div1</a>
          <a href="#div2">div2</a>
          <div id="div1"></div>
          <div id="div2"></div>
      </body>
      复制代码

       

    • E:disabled表示不可点击的表单控件,E:enabled表示可点击的表单控件
    • 复制代码
      <style>
          input{width:100px;height:200px; color:#000;}
          input:enabled {color;red;}
          input:disabled {color:blue;}
      </style>
      <body>
          <input type="text" value="请输入" disabled />
      </body>
      复制代码

       

    • E~F表示与E毗邻的F元素
    • 复制代码
      <style>
          p~h1{background: red;}
      </style>
      
      <body>
          <h1>h</h1>
          // p标签之后的两个h1标签均变为红色
          <p>p1</p>
          <h1>red</h1>
          <h1>red</h1>
      </body>
      复制代码

       

    • 文本相关的伪类:E:first-line表示E元素中的第一行,E:first-letter:表示E元素中的第一个字符, E::selection表示E元素在用户选中文字时
    • 复制代码
      <style>
          p {widht: 300px; height: 300px; border: 1px solid black; font: 10px "微软雅黑"; padding: 10px;}
          p: first-line{ background: red;}
          p: first-letter{font-size: 30px;}
          p::selection{background#F60; color: #690;}
      <style>
      <body>
      <p>hahaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
      </body>
      复制代码

       

    • E::before生成内容在E元素前,E::after生成内容在E元素后
    • E:(not)排除掉某一项,讲解代码如下:
    • 复制代码
      <style>
          h1:not(.h2){background: red;}
      </style>
      <body>
          <h1>h1</h1>
          <h1 class="h2>h1</h1>
          <h1>h1</h1>
      </body>
      复制代码

       

  4. css3新增颜色模式
    • rgba: r:red, g: green, b: blue, a:alpha(可以解决一个问题:单纯的给某个标签设置透明度造成里面的全部都透明度改变了,所以可以通过rgba来改变透明度)
    • 文字阴影:text-shadow: 0 0 10px red; 分别是水平方向,垂直方向,模糊程度,颜色
    • 多层阴影: text-shadow: 0 0 10px blue, 10px 10px 10px green;
    • text-shadow: x y blur color;    x:横向偏移, y:纵向偏移,blur: 模糊距离, color: 阴影颜色
    • 文字方向:  direction: rtl; 一定要配合unicode-bidi使用,即:unicode-bidi:bidi-override;
    • 省略文本的处理方式: text-overflow: clip(无省略号)ellipse(省略号);注意配合:overflow:hidden和white-space:nowrap一起使用;
    • 自定义文字,转换字体格式生成兼容代码:http://www.fontsquirrel.com/fontface/generator
    • 复制代码
      @font-face {
          font-family: ‘miaov';
          src: url('111-webfont.eot');
          src: url('111-webfont.eot?#iefix') format('embedded-opentype'),
               url('111-webfont.woff') format('woff'),
               url('111-webfont.ttf') format('truetype'),
               url('111-webfont.svg#untitledregular') format('svg');
          font-weight: normal;
          font-style: normal;
      }
      复制代码
    •  

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!