CSS3选择器样式

最新推荐文章于 2024-04-24 10:57:13 发布
最新推荐文章于 2024-04-24 10:57:13 发布
阅读量953 收藏 1
点赞数
分类专栏： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lamenw/article/details/68062260
版权

li：after元素first-letter

      <元素>:after{
            content:插入文字
         }
         //也可以插入其他内容
         <元素>:after{
             content:url(text.wav)
         }
         after伪元素选择器的一个使用示例，在该示例中有一个ul列表，这个ul列表的内容为某个网站上播放电影的
         节目清单。该列表中有几个列表项目，每个列表项目存放了对于某部电影的超链接，使用after伪元素选择器的
         每个超链接的后面加入（仅于测试，请勿用于商业用途）的文字，并且将文字颜色设为红色。

        <style>
        li:after{
           content:"(仅用于测试，请勿用于商业用途。)";
           font-size:12px;
           color:red;
        }
        </style>
    </head>
    <body>
  
        <h1>电影清单</h1>
      <ul>
          <li><a href="movie1.mp4">狄仁杰之通天帝国</a></li>
          <li><a href="movie2.mp4">精武风云</a></li>
          <li><a href="movie3.mp4">大笑江湖</a></li>

      </ul>

显示如下：

   

first-letter

<head>
        <title></title>
        <meta charset="UTF-8">
        <link href="css/style.css" rel="stylesheet">
        <style>
        p:first-letter{
            color:#0000ff
        }
        </style>
    </head>
    <body>
        <p>This is an english text.</p>
        <p>这个是第一段中文文字</p>

显示如下：
    </body>

  root选择器

       再使用样式指定root元素与bod元素的背景时，根据不用的指定条件背景的显示
        范围会有所变化，这一点请注意。如同样是上面这个示例，如果采取如下所示的样式，
        不使用root选择器来指定root元素的背景色，只指定body元素的背景色，则整个页面
        就全部变成绿色的了

    <style>
        :root{
            background-color:yellow;
        }
        body{
            background-color:limegreen;
        }
        </style>
    </head>
    <body>
   
     <h1>选择器概述</h1>
     <p>&nbsp;&nbsp;&nbsp;&nbsp;选择器是CSS3中一个重要的内容。首先需要
         说明的是，使用选择器的目的是为了提高开发人员书写或修改样式表时的工作
         效率。因为在样式表中，一般会书写大量的代码，在大型网站中国，样式表中

显示如下


         的代码可能会达到几千行。
     </p>
    </body>


not选择器元素

        再使用样式指定root元素与bod元素的背景时，根据不用的指定条件背景的显示

        范围会有所变化，这一点请注意。如同样是上面这个示例，如果采取如下所示的样式，
        不使用root选择器来指定root元素的背景色，只指定body元素的背景色，则整个页面
        就全部变成绿色的了；

  <style>
            body *:not(h1)
            {
            background-color:yellow;
             }
        </style>
       
    </head>
    <body>
    
     <h1>选择器概述</h1>
     <p>&nbsp;&nbsp;&nbsp;&nbsp;选择器是CSS3中一个重要的内容。首先需要
         说明的是，使用选择器的目的是为了提高开发人员书写或修改样式表时的工作
         效率。因为在样式表中，一般会书写大量的代码，在大型网站中国，样式表中
         的代码可能会达到几千行。
     </p>

显示如下：
    </body>

empty选择器：

   使用empty选择器来指定当元素中内容为空白时使用的样式。可以使用empty选择器
        来指定当表格中某个单元格内容为空白时，该单元格背景为黄色。

        <style>
         :empty{
             background-color:yellow;
         }
        </style>
    </head>
    <body>
     
      <table border="1" cellpagding="0" cellspacing="0">
          <tr><td>A</td><td>B</td><td>C</td></tr>
          <tr><td>D</td><td>E</td><td></td></tr>
      </table>

显示如下：


