文档章节

CSS3常见的几种选择器

沐风storm
 沐风storm
发布于 2016/12/28 10:18
字数 3247
阅读 8
收藏 0
  1. 基本选择器

    • 通配选择器~选择文档中所有的html元素,用一个*表示
    • 元素选择器~选择指定类型的的html元素
    • ID选择器~选择指定ID属性值为"id"的html元素,选择的时候前面加上一个#号
    • 类选择器~选择指定class属性值为"class"的任意多个html元素,选择的时候前面加上一个.号
    <!doctype  html>
    <html>
    <head>
        <meta charset="utf-8"/>
        <title>CSS选择器</title>
        <style>
            /*通配选择器*/
            *{
                margin: 0;
                padding: 0;
            }
            /*元素选择器*/
            ul{
                list-style: cricle;
            }
            /*ID选择器*/
            #header{
                height: 200px;
            }
            /*类选择器*/
            .intro{
                float: right;
            }
        </style>
    </head>
    <body>
        <div id="header">
            <ul class="nav">
                <li>基本选择器</li>
                <li>层次选择器</li>
                <li>伪类选择器</li>
                <li>伪元素</li>
                <li>属性选择器</li>
            </ul>
        </div>
        <div id="content">
            <h3>css选择器~基本选择器</h3>
            <ul class="intro">
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
            </ul>
        </div>
        <div id="footer">
            <p>我是底部我是底部!!!!</p>
        </div>
    </body>
    </html>

    注: *{margin:0;padding:0;}会让所有的元素的margin和padding为0;
    ul{ list-style: none; }会让所有的ul的列表类型为空心圆作为列表标志;
    #header{ height: 200px; }会让id属性值为header的元素高度为200px;
    .intro{ float: right; }会让class属性值为intro的元素向右浮动

  2. 层次选择器

    • 多选择器 E,F~选择匹配E元素,F元素
    • 后代选择器 E F~选择匹配E元素下的F元素
    • 子孙选择器 E > F~选择匹配E元素下的直接子元素F
    • 相邻兄弟选择器 E + F~选择匹配E元素后的直接相邻元素F
    • 通用相邻选择器 E ~ F~选择匹配E元素后的所有同级元素F
    <!doctype  html>
    <html>
    <head>
        <meta charset="utf-8"/>
        <title>CSS选择器</title>
        <style>
            /*多元素选择器*/
            .content h3,.content ul{
                font-size: 16px;
            }
            /*后代选择器*/
            .nav li{
                height: 100px;
            }
            /*子孙选择器 */
            .content > ul{
                float: left;
            }
            /*相邻兄弟选择器 */
            .intro +  p{
                font-weight: bold;
            }
            /*通用相邻选择器 */
            .intro ~ p{
                color: red;
            }
        </style>
    </head>
    <body>
        <div id="header">
            <ul class="nav">
                <li>基本选择器</li>
                <li>层次选择器</li>
                <li>伪类选择器</li>
                <li>伪元素</li>
                <li>属性选择器</li>
            </ul>
        </div>
        <div id="content">
            <h3>css选择器~基本选择器</h3>
            <ul class="intro">
                <li>1</li>
                <li>2</li>
                <li>
                    <ul>
                        <li>11</li>
                        <li>12</li>
                    </ul>
                </li>
                <li>4</li>
            </ul>
            <p>这只是一个测试,23333</p>
            <p>12345</p>
            <p>12334534</p>
        </div>
        <div id="footer">
            <p>我是底部我是底部!!!!</p>
        </div>
    </body>
    </html>

    注: .content h3,.content ul{ font-size: 16px; }会选择.content下的h3和ul,将它们的字体大小设置为16px;
    .nav li{ height: 100px; }会选择.nav的后代元素li,将其的高度设置为100px;
    .content > ul{ float: left; }会选择.content的直接子元素ul,将其设置为向右浮动;
    .intro + p{ font-weight: bold; }会选择.intro后面紧邻的p,将其字体加粗;
    .intro ~ p{ color: red; }会选择.intro后的所有同级p,将其字体颜色设置为红色

  3. 伪类选择器

    • 结构伪类选择器
      • E:first-child~匹配E元素的第一个子元素
      • E:last-child~匹配E元素的最后一个子元素
      • E:root~匹配E元素所在文档的根元素
      • E:nth-child(n)~匹配E元素的第n个子元素
      • E:nth-last-child(n)匹配E元素的倒数第n个子元素
      • E:nth-of-type(n)匹配父元素内具有指定类型的第n个E元素
      • E:nth-last-of-type(n)匹配父元素内具有指定类型的倒数第n个E元素
      • E:first-of-type匹配父元素内具有指定类型的第一个E元素
      • E:last-of-type匹配父元素内具有指定类型的最后一个E元素
      • E:only-child匹配父元素内只包含一个子元素,且该子元素匹配E元素
      • E:only--ofchild匹配父元素内只包含一个同类型的子元素,且该子元素匹配E元素
      • E:empty匹配没有子元素的元素,且该元素五任何文本节点
    • 动态伪类选择器
      • E:link匹配未被访问过的超链接
      • E:visited匹配被访问过的超链接
      • E:active匹配鼠标已经其上按下、还没有释放的E元素
      • E:hover匹配鼠标停留其上的E元素
      • E:focus匹配获得焦点的E元素
    • 语言伪类选择器
      • E:lang(language)匹配指定了lang属性且值为language的E元素
    • 否定伪类选择器
      • E:not(F)匹配所欲除F元素外的E元素
    <!doctype  html>
    <html lang="en"><!--语言伪类选择器 -->
    <head>
        <meta charset="utf-8"/>
        <title>CSS选择器</title>
        <style>
            /*结构伪类选择器*/
            .nav li:first-child{
                color: pink;
            }
            .nav li:last-child{
                color: blue;
            }
            .nav li:nth-child(3){
                color: orange;
            }
            .nav li:nth-last-child(2){
                color: #eee;
            }
            #content p:nth-of-type(3){
                color: purple;
            }
            #content p:nth-last-of-type(2){
                color: yellow;
            }
            #content p:first-of-type{
                color:gray;
            }
            #content p:last-of-type{
                color:maroon;
            }
            #content ol li:only-child{
                color: red;
            }
            #content span:only-of-type{
                color: teal;
            }
            /*动态伪类选择器*/
            #content a:link{
                color: red;
            }
            #content a:visited{
                color: pink;
            }
            #content a:hover{
                color: maroon;
            }
            #content a:active{
                color: fuchsia;
            }
            #content a:focus{
                color: purple;
            }
            /*否定伪类选择器*/
            p:not(.ex){
                font-size: 30px;
            }
        </style>
    </head>
    <body>
        <div id="header">
            <ul class="nav">
                <li>基本选择器</li>
                <li>层次选择器</li>
                <li>伪类选择器</li>
                <li>伪元素</li>
                <li>属性选择器</li>
            </ul>
        </div>
        <div id="content">
            <h3>css选择器~基本选择器</h3>
            <ol>
                <li>只有一个元素</li>
            </ol>
            <ul class="intro">
                <li>1</li>
                <li>2</li>
                <li>
                    <ul>
                        <li>11</li>
                        <li>12</li>
                    </ul>
                </li>
                <li>4</li>
            </ul>
            <p>樱木花道</p>
            <p>鸣人</p>
            <p>路飞</p>
            <p>兵长</p>
            <p>坂田银时</p>
            <p class="ex">索隆</p>
            <span>只有一个同类型,父元素可以有其他的子元素</span>
            <a href="#" target="_blank" title="1234567">自来也</a>
        </div>
        <div id="footer">
            <p>我是底部我是底部!!!!</p>
        </div>
    </body>
    </html>

    注: .nav li:first-child{ color: pink; }会选择.nav下的第一个子元素li,将其颜色设置为pink;
    .nav li:last-child{ color: blue; }会选择.nav下的最后一个子元素li, 将其颜色设置为blue;
    .nav li:nth-child(3){ color: orange; }会选择.nav下的第三个子元素li,将其颜色设置为orange;
    .nav li:nth-last-child(2){ color: #eee; }会选择.nav下的倒数第二个子元素li,将其颜色设置为#eee;
    #content p:nth-of-type(3){ color: purple; }会选择#content下的指定p元素类型的第三个p元素,将其颜色设置为purple;
    #content p:nth-last-of-type(2){ color: yellow; }会选择#content下的指定p元素类型的倒数第二个p元素,将其颜色设置为 yellow;
    #content p:first-of-type{ color:gray; }会选择#content下的指定p元素类型的第一个p元素,将其颜色设置为gray;
    #content p:last-of-type{ color:maroon; }会选择#content下的指定p元素类型的最后一个p元素,将其颜色设置为 maroon;
    #content ol li:only-child{ color: red; }会选择#content下的只有一个子元素的ol,将其子元素li的颜色设置为red;
    #content span:only-of-type{ color: teal; }会选择#content下指 定span类型的span元素,将其颜色设置为teal;

    4.伪元素选择器

    • ::first-letter用来选择文本块的第一个字母
    • ::first-line用来选择元素的第一行文本
    • ::before::after不是指存在标记中的内容,而是可以插入额外内容的位置,需要配合content属性使用
    • ::selection用来匹配突出显示的文本
    <!doctype  html>
    <html lang="en"><!--语言伪类选择器 -->
    <head>
        <meta charset="utf-8"/>
        <title>CSS选择器</title>
        <style>
            #content p::first-letter{
                color: red;
            }
            #content p::first-line{
                font-size: 22px;
            }
            #content p::before{
                content: "111";
            }
            #content p::after{
                content: "222";
            }
        </style>
    </head>
    <body>
        <div id="header">
            <ul class="nav">
                <li>基本选择器</li>
                <li>层次选择器</li>
                <li>伪类选择器</li>
                <li>伪元素</li>
                <li>属性选择器</li>
            </ul>
        </div>
        <div id="content">
            <h3>css选择器~基本选择器</h3>
            <ol>
                <li>只有一个元素</li>
            </ol>
            <ul class="intro">
                <li>1</li>
                <li>2</li>
                <li>
                    <ul>
                        <li>11</li>
                        <li>12</li>
                    </ul>
                </li>
                <li>4</li>
            </ul>
            <p>樱木花道</p>
            <p>鸣人</p>
            <p>路飞</p>
            <p>兵长</p>
            <p>坂田银时</p>
            <p class="ex">索隆</p>
            <span>只有一个同类型,父元素可以有其他的子元素</span>
            <a href="#" target="_blank" title="1234567">自来也</a>
        </div>
        <div id="footer">
            <p>我是底部我是底部!!!!</p>
        </div>
    </body>
    </html>

    注:#content p::first-letter{ color: red; }会选择#content下的p元素的第一个字母,将其颜色设置为red;
    #content p::first-line{ font-size: 22px; }会选择#content下的p元素的第一行,将其字体大小设置为22px;
    #content p::before{ content: "111"; } #content p::after{ content: "222"; 会选择#content下的p元素的前面和后面插入“111”和“222”;

    5.属性选择器

    • E[attr]~匹配所有具有属性attr的E元素
    • E[attr=val]~匹配具有属性attr,attr值为val的元素,val区分大小写
    • E[attr|=val]~匹配具有属性attr,attr值为val或以val-开始的元素
    • E[attr~=val]~匹配具有属性attr,attr值具有多个空格分隔、其中一个值等于value的元素
    • E[attr*=val]~匹配具有属性attr,attr值的任意位置包含了val的元素
    • E[attr^=val]~匹配具有属性attr,attr值以val开头的任何字符串的元素
    • E[attr$=val]~匹配具有属性attr,attr值以val结尾的任何字符串
    <!doctype  html>
    <html lang="en"><!--语言伪类选择器 -->
    <head>
        <meta charset="utf-8"/>
        <title>CSS选择器</title>
        <style>
        input[type="password"]{
            font-size: 16px;
        }
        </style>
    </head>
    <body>
        <div id="header">
            <ul class="nav">
                <li>基本选择器</li>
                <li>层次选择器</li>
                <li>伪类选择器</li>
                <li>伪元素</li>
                <li>属性选择器</li>
            </ul>
        </div>
        <div id="content">
            <form action="##" method="post">
                <input type="text" name="user"/>
                <input type="password" name="password" placeholder="请输入密码">
            </form>
            <a href="#" target="_blank" title="1234567">自来也</a>
        </div>
        <div id="footer">
            <p>我是底部我是底部!!!!</p>
        </div>
    </body>
    </html>

