CSS3选择器

最新推荐文章于 2022-11-17 22:02:01 发布

Namnan

最新推荐文章于 2022-11-17 22:02:01 发布

阅读量61

点赞数

文章标签： css

本文链接：https://blog.csdn.net/litternannan/article/details/105235511

版权

CSS3选择器(权重为10)
如div的权重为1，[]权重为10，即11大于类选择器
而类选择器的权重为10

1.属性选择器

选择符	简介
E[attr]	选择具有attr的E属性
E[attr=“val”]	选择具有attr属性且属性值等于“val”的E属性
E[attr^=“val”]	选择具有attr属性且以“val”开头的E属性
E[attr$=“val”]	选择具有attr属性且以“val”结尾的E属性
E[attr*=“val”]	选择具有attr属性且含有“val”的E属性

<style>
</style>

<body>
//1.利用属性选择器可以不借助id
<input type="text" value="balab">
<input type="text">
<style>
     input[value]{
        color:pink;
        }
</style>

//2.属性等于值
<input type="text" >
<input type="password">
<style>
     input[type=text]{
        color:pink;
        }
</style>

//3.选择属性值开头的某些元素
<div class="icon1">1<.div>
<div class="icon2">2<.div>
<div class="icon3">3<.div>
<div class="icon4">4<.div>

<style>
    div[class^=icon]{
       color:red;
       }
</style>

//4.属性选择器可以选择属性值结尾的某些元素
<div class="1icon">1<.div>
<div class="2icon">2<.div>
<div class="3icon">3<.div>
<div class="4ic">4<.div>
<style>
    div[class$=icon]{
       color:red;
       }
</style>

</body>

2.结构伪类选择器

3.伪元素选择器
主要根据文档结构来选择元素，常用于根据父级选择器里的元素

选择符	简介
E:first-child	匹配父元素中第一个子元素E
E:last-child	匹配父元素中最后一个子元素E
E:nth-child(n)	匹配父元素中第n个子元素E
E:first-of-style	指定类型E的第一个
E:last-of-style	指定类型E的最后一个
E:nth-of-style（）	指定类型E的第n个

n可以是关键字
n如果数字，就是选择第n个元素，里面数字从1开始
n可以是关键字：even偶数，odd奇数
n也可以是公式：常见的公式如下（如果n是公式，则从0开始计算，但是第0个元素或者超出了元素的个数会被省略）
只写n默认选择所有元素
2n是偶数，2n+1是奇数，5n是5，10，15；
n+5第五个数开始包括第五个，直到最后
-n+5前五个，包括第五个

<ul>
   <li>1</li>
    <li>2</li>
     <li>3</li>
      <li>4</li>
       <li>5</li>
        <li>6</li>
         <li>7</li>
   </ul>

<style>
//1,选择ul里面的第一个孩子
ul li :first-child {
     background-color: pink;
     }

//2.选择其中某个
ul li : nth-chile(2) {}
ul li : nth-chile(even) {};//选偶数
ul li : nth-chile(odd) {};//选奇数



</style>

nth-child 和nth-of-type

<section>
    <p>小楠楠</p>
    <div>知心楠楠</div>
    <div>大楠楠</div>
</section>

<style>
     section div:nth-child(1) {
         background-color:red;
         }//无变化
         //因为执行的时候，nth-child会给所有的孩子表上序号，此时p为第一个序号。接着他要看div，发现是p所以就不执行


   section div:nth-of-type(1) {
         background-color:red;
         }//知心楠楠变红
</style>

3.伪元素选择器

选择符	简介
：：before	在元素内部的前面插入内容
：：after	在元素内部的后面插入内容

before和after创建一个元素，但是属于行内元素
新创建的这个元素在文档树中是找不到的，所以我们称为伪元素
语法：element：：before（）
before和after必须有content属性（里面写内容）
before在父元素内容的前面创建元素，after在父元素的后面插入元素
伪元素选择器和标签选择器一样，权重为1

1.直接插入内容和样式

<div></div>
<style>
   div::after {
   content:"";
   }
</style>

2.实现相关效果

.tupian::before {
      content:'';
      display:none;
      }
.tupian:hover::before{
      display:block;
     }

3.伪元素清除浮动

.clearfix:before,clearfix.after {
  content:"";
  display:table;//转化成块级元素并且在一行显示
  }
  .clearfix:after{
   clear:both;
   }

其实是不需要在元素里插盒子，然后左右立起一堵墙这样子
*zoom：1（子元素浮动但父元素不变大变小）

清除浮动的理由

父盒子没高度
子盒子浮动了
影响下面布局

顺便捞一下链接伪类选择器

：link 选择所有未访问的链接
：visited 选择所有已被访问的链接
：hover 选择鼠标指针位于其上的链接
：active 选择活动链接（鼠标按下未弹起的链接）

链接伪类选择器注意事项

1.为了确保生效，得按LVHA的顺序
link，visited，hover，active
简介：love hate
2.链接需要单独的样式

：focus伪类选择器

用于选取获得焦点的表单元素
焦点就是光标，一般情况类表单元素才能获取，因此这个选择器也主要针对表单元素来说

 input:focus {
    }

Namnan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3选择器

CSS3选择器(权重为10)如div的权重为1，[]权重为10，即11大于类选择器而类选择器的权重为101.属性选择器选择符简介E[attr]选择具有attr的E属性E[attr=“val”]选择具有attr属性且属性值等于“val”的E属性E[attr^=“val”]选择具有attr属性且以“val”开头的E属性E[attr$=“val”]选...
复制链接

扫一扫