从零开始前端学习[30]:Css3中新增加的选择器二

来源：互联网发布：数据库mdf文件过大编辑：程序博客网时间：2024/06/10 17:35

Css3中新增加的选择器二

:not(.c1)伪类选择器
:empty 伪类选择器
:target伪类选择器
::selection伪类选择器
:disabled伪类选择器
:enabled伪类选择器
:checked伪类选择器

提示
博主:章飞_906285288
博客地址:http://blog.csdn.net/qq_29924041

:not(.c1)伪类选择器

not的意思顾名思义，也就是不去选择的意思，这里的伪类选择器的意思就是除了这个之外的意思

使用如下所示:.main .box1 p:not(.box1_p){background: red} //除了类.box1_p之外的变为red.main .box1 p:not(#box1_p){background: deeppink} //除了#box1_p之外的变为deeppink

:empty 伪类选择器

empty主要的意思是选中某个内容为空的标签元素，即如果其内部元素为空，那么就可以选中，如果内部是有元素的(包括文字)，这个时候选中的偶是无效的

.main .box2 p:empty{background: greenyellow}即选中内容为空的p标签元素，

:target伪类选择器

我们知道target是目标的意思，在css里面只有锚点的才有目标这一说，所以这个是需要结合href和id来使用的

<p ><a href="#box3_p3_2">点击</a></p><p id="box3_p3_2">3_2</p><p ><a href="#box3_p3_4">点击</a></p><p id="box3_p3_4">3_4</p>.main .box3 p:target{background:blue} //点击的时候，选中锚点的那个元素标签

::selection伪类选择器

从上面可以看到，这个selection是有两个：：的，所以这个选择器其实主要是针对文本背景选择的；

 <div class="box4">    <span>不积跬步无以至千里，不积小流无以成江河。山外青山楼外楼，没有比脚更远的路，没有比人更高的山</span>  </div> .main .box4 span::selection{background: deeppink}

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>  <meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->  <meta name="Generator" content="EditPlus®">   <!--编辑器的名称-->  <meta name="Author" content="作者是谁">         <meta name="Keywords" content="关键词">  <meta name="Description" content="描述和简介">  <style type="text/css">                                                body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}        ul,ol{margin: 0; list-style: none; padding: 0;}        a{ text-decoration: none; }        *{ margin: 0; padding: 0; }    .main{width: 1200px ;margin: 20px auto}    .main div{width: 200px;margin: auto;box-shadow: 0 0 10px 0 #00dd00}    .main div p{width: 40px;height: 40px;box-shadow: 0 0 10px 0 #000;margin: auto;text-align: center;line-height: 40px}    .main .box1 p:not(.box1_p){background: red}    .main .box1 p:not(#box1_p){background: deeppink}    .main .box2 p:empty{background: greenyellow}    .main .box3 p:target{background:blue}    .main .box4 span::selection{background: deeppink}  </style></head><body><div class="main">  <div class="box1">    <p class="box1_p">1_1</p>    <p >1_2</p>    <p id="box1_p">1_3</p>    <p >1_4</p>  </div>  <div class="box2">    <p >2_1</p>    <p >2_2</p>    <p ></p>    <p >2_4</p>  </div>  <div class="box3">    <p ><a href="#box3_p3_2">点击</a></p>    <p id="box3_p3_2">3_2</p>    <p ><a href="#box3_p3_4">点击</a></p>    <p id="box3_p3_4">3_4</p>  </div>  <div class="box4">    <span>不积跬步无以至千里，不积小流无以成江河。山外青山楼外楼，没有比脚更远的路，没有比人更高的山</span>  </div></div></body></html>

以下是一些效果
这里写图片描述

:disabled伪类选择器

disable伪类选择器主要是针对表单元素来说的，当表单元素的状态是disable的时候，这个时候会去进行选中

     用户名:<input type="text" disabled/><br>     .main .box1 input:disabled{border: 5px solid greenyellow}

:enable伪类选择器

与disable相反的就是enable伪类选择器，input表单默认的属性值为enable，所以不用去做一些设置

.main .box1 input:enabled{border: 3px solid deeppink}

checked伪类选择器

checked伪类选择器是针对radia属性和checked属性，即单选标签和多选标签来说的

<div class="box2"><form action="">  <input type="radio" name="fruit" id="apple"><lable for="apple">苹果</lable>  <br>  <input type="radio" name="fruit" id="banana"><lable for="banana">香蕉</lable>  <br>  <input type="radio" name="fruit" id="oriange"><lable for="oriange">橘子</lable>  <br>  <input type="radio" name="fruit" id="pear"><lable for="pear">梨子</lable></form>

 .main .box2 input:checked{box-shadow: 0 0 10px 0 red}

具体的代码如下所示:

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Title</title>  <meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->  <meta name="Generator" content="EditPlus®">   <!--编辑器的名称-->  <meta name="Author" content="作者是谁">         <meta name="Keywords" content="关键词">  <meta name="Description" content="描述和简介">  <style type="text/css">                                                body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}        ul,ol{margin: 0; list-style: none; padding: 0;}        a{ text-decoration: none; }        *{ margin: 0; padding: 0; }    .main{width: 1200px ;margin: 20px auto}    .main div{width: 300px;margin: auto;box-shadow: 0 0 10px 0 #00dd00;padding-bottom: 10px}    .main .box2 input:checked{box-shadow: 0 0 10px 0 red}  /**选中被选中的选择框的时候，这个时候会触发器变化*/    .main .box1 input:disabled{border: 5px solid greenyellow}    .main .box1 input:enabled{border: 3px solid deeppink}  </style></head><body><div class="main">  <div class="box1">    <form action="">      用户名:<input type="text" disabled/><br>      密码:<input type="text" />    </form>  </div>  <div class="box2">    <form action="">      <input type="radio" name="fruit" id="apple"><lable for="apple">苹果</lable>      <br>      <input type="radio" name="fruit" id="banana"><lable for="banana">香蕉</lable>      <br>      <input type="radio" name="fruit" id="oriange"><lable for="oriange">橘子</lable>      <br>      <input type="radio" name="fruit" id="pear"><lable for="pear">梨子</lable>    </form>  </div></div></body></html>

显示效果如下所示：
这里写图片描述

以上是新增加的相关部分，当然有些用的也相对比较少而已

欢迎访问博客

阅读全文

1 0