二、选择器的优先级是怎样的?

  • 从高到低的顺序分别是
    • 在属性后面使用了!important会覆盖页面内任何位置定义的元素样式
    • 作为style属性写在元素标签上的内联样式
    • id选择器
    • 类选择器
    • 伪类选择器
    • 属性选择器
    • 标签选择器
    • 通配符选择器
    • 浏览器自定义

三、class 和 id 的使用场景?

  • class用于可以重复使用的html元素中,比如一个提交按钮的样式设置就可以多次利用
  • id选择器多用于页面结构性的主体部分,比如,header,content,footer;或者页面上具有唯一性的地方

四、使用CSS选择器时为什么要划定适当的命名空间?

  1. 可以使代码具有可读性,更有语义化并且便于写代码和调试代码
  2. 避免因为命名不规范而导致出错

五、以下选择器分别是什么意思?

#header{}    /*匹配id="header"的元素*/
.header{}    /*匹配class="header"的元素*/
.header .logo{}    /*匹配class="header"元素下的class="logo"的元素*/
.header.mobile{}    /*匹配class="header mobile"的元素*/
.header p, .header h3{} /*匹配class="header"元素下的p元素和匹配class="header"元素下的h3元素*/
#header .nav>li{}    /*匹配id="header"元素下的class="nav"元素的直接子元素li*/
#header a:hover{}    /*匹配id="header"元素下的a元素的:hover伪类*/