target选择器：

   使用target选择器来对页面中某个target元素（改元素的id元被当做页面中的超链接
        来使用）指定样式，该样式只有在用户点击了页面中的超链接，并且跳转到target元素
        后起作用。

  <style>
        :target{
            background-color:yellow;
        }
        </style>
    </head>
    <body>
     
     <p id="menu">
         <a href="#text1">示例文字1</a>|
         <a href="#text2">示例文字2</a>|
         <a href="#text3">示例文字3</a>|
         <a href="#text4">示例文字4</a>|
         <a href="#text5">示例文字5</a>
     </p>
     <div id="text1">
         <h2>示例文字1</h2>
         <p>...此处略去</p>
     </div>
     <div id="text2">
         <h2>示例文字2</h2>
         <p>...此处略去</p>
     </div>
     <div id="text3">
         <h2>示例文字3</h2>
         <p>...此处略去</p>
     </div>
     <div id="text4">
         <h2>示例文字4</h2>
         <p>...此处略去</p>
     </div>
       <div id="text5">
         <h2>示例文字5</h2>
         <p>...此处略去</p>
     </div>
    </body>


first-child和last-child选择器：

如果要对第一个项目列表和最后一个项目列表分别指定不同的背景色，目前采取两个列表加上

 <style>
        li:first-child{
            background-color:yellow;
        }
        li:last-child{
            background-color:skyblue;
        }
        </style>
    </head>
    <body>
        如果要对第一个列表项
      <h2>列表A</h2>
     <ul>
         <li>列表项目1</li>
         <li>列表项目2</li>
         <li>列表项目3</li>
         <li>列表项目4</li>
         <li>列表项目5</li>
     </ul>
    </body>

显示如下：


 nth-child选择器与nth-last-child选择器

   如果使用nth-child选择器与nth-last-child选择器，不仅可以指定某个元素第一个
        子元素以及最后一个子元素的样式，还可以针对父元素中某个指定序号的子元素来指定
        样式。这两个选择器是first-child 及 last-child的扩展选择器。

    <style>
        li:nth-child(2){
            background-color:yellow;
        }
        li:nth-last-child(2){
            background-color:skyblue;
        }
        </style>
    </head>
    <body>
     
     <h2>列表A</h2>
     <ul>
         <li>列表项目1</li>
         <li>列表项目2</li>
         <li>列表项目3</li>
         <li>列表项目4</li>
         <li>列表项目5</li>
     </ul>
    </body>

显示如下



对所有第奇数个子元素或第偶数个子元素使用样式：

除了对指定序号的子元素使用样式以外，nth-child选择器与nth-last-child选择器还可以用来对某个父元素

中所有的第奇数个子元素或第偶数个子元素使用样式。使用方法如下：

