CSS3常见的几种选择器

最新推荐文章于 2024-10-23 09:17:57 发布
转载 最新推荐文章于 2024-10-23 09:17:57 发布 · 356 阅读 · 3 ·
CC 4.0 BY-SA版权
原文链接：https://my.oschina.net/yumufeng/blog/813445

  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>

  • 运行结果如下图

    1240

    效果图

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

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

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

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

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

1240

转载于:https://my.oschina.net/yumufeng/blog/813445

chudang9293
关注
CSS3选择器介绍及用法总结
尐轩web前端网络日志
11-16 7308
CSS3新增了很多强大的选择器 它可以让我们少写一些js事件脚本 我们先来看看各个版本的选择器有哪些 注： ele代表element元素 attr代表attribute属性，val代表value属性值 :xxx都属于伪类选择器，::xxx都属于伪元素选择器 有名字的选择器我尽量细分了CCS1选择器 选择器 类型 示例 说明 .class 类选择器 .demo
CSS 几种常见的选择器
Naion的博客
09-30 1368
简单写了些常使用的css基础选择器和复合选择器。
[CSS3]：CSS3选择器种类和使用方式详解
我只是个程序员。
09-08 1767
CSS选择器       CSS选择器可以让css对HTML页面中的元素实现一对一、一对多或者多对一的样式匹配。CSS选择器是CSS中很重要的知识点，能灵活运用CSS选择器非常具有难度，下面对于CSS选择器的使用说明倾向于归类总结的方式，同时会附上相应例子。下面的CSS选择器概括图和相应类别来源于网上，如有遗漏，敬请谅解。 基本选择器 类型 功能描述
CSS3选择器
kx0826的博客
11-16 505
CSS3选择器 C3选择器，主要包括：1、基本选择器；2、层次选择器；3、属性选择器；4、伪类选择器。 一、基本选择器： 1、# ID选择器：选择指定ID名的任意元素类型。 例如：#abc{.......................}这里选择的是id名为abc的任意元素 2、.class类别选择器：选择指定class名的选择器。 例如：.abc{..
黑马css学习笔记
firewrk的博客
12-10 1141
在看pink老师的css课程时写的笔记
编写一个登录页面，使用 Tab 栏实现“账号登录”和“二维码登录”这两种方式的切换，并通过 transition 组件结合 anim ate.css实现切换时的动画效果。
XGK8750的博客
12-16 2771
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title&...
CSS中几种常见的注释
10-30
CSS 中几种常见的注释 在 CSS 中，注释是一种非常重要的技巧，它可以帮助开发者在代码中添加备注、隐藏代码或调试代码。今天，我们将介绍几种常见的 CSS 注释方式，它们可以帮助你在不同浏览器中隐藏或显示代码。 ...
css3常见选择器
a15766649633的博客
03-12 1667
一个完整的HTML5页面是由很多不同的标签组成的，而标签选择器则决定标签应采用的CSS样式，语法如下:所有的HTML5标签都可以作为标签选择器。
CSS选择器：基本选择器、复合选择器、伪类选择器、伪元素选择器
pan_junbiao的博客
07-11 3494
CSS选择器包含：基本选择器、复合选择器、伪类选择器、伪元素选择器。基本选择器包括：元素选择器、类选择器、ID 选择器、属性选择器。最常见的 CSS 选择器是元素选择器。换句话说，HTML文档的元素就是最基本的选择器。例如设置 HTML 样式，选择器通常是某个 HTML 元素，如 p、h1、a 等，甚至可以是 HTML 本身。在 HTML 中，各种各样的属性可以给元素添加很多附件信息，并且可以通过 JavaScript 控制这些附加属性的内如何状态。在使用 CSS 的时候，也可以使用这些附加属性来指定元素。
常见的css选择器汇总
最新发布
LvManBa的博客
10-23 1162
在HTML5中，引入了一些新的语义化标签，这些标签也可以作为元素选择器使用。**1、article: 选择所有文章内容元素。2、section: 选择所有章节元素。3、header: 选择所有头部区域元素。4、footer: 选择所有页面底部区域元素。5、nav: 选择所有导航栏元素。6、main: 选择页面主体内容元素。7、aside: 选择侧边内容或附加信息元素。8、figure, figcaption: 分别选择图像或图表及其标题元素。p {
【css】1.first-of-type和last-of-type
jieweiwujie的博客
12-28 382
.content-tab div:first-of-type;不建议套用多层使用，筛选会更加复杂
wordpress 避免the_content自带p标签和内容截取
etx2002的博客
05-19 1471
即可 <?php echo wp_trim_words( get_the_title(),50);// 截取50字的文章标题 echo wp_trim_words( get_the_excerpt(),100);// 截取100字的文章摘要 echo wp_trim_words( get_the_content(),500);// 截取500字的文章内容 ?>
CSS3的content属性详解
weixin_34151004的博客
05-10 653
CSS中主要的伪元素有四个：before/after/first-letter/first-line，在before/after伪元素选择器中，有一个content属性，能够实现页面中的内容插入。 插入纯文字 content:"插入的文章"，或者content:none不插入内容 html: <h1>这是h1</h...
从客户端(txtContent="<p>1</p>")中检测到有潜在危险的 Request.Form 值
dmz1981的专栏
09-05 7339
第一种，如楼上，通过更改验证模式为2.0，同时在页头设置validateRequest="false" 。 第二种，通过ajax等方式提交数据，将富文本的内容先进行编码转换，然后在后台解码。 出现这个问题，一般是由于.Net Framework 使用了4.0版本造成的。（从 .Net Framework 4.0 开始，ASP.NET开始强制检测Request参数安全
html特殊字符 编码css3 content:"我是特殊符号"
大灰狼的小绵羊哥哥的博客
08-31 6977
项目中用到的一些特殊字符和图标 html代码 div class="cross">div> css代码 .cross{ width: 20px; height: 20px; background-color: #F3F9FF; border-radius: 10px; border: 1px solid #DBE6EF
CSS3选择器（详细！全！）
FishC的博客
11-17 9808
CSS3选择器（详细！全！）
:first-of-type | CSS属性参考
初晴
09-19 1644
CSS :first-of-type伪类选择器用于匹配元素的所有子元素类型中第一个出现的子元素。 换句话来说。:first-of-type伪类选择器匹配父元素中第一次出现的某类子元素的第一个元素，例如： article>   h1>标题h1>   p>     第一个段落...   p>   p>     第二个段落...
CSS3 —— 选择器（带你深入了解 CSS3 选择器）
HuoZhiyan 的博客
03-26 8378
css3 选择器。慢慢练习，慢慢理解~
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值