六、列出你知道的伪类选择器?

  • :first-child
  • :last-child
  • :root
  • :nth-child(n)
  • :nth-last-child(n)
  • :nth-of-type(n)
  • :nth-last-of-type(n)
  • :first-of-type
  • :last-of-type
  • :only-child
  • :only--ofchild
  • :empty
  • :link
  • :visited
  • :active
  • :hover
  • focus
  • :lang
  • :not
  • :checked
  • :disabled
  • :enabled

七、:first-child和:first-of-type的作用和区别?

  1. :first-child的作用是匹配父元素下的第一个子元素
  2. :first-of-type的作用是匹配父元素下指定类型的第一个子元素
  3. 区别:要区别在于:first-of-type选择的子元素是从父元素下的指定类型的第一个子元素,而:first-child选择的子元素是从父元素下第一个子元素

    <style>
    #content a:first-child{
                color:blue;
            }
    #content  p:first-of-type{
                color:red;
            }
    </style>
        <div id="content">
            <a href="#">111</a>
            <img src="" alt="">
            <p>樱木花道</p>
            <p>鸣人</p>
            <p>路飞</p>
            <p>兵长</p>
            <p>坂田银时</p>
            <p>索隆</p>
        </div>

    注:#content a:first-child{ color:blue; }会匹配#content下的第一个子元素a链接,将其颜色设置为blue;
    #content p:first-of-type{ color:red; }则会匹配#content下指定p类型的第一个p元素,将其的颜色设置为red;