nth-child(odd){

//指定样式}

//所有正数下来的第偶数个子元素

<子元素>:nth-child(even){

//指定样式}

//所有倒数上去的第奇数个子元素

<子元素>:nth-last-child(odd){

//指定样式}

//所有倒数上去的第偶数个子元素

<子元素>:nth-last-child(even){

//指定样式}

 <head>
        <title></title>
        <meta charset="UTF-8">
        <link href="css/style.css" rel="stylesheet">
        <style>
        li:nth-child(odd){
            background-color:yellow;
        }
        li:nth-child(even){
            background-color:skyblue;
        }
        </style>
    </head>
    <body>
       <h2>列表A</h2>
     <ul>
         <li>列表项目1</li>
         <li>列表项目2</li>
         <li>列表项目3</li>
         <li>列表项目4</li>
         <li>列表项目5</li>
     </ul>

显示如下：



nth-of-type选择器与nth-last-of-type选择器:

为了让第奇数篇文章的标题与第偶数篇文章的标题的背景色不一样，我们首先使用nth-child选择器来进行指定，指定第奇数篇文章的标题背景色为黄色，

第偶数篇文章的标题背景色为浅蓝色。

   <style>
           h2:nth-child(odd){
               background-color:yellow;
           }
          h2:nth-child(even{
              background-color:skyblue;
          })
        </style>
    </head>
    <body>
       <h2>文章标题A</h2>
       <p>文章正文</p>
       <h2>文章标题B</h2>
       <p>文章正文</p>
       <h2>文章标题C</h2>
       <p>文章正文</p>
       <h2>文章标题D</h2>
       <p>文章正文</p>
    </body>


 

nth-of-type和nth-last-of-type奇数与偶数的设置

    <style>
          h2:nth-of-type(odd){
              background-color:yellow;
          }
          h2:nth-of-type(even){
              background-color:skyblue;
          }
        </style>
    </head>
    <body>
       <h2>文章标题A</h2>
       <p>文章正文</p>
       <h2>文章标题B</h2>
       <p>文章正文</p>
       <h2>文章标题C</h2>
       <p>文章正文</p>
       <h2>文章标题D</h2>
       <p>文章正文</p>
    </body>


nth-child(n)选择器

      使用nth-child选择器，只需在"nth-child(n)"语句处，把参数n改成可循环αn+β的形式就可以了。
        α表示每次循环中共包括几种样式，β表示指定的样式在循环中所处位置。如此处是4中背景色作为一组

     <style>
        li:nth-child(4n+1){
            background-color:yellow;
        }
        li:nth-child(4n+2){
            background-color:limegreen;
        }
        li:nth-child(4n+3){
            background-color:red;
        }
        li:nth-child(4n+4){
            background-color:white;
        }
        </style>
    </head>
    <body>
     
      <ul>
          <li>列表项目1</li> 
          <li>列表项目2</li>
          <li>列表项目3</li>
          <li>列表项目4</li>
          <li>列表项目5</li>
          <li>列表项目6</li>
          <li>列表项目7</li>
          <li>列表项目8</li>
          <li>列表项目9</li>
          <li>列表项目10</li>
          <li>列表项目11</li>
          <li>列表项目12</li>
      </ul>
    </body>



    <style>
         /*li:nth-child(1):nth-last-child(1){
             background-color:yellow;
         }*/
         li:only-child{
             background-color:red;
         }


只对唯一样式进行显示
        </style>
    </head>
    <body>
         <h2>ul列表A</h2>
         <ul>
             <li>列表项目A01</li>
         </ul>
         <h2>ul列表B</h2>
         <ul>
             <li>列表项目B01</li>
             <li>列表项目B02</li>
             <li>列表项目B03</li>
         </ul>
    </body>

显示如下：


选择器：E：hover 、E:active、E：focus：

E：hover选择器被用来指定当鼠标指针到元素上时元素所使用的样式：样式方法如下：

<元素>:hover{

//指定样式

}

可以在“<元素>"中添加元素的type属性，使用方法如下：

input[type=“text”]:hover

//指定样式

}

另外，所有UI元素状态伪类选择器的使用方法均与此类似:

。E：active选择器被用来指定元素被激活（鼠标在元素上按下还没有松开）时使用的样式。

。E：focus选择器被用来指定元素获得光标焦点时使用的样式，主要在文本框控件获得焦点并进行文字输入时使用

  <style>
        input[type="text"]:hover{
            background-color:greenyellow;
        }
        input[type="text"]:focus{
            background-color:skyblue;
        }
        input[type="text"]:active{
            background-color:yellow;
        }
        </style>
    </head>
    <body>
     <form>
         <p>姓名：<input type="text" name="name"/></p>
         <p>地址：<input type="text" name="name"></p>
     </form>
    </body>

显示如下：


伪类选择器：E:read-only伪类选择器与E：read-write伪类选择器

 <style>

           input[type="text"]:read-only{
               background-color:gray;
           }
           input[type="text"]:read-write{
               background-color:greenyellow;
           }
           input[type="text"]:-moz-read-only{
               background-color:gray;
           }
           input[type="text"]:-moz-read-write{
               background-color:greenyellow;
           }
        </style>
    </head>
    <body>
     
      <form>
          <p>名前：<input type="text" name="name"/></p>
          <p>地址：<input type="text" name="address" value="江苏省常州市"
          readonly="readonly"/></p>
      </form>
    </body>

代码显示如下：


E::selection伪类选择器

    .E:read-only伪类选择器用来指定元素处于只读状态时的样式。
        .E:read-write伪类选择器用来指定当元素处于非只读状态时的样式。
        在Firefox浏览器中，需要写成“-moz-read-only”或“-moz-read-write”的形式

  <style>
        p::selection{
            background:red;
            color:#fff;
        }
        p::-moz-selection{
            background:red;
            color:#fff;
        }
        input[input="text"]::selection{
            background:gray;
            color:#fff;
        }
        input[input="text"]::-moz-selection{
            background:gray;
            color:#fff;
        }
        td::selection{
            background:green;
            color:#fff;
        }
        td::-moz-selection{
            background:green;
            color:#fff;
        }
        </style>
    </head>
    <body>
         E::seleciton伪类选择器的使用示例，在该示例中分别给出了一个P元素，一个文本框控件以及
         一个表格。当P元素处于选中状态时，被选中文字变成红色。当文本框控件处于选中状态时，被选中
         文字变成货色；当表格处于选中状态时，被选中文字变成绿色。
      <p>这是一段测试文字。</p>
      <input type="text" value="这是一段测试文字。"/><p/>
      <table border="1"cellspacing="0" cellpadding="0"> 
      <tr>
          <td>测试文字</td>
          <td>测试文字</td>
      </tr>
        <tr>
            <td>测试文字</td>
            <td>测试文字</td>
        </tr>

显示如下：


    </body>



 E：invalid伪类选择器与E:valid伪类选择器

E:invalid伪类选择器来指定，当元素内容不能通过HTML5通过使用元素的诸如required、pattern等属性所指定的检查或元素内容不符合元素规定格式

（例如通过使用type属性值为email的input元素来限定元素内容必须为有限的email格式）时的样式

E:valid伪类选择器用来指定，当元素内容通过HTML5通过使用元素的诸如required,pattern等属性所指定的检查或元素内容符合元素的规定格式（例如通过

使用type属性值为email的input元素来限定元素内容必须为有效的email格式）时的样式。

  <style>
        input[input="text"]:invalid{
            background-color:red;
        }
        input[input="text"]:valid{
            background-color:white;
        }
        </style>
    </head>
    <body>
        <form>
            <p>请输入任意文字：<input type="text" required></p>
        </form




E:required伪类选择器与E:optional伪类选择器

E:required伪类选择器用来指定允许使用requited属性，且已经指定了required属性的input元素
      、select元素以及textarea元素的样式
      E：optional伪类选择器用来指定允许使用required属性，且未指定required属性的inpu元素、select
      元素以及textarea元素的形式。

  如下使用两个输入框，不对输入住址的文本框指定required属性。同时通过E:required伪类选择器指定的

输入姓名的文本框边框为红色，宽度为3px.通过E；optional伪类选择器指定用于输入住址的文本框边框为黑色， 宽度为1px


 <style>
        input[type="text"]:required{
            border-color:red;
            border-width:3px;
        }
        input[type="text"]:optional{
              border-color:black;
            border-width:1px;
        }
        </style>
    </head>
    <body>
      
     <form>
      姓名:<input type="text" required placeholder="必须输入姓名"/><br/>
      住址:<input type="text"/>
      </form>


E:in-range伪劣选择器与E：out-of-range伪类选择器：

E：in-range伪类选择器用来指定当元素的有效值被指定在一段范围之内（通常通过min属性值与max属性值

来限定），且实际输入值在改范围内时使用的样式

E：out-of-range伪劣选择器用来指定当元素的有效值被限定在一段范围之内（通长通过min属性值与max属性值

来限定），但实际输入值在改范围之外时使用的样式

示例页面中

 <style>

          input[type="numbaer"]:in-range{
              background-color:white;
          }
          input[typr="number"]:out-of-range{
              background-color:red;
          }
        </style>
    </head>
    <body>
        <form>
            请输入1到100之内的数值：<input type=number min="0" max="100">
         </form>


通用兄弟元素选择器：

<子元素>~<子元素之后的同级兄弟元素{

//指定样式

}

该示例中对所有的div元素之后的，与div元素处于同级的P元素指定其背景色为绿色，但是对div元素内部的P元素的背景色不做指定。

   <style>
           div~p{
               background-color:#00ff00;
           }
        </style>
    </head>
    <body>
      <div style="width:733px;border:1px solid #666;padding:5px;"></div>
      <div>
          <p>P元素为div元素的子元素</p>
          <p>P元素为div元素的子元素</p>
      </div>
      <hr/>
         <p>P元素为div元素的兄弟元素</p>
          <p>P元素为div元素的兄弟元素</p>
      <hr/>
          <p>P元素为div元素的兄弟元素</p>
       <hr/>
           <p>p元素为div元素的子元素</p>
        <hr/>
            <p>p元素为div元素的兄弟元素</p>
    </body>


Ailsa-show
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS 样式 （三） 选择器
林彬的专栏
05-18 415
选择器（重点） 要想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。在CSS中， 执行这一任务的样式规则部分被称为选择器（选择符）。 标签选择器（元素选择器） 标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。其基本语法格式如下： 标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 或者 元素名{属性1:属性值...
CSS3选择器
打工人 打工魂
09-06 170
选择器 每一条CSS样式声明（定义）由两部分组成： 选择器{ 样式; } body{ font-size:12px; color:red; } 选择器指明了{}中的样式的作用对象，即样式作用于网页中的哪些元素。 标签选择器 即html代码中的标签。 如：为h1标签设置样式。 h1{ font-weight:normal; color:red; } 类选择器 最常用的选择器。 语法： .类选器名称{css样式代码;} <!D
select点击选中后css样式,两种方式实现css取消页面鼠标双击选中文字或单击拖动选中文字的效果...
weixin_29928971的博客
08-03 1912
问题描述我们知道浏览器页面上的文字正常情况下我们是可以双击选中、或者单击鼠标横向拖动也能选中的，选中以后可以右击出现面板然后去复制什么的。但是有的时候，这种效果我们并不想要的，比如用户点快了的时候，所以我们需要禁用这种效果，本文记录一下禁用选中效果的方式鼠标选中的效果图如下方式一：使用user-select属性css设置user-select:none;即可，若需要做浏览器兼容处理，请看下方完整写...
css实现给奇数或者偶数元素加样式
黑玫瑰
04-08 1909
html <ul> <li>ho</li> <li>ho</li> <li>ho</li> <li>ho</li> <li>ho</li> </ul> css li:nth-child(even) { color:red; } even表示奇数行，odd表示偶数行; ...
CSS选择器全解（超详细）
最新发布
weixin_44201223的博客
04-24 634
标签选择器 类选择器 id选择器 通配符选择器 后代选择器 子代选择器 并集选择器 交集选择器 伪类选择器 超链接伪类 结构伪类选择器 伪元素选择器
css3 偶数奇数,css 设置奇数行偶数行样式(示例代码)
weixin_34382844的博客
08-04 1363
.list ul li:nth-child(even){ ...} //li的偶数行样式.list ul li:nth-child(odd){ ...} //li的奇数行样式.list ulli:nth-child(1){ top:0;} //第一个li.list ulli:nth-child(2){ top:30px;} //第二个li部分情况下的解决方案.li...
html中双数选择器,css3 nth-child选择器
weixin_39715907的博客
06-03 985
c用能境战求道，重件开又是正易里是了些之框ss3 nth-child选择求圈分件圈浏第用代是水刚道。的它还器c享一多很。等考指的似是很面一也者效下行插ss3的nth-child选择器，乍看起来很简单，其实不是朋支不器几事为的时后级功发发来久都这样含制层是请些间例业多在上屏屏有到那么容易。简单用法p:nth-child(n) // 选择属于其父元素的第n个子元素的每个 元素p:nth-child(...
css——奇数、偶数、指定数样式
weixin_45472548的博客
10-11 3493
第一种：简单数字序号写法 :nth-child(number) //直接匹配第number个元素。参数number必须为大于0的整数 例如：li:nth-child(3){background:orange;}/把第3个LI的背景设为橙色/ 第二种：倍数写法 :nth-child(an) //匹配所有倍数为a的元素。其中参数an中的字母n不可缺省，它是倍数写法的标志，如3n、5n 例如：li:nth-child(3n){background:orange;}/把第3、第6、第9、…、所有3的倍数的LI
CSS3 样式选择器
01-15
在定义CSS时，需要知道其书写语法和影响范围，此文档给你说明
CSS3 选择器 基本选择器介绍
12-13
那么从现在开始我们先丢开他们版本的区别，从头一起来看看CSS选择器的运用。 CSS是一种用于屏幕上渲染html，xml等一种语言，CSS主要是在相应的元素中应用样式，来渲染相对应用的元素，那么这样我们选择相应的元素就...
CSS3 选择器 属性选择器介绍
12-13
属性选择器早在CSS2中就被引入了，其主要作用就是对带有指定属性的HTML 元素设置样式。使用CSS3属性选择器，你可以只指定元素的某个属性，或者你还可以同时指定元素的某个属性和其对应的属性值。 从上一节展示的CSS...
让IE可以变相支持CSS3选择器
09-25
此外，还提到了另一种替代方案——cssQuery，由Dean Edwards创建，它是一个JavaScript组件，全面支持包括CSS3在内的各种CSS选择器。开发者可以使用cssQuery为IE浏览器动态添加样式，而在其他支持CSS3选择器的浏览器...
HTML5+CSS3 城市选择器
06-16
CSS3则负责这个选择器的视觉样式和动态效果。通过使用选择器（如类选择器、ID选择器和伪类选择器），可以精确控制各个元素的样式，包括颜色、字体、布局等。CSS3的过渡（transition）和动画（animation）效果可以使...
伪类(:first-child、:focus、:hover、:last-child、:nth-child(n)、:nth-last-child(n)等)和伪元素(::after、::before等)
weixin_41549971的博客
01-04 1184
伪类(:first-child、:focus、:hover、:last-child、:nth-child(n)、:nth-last-child(n)等)和伪元素(::after、::before等)
CSS3常用选择器及样式
Ifeng_iPhone的博客
07-23 390
1、常用样式 height: 50px //高度 width: 50px //宽度 color: red //颜色 background: #38d185 //背景颜色 float: left //浮动（靠左） display: block //展示 border-radius: 10px //圆角 text-align:center //文字居中 text-deco...
伪类 :after 显示在父类后面 （父类遮挡伪类一部分）实现层叠效果
心随梦飞
06-26 625
用CSS伪类实现父类和伪类的层叠
:before和：after在li中的应用
gabby____的博客
09-07 4364
一、after li:after   li+li+li:after 二、before li:before li+li+li:before
通过css3实现checkbox选择样式
hsany330的专栏
08-10 1069
前端开发过程中，由于不同浏览器间的不兼容性，相同的标签在不同的浏览器中显示不同的效果。尤其在移动端开发中，安卓与iOS表单元素显示各不相共，所以在前端页面开发过程中，需要统一相关样式，前端er需要自己开发相应组件去实现对应标签功能。 知识点： css3中before与after选择器，兄弟选择器，checked选择器 本示例通过css3实现浏览器下checkbox选中与未选中效果。 实现效果示例 1、html结构 <div class='checkbox'> <input
CSS3选择器支持情况一览
"此资源提供了一个CSS选择器的支持列表，主要关注CSS3选择器在不同浏览器中的兼容性情况。更新于2009年6月30日，提及Firefox 3.5的发布，该版本与其他现代浏览器如Safari 3.1及更高版本、Opera 9.64及更高版本以及...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值