CSS3选择器

最新推荐文章于 2023-09-03 14:05:10 发布

diligentkong

最新推荐文章于 2023-09-03 14:05:10 发布

阅读量1.5k

点赞数

分类专栏： CSS 文章标签： css3

本文链接：https://blog.csdn.net/diligentkong/article/details/67641721

版权

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

CSS3新增了许多灵活查找元素的方法，极大的提高了查找元素的效率和精准度。CSS3选择器与jQuery中所提供的绝大部分选择器兼容。
这里写图片描述
简单复习了一下，看看css3中新增的一些选择器.

属性选择器
E[attr]：选中带有arrt 属性的E元素
E[attr=”val”]:选中带有attr属性，且attr值为”val“的E元素
E[attr^=”val”]:选中带有attr属性，且attr值为以”val“开头的E元素
E[attr$=”val”]:选中带有attr属性，且attr值为以”val“结尾的E元素
E[attr*=”val”]:选中带有attr属性，且attr值为包含”val“的E元素
E[attr ~=”value”] 指定属性名，找到的是具有此属性名，且与其它属性名之间用空格隔开

<div class="box" title="我是第一个盒子" ></div>
    <div class="aabox1">1</div>
    <div class="bbbox2">2</div>
    <div class="box3aa">3</div>
    <div class="box4bb">4</div>
    <div class="aabox5bb">5</div>
    <div class="bbbox6aa">6</div>
    <div class="box7">7</div>
    <div class=”d1 d2”>8</div>

div[class~=”p1”]div带有属性，并且p1与其他值之间有空格隔开
div[class=”box1”] div带有属性，并且值为box1
div[class^=”aa”] div带有class属性，并且以aa开头
div[class$=”aa”]div 带有class属性并且值以aa结尾
div[class*=”aa”]div带有class属性，并且值包含aa

伪类选择器
结构伪类：通过结构进行筛选标志性符号冒号(:)
li:first-child :选择父元素中的第一个子元素
li:last-child :选择父元素中的最后一个子元素
li:nth-child(10):选择父元素中的第10个子元素
li:nth-child(23)选中第23个孩子
注意：编号是从1开始
li:nth-child(odd) 选择所有的奇数
li:nth-child(evev)选择所有的偶数
li:nth-child(n)选择父元素中的所有的元素 n 表示0,1,2,3，4…n，当n<1时无效
li:nth-child(2n)选择所有的偶数
li:nth-child(2n+1)选择所有的奇数
选择前5个：li:nth-child(-n+5) 因为n<1就无效啦
选择前8个同理li:nth-child(-n+8)
li:nth-last-child(1)从后往前选，选择第一个
选中后5个li:nth-last-child(-n+5)
注意 5-n 是无效的语法格式的问题，不信你自己动手试试
选择3的倍数 li:nth-child(3n)

<style type="text/css">
            li:nth-child(-n+5){
                font-size: 30px;
            }
            li:nth-last-child(-n+3){
                background-color: gold;
            }
        </style>

        <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>
        </ul>

empty伪类选择器
选中页面中内容为空的（不能有标签和文字）

 div{
     width: 300px;
     height: 100px;
     margin-top:20px;
 }
 div:empty{
     border:2px solid red;
 }

    <div><span></span></div>
    <div></div>

target伪类选择器
URL后面跟锚点#，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)，:target选择器用于选取当前活动的目标元素。
简单说：锚点在a标签中添加一个id id对应相应的标题
target配合锚点使用处于激活状态

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            nav{
                position: fixed;
                left: 0;
                top: 100px;
            }
            a{
                text-decoration: none;
                line-height: 40px;
                color: #333333;
            }
            .content{
                width: 800px;
                margin: 0 auto;
            }
            h2:target{
                color: red;
            }
        </style>
    </head>
    <body>
            <nav>
                <ul>
                    <li><a href="#title1">属性选择器</a></li>
                    <li><a href="#title2">伪类选择器</a></li>
                    <li><a href="#title3">empty选择器</a></li>
                    <li><a href="#title4">target选择器</a></li>
                    <li><a href="#title5">伪元素选择器</a></li>
                </ul>
            </nav>
        <div class="content">
            <h2 id="title1">属性选择器</h2>
            <p>你明白了什么是属性选择器了吗？</p>
            <h2 id="title2">伪类选择器</h2>
            <p>什么是伪类选择器了吗？</p>
            <h2 id="title3">empty选择器</h2>
            <p>明白什么是empty选择器了吗？</p>
            <h2 id="title4">target选择器</h2>
            <p>明白了什么是target选择器了吗？</p>
            <h2 id="title5">伪元素选择器</h2>
            <p>你明白什么是伪元素选择器了吗？</p>

        </div>
    </body>
</html>

伪元素::before和::after
伪元素的标志性符号双冒号（：：）配合content使用
给个例子，自己去体会吧

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            span{
                color: red;
                font-size: 30px;
            }
            span::before{
                content: "美好";
                color: gold;
                width: 100px;
                height: 100px;
                display:inline-block;
            }
            span::after{
                content: "海苔";
                color: green;
                width: 100px;
                height: 100px;
                display: inline-block;
                text-align: center;

            }
        </style>
    </head>
    <body>
        <span>时光</span>
    </body>
</html>

伪元素选择器
first-letter section placeholder
还是给个例子体会吧
first-letter伪对象仅作用于块对象。内联对象要使用该伪对象，必须先将其设置为块级对象。该伪类常被用来配合font-size属性和float属性制作首字下沉效果。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            p::first-letter{
                color:red;
                font-size:40px;
            }
            div.selection::selection{
                background-color: red;
                color: blue;
            }
            input::-webkit-input-placeholder{
                color: green;
            }
        </style>
    </head>
    <body>
        <p>我是一个乖宝宝，可爱的乖宝宝！</p>
        <p>We are family!</p>
        <div class="selection">
            Selection选中的区域！是选中的区域！恩！选中的区域！
        </div>
        <div class="proceholder">   
            <input type="text" placeholder="我是一个占位符咿呀咿呀哟！" />
        </div>
    </body>
</html>