八、运行如下代码,解析下输出样式的原因?

<style>
.item1:first-child{
  color: red;
}
.item1:first-of-type{
  background: blue;
}
</style>
 <div class="ct">
   <p class="item1">aa</p>
   <h3 class="item1">bb</h3>
   <h3 class="item1">ccc</h3>
 </div>
  • 运行结果如下图

    效果图

  • .item1:first-child{ color: red;}会匹配父元素下的第一个子元素,即p元素,将其字体颜色设置诶红色;

  • .item1:first-of-type会匹配父元素下的指定.item1类型的元素,那么这里就会选择p.item1,第一个h3.item1,将其背景颜色设置为蓝色

九、text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中?

  • 使元素中的文本水平居中对齐,作用在块级元素上,会使块级元素的行内元素水平居中对齐

十、如果遇到一个属性想知道兼容性,在哪查看?

本文转载自:http://www.jianshu.com/p/6c11506a599f

沐风storm
粉丝 0
博文 10
码字总数 4795
作品 0
武汉
程序员
私信 提问
“寒冬”三年经验前端面试总结(含头条、百度、饿了么、滴滴等)之CSS篇

前言 不论是寒冬还是暖冬,找工作之前都需要做好充足的准备,面试的时候才能做到游刃有余。此文是把我最近找工作准备的以及笔试面试中涉及到的手写题做一个总结。给自己,也给需要的同学。 ...

是呀呀呀
10/16
0
0
谈谈css伪类与伪元素

css选择器常见包括id(#id)、标签(tag)、class(.class)、属性[attr=attrval]等,还包括伪元素和伪类选择器。正确的利用伪元素和伪类能够让我们的html结构更清晰合理,也能在一定程度上减...

秋枫惋红
2017/11/25
0
0
《web前端最佳实践》—高性能css

** 高性能css **作者新浪微博 @灵感_idea Html和css本身的性能问题并不突出,在提高可读性和可维护性的前提下,如果能让代码运行和解析的速度更快,则是锦上添花了。 一、使用高效css选择器 ...

十万猛虎下画山
2016/07/27
20
0
css3中的属性选择器混淆点

css3中较之css2增添了许多属性选择器,一共有如下的集中属性选择器: (1)E[attr=val] (2) E[attr|=val] (3) E[attr~=val] (4)E[attr*=val] (5)E[attr^=val] (6)E[attr$=val] 这几种属性选择...

sunshinewyf
2015/10/22
17
0
CSS3 选择器——伪类选择器

前面花了两节内容分别在《CSS3选择器——基本选择器》和《CSS3选择器——属性选择器》介绍了CSS3选择器中的基本选择器和属性选择器使用方法,今天要和大家一起学习CSS3选择器中的第三部分,也...

石佛慈悲
2013/12/05
35
0

没有更多内容

加载失败,请刷新页面

加载更多

什么样的人要学点python编程?请你对号入座

什么样的人需要学点python编程? 时代越来越不一样了,编程这种专业程序员的工作,已经开始应用于各种其他日常工作中,就以前象征着互联网的电脑,现在早已进入普通人家。 那么什么样的人需要...

这人就爱编程
30分钟前
3
0
哪吒之魔童降世的背景音乐怎么提取 视频中提取音频的方法

随着国漫的不断崛起一大批优质的动漫正向我们袭来,从大鱼海棠到大圣归来再到我们现在的哪吒让我们看到国漫质的飞跃,也让我们对国漫充满信心,前段时间哪吒之魔童降世以国产第二的票房下线到...

cenfeng123
34分钟前
3
0
springcloud 整合 springboot-admin 监控中心

Admin监控应用 Spring Boot提供的监控接口,例如:/health、/info等等,实际上除了之前提到的信息,还有其他信息业需要监控:当前处于活跃状态的会话数量、当前应用的并发数、延迟以及其他度...

java框架开发者
36分钟前
2
0
GMAT阅读提分要看课外读物,名师点评正确使用方法

阅读提分需要从积累阅读量开始,这种积累不能只靠做练习,还需要大量阅读课外读物。而最适合GRE考生的课外读物之一就是原版杂志。但看课外读物提分也要讲究方法。下面小编就为大家详解看课外...

bole6
39分钟前
1
0
第六次读Kingfisher网络图片缓存库的思考与感受(稍微有点起色)

这节我们来优化一下之前的 硬盘存储,看看kingfiisher哪里做得好,我们稍微来学习一下。 从硬盘里检索图片模仿改进: open func retrieveImageInDiskCache(forKey key: String, options:...

T型人才追梦者
39分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部