精华内容
下载资源
问答
  • 一、通配符选择器 作用:给当前页面上所有的标签设置属性 (2)格式: *{属性:值;} (3)注意点:由于通配符选择器是给界面上所有的标签设置属性,因此在设置之前会遍历所有的标签,如果当前界面上的标签比较多,...

    一、通配符选择器

    作用:给当前页面上所有的标签设置属性

    (2)格式:

    *{属性:值;}

    (3)注意点:由于通配符选择器是给界面上所有的标签设置属性,因此在设置之前会遍历所有的标签,如果当前界面上的标签比较多,那么性能就会比较差,所以一般在企业开发过程中一般不会使用通配符选择器。

    (4)例子:

       *{
    
                color: red;
    
            }
    
    ........省略代码.......
    
    <h1>我是标题</h1>
    
    <p>我是段落</p>
    
    <a href="#">我是一个链接</a>
    
    学习Q-q-u-n: 731771211,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法
    (从零基础开始到前端项目实战教程,学习工具,职业规划 )
    

    二、选择器综合练习

    下面的这些方法都可以对p标签进行属性的设置

    没有最好的方法,只有更合适的做法,对之前学习的选择器都练习了一遍

    <!DOCTYPE html>
    
    <html lang="en">
    
    <head>
    
        <meta charset="UTF-8">
    
        <title>d82_selector_comprehensive_exercise</title>
    
        <style>\
    
            /*标签选择器*/
    
            p{
    
                color: red;
    
            }
    
            /*id选择器*/
    
            #identity1{
    
                color: green;
    
            }
    
            #identity2{
    
                color: green;
    
            }
    
            /*class选择器*/
    
            .para{
    
                color: blue;
    
             }
    
            /*后代选择器*/
    
            div p{
    
                color: yellow;
    
            }
    
            /*子元素选择器*/
    
            div>p{
    
                color: red;
    
            }
    
            /*交集选择器*/
    
            p.para{
    
                color: green;
    
            }
    
            /*并集选择器*/
    
            #identity1,#identity2{
    
                color:wheat;
    
            }
    
            /*通用兄弟选择器*/
    
            h1~p{
    
                color: #37fa1e;
    
            }
    
            /*序选择器*/
    
            p:nth-of-type(n+1){
    
                color:green;
    
            }
    
            /*属性选择器*/
    
            p[id]{
    
                color: #ff4b54;
    
            }
    
    </style>
    
    </head>
    
    <body>
    
    <h1>我是标签</h1>
    
    <div>
    
    <p id="identity1" class="para">我是段落1</p>
    
    <p id="identity2" class="para">我是段落2</p>
    
    </div>
    
    </body>
    
    </html>
    
    
    展开全文
  • css通配符选择器Introduction: 介绍: We all are aware of various types of selectors that can be used for developing a website or a web page. But do we know all of them? Well, if your answer to that ...

    css通配符选择器

    Introduction:

    介绍:

    We all are aware of various types of selectors that can be used for developing a website or a web page. But do we know all of them? Well, if your answer to that question was no, then don't worry it is understandable but as a developer, we must try our best to get to know about various selectors. Knowing about various properties of CSS will only make our work easy and fast, there might come a time in the future where you may get stuck somewhere in your website or web page and you have no idea what to do, later when you will look for solutions for your issue you will realize that the issue was not at all tough only had you known some fundamental properties of CSS. Therefore, here in this article, we are going to discuss a very crucial property called selectors.

    我们都知道可用于开发网站或网页的各种选择器。 但是我们都知道吗? 好吧,如果您对这个问题的回答是“否”,那么不要担心它是可以理解的,但是作为开发人员,我们必须尽力了解各种选择器。 了解CSS的各种属性只会使我们的工作变得轻松快捷,将来可能会有一段时间,您可能会卡在网站或网页中的某个地方,并且不知道要做什么,以后再寻找针对您的问题的解决方案,您将意识到,仅了解CSS的一些基本属性,该问题就不会很难解决。 因此,在本文的此处,我们将讨论一个非常重要的属性,称为选择器。

    Trivia:

    琐事:

    Selectors, as the name suggests are used for selecting elements on your website or web page and there's nothing much to do with the selectors. With the help of selectors, you can select the elements and then perform some actions on those selected elements. But as simple as it sounds, it is equally critical to know about selectors as if you happen to make use of any wrong selector then your code might get ruined and all your efforts and hard work will go in vain. Therefore, it is a must that you learn about a property thoroughly and then implement it. If you start implementing a property without proper knowledge then you might have to face some drastic effects.

    顾名思义,选择用于选择您的网站或网页上的元素,与选择器没有多大关系。 借助选择器,您可以选择元素,然后对那些选定的元素执行一些操作。 但是,听起来很简单,了解选择器同样至关重要,就好像您碰巧使用了任何错误的选择器一样,您的代码可能会毁了,所有的努力和辛苦的工作将徒劳无功。 因此,必须彻底了解某个属性然后实施它。 如果您在没有适当知识的情况下开始实现某个属性,那么您可能不得不面对一些巨大的影响。

    Definition and usage:

    定义和用法:

    Now that we are aware of selectors and their importance, why don't we talk about a very specific selector called the wildcard selectors (*,^ and $)? Well, for those who heard this term for the first time, don't worry, this article has got you covered and you will learn about these selectors very easily and you will be able to make use of these selectors in no time.

    现在我们已经了解了选择器及其重要性,为什么不讨论一个非常特定的选择器,称为通配符选择器(*,^和$)呢? 好吧,对于那些第一次听说这个术语的人来说,请放心,这篇文章已经为您覆盖了,您将非常容易地了解这些选择器,并且可以立即使用这些选择器。

    So, let us move forward with the formal definition of the Wildcard Selectors:
    The Wildcard Selector is used to select or choose various elements at the same time simultaneously. This selector would help in selecting similar types of class designation, name or attribute and make them CSS property usable. * wildcard can also be referred to as containing a wildcard.

    因此,让我们继续使用通配符选择器的正式定义:
    通配符选择器用于同时选择或选择各种元素。 该选择器将帮助选择相似类型的类名称,名称或属性,并使它们CSS属性可用。 *通配符也可以称为包含通配符。

    Let us have a look at each one of these selectors one by one.

    让我们一一看一下这些选择器中的每一个。

    1)[attribute * =“ str”]选择器 (1) [attribute*="str"] Selector)

    The first and foremost in the list is [attribute*="str"] selector. The behavior of this selector is very easy to understand and you can easily put this selector to use. The purpose of this selector is to select only those elements who comprise of specified substring str.

    列表中的第一个也是最重要的是[attribute * =“ str”]选择器。 该选择器的行为非常容易理解,您可以轻松使用该选择器。 该选择器的目的是仅选择那些由指定子字符串str组成的元素。

    Now for implementation, let us have a look at the syntax,

    现在要实现,让我们看一下语法,

        [attribute*="value"]{
        }
    
    

    Example:

    例:

    <!DOCTYPE html>
    
    <html>
    
    <head>
        <style>
            [class*="clr"] {
                width: 60%;
                background: red;
                color: white;
            }
            
            li {
                width: 100%;
                background: black;
                color: white;
            }
            
            ul.list {
                list-style-type: circle;
                font-size: 30px;
            }
        </style>
    </head>
    
    <body>
        <ul class="list">
            <li class="clr-red">red</li>
            <li class="gr">green</li>
            <li class="clr-blue">blue</li>
            <li class="clr-pink">pink</li>
            <li class="yellow-clr">yellow</li>
        </ul>
    </body>
    
    </html>
    
    

    Output

    输出量

    Wildcard selectors (1) in CSS

    In the above example, the element with class name having clr are selected and styled accordingly.

    在上面的示例中,类名称为clr的元素将被选择并相应设置样式。

    2)[attribute ^ =“ str”]选择器 (2) [attribute^="str"] Selector)

    The second selector that you need to learn about is the [attribute^="str"] selector. This selector is something similar to the [attribute*=" str"]selector as this selector selects those elements whose attributes begin with very specified value str.

    您需要了解的第二个选择器是[attribute ^ =“ str”]选择器。 该选择器类似于[attribute * =“ str”]选择器,因为该选择器选择其属性以非常指定的值str开头的那些元素。

    Let us understand this better with the help of a syntax representation.

    让我们借助语法表示法更好地理解这一点。

        [attribute^="str"]{
        }
    
    

    Example:

    例:

    <!DOCTYPE html>
    
    <html>
    
    <head>
        <style>
            [class^="clr"] {
                width: 60%;
                background: red;
                color: white;
            }
            
            li {
                width: 100%;
                background: black;
                color: white;
            }
            
            ul.list {
                list-style-type: circle;
                font-size: 30px;
            }
        </style>
    </head>
    
    <body>
        <ul class="list">
            <li class="clr-red">red</li>
            <li class="gr">green</li>
            <li class="clr-blue">blue</li>
            <li class="clr-pink">pink</li>
            <li class="yellow-clr">yellow</li>
        </ul>
    </body>
    
    </html>
    
    

    Output

    输出量

    Wildcard selectors (2) in CSS

    In the above example, the elements are selected whose class name starts with clr.

    在上面的示例中,选择了其类名以clr开头的元素。

    3)[attribute $ =“ str”]选择器 (3) [attribute$="str"] Selector)

    Similar to the first two selectors the purpose of [attribute$="str"] Selector is to select those elements whose attributes end with very specified value str.

    类似于前两个选择器, [attribute $ =“ str”]选择器的目的是选择属性以非常指定的值str结尾的那些元素。

    Why not have a look at the syntax?

    为什么不看一下语法呢?

        [attribute$=" str"]{
        }
    
    

    Example:

    例:

    <!DOCTYPE html>
    
    <html>
    
    <head>
        <style>
            [class$="clr"] {
                width: 60%;
                background: red;
                color: white;
            }
            
            li {
                width: 100%;
                background: black;
                color: white;
            }
            
            ul.list {
                list-style-type: circle;
                font-size: 30px;
            }
        </style>
    </head>
    
    <body>
        <ul class="list">
            <li class="clr-red">red</li>
            <li class="gr">green</li>
            <li class="clr-blue">blue</li>
            <li class="clr-pink">pink</li>
            <li class="yellow-clr">yellow</li>
        </ul>
    </body>
    
    </html>
    
    

    Output

    输出量

    Wildcard selectors (3) in CSS

    In the above example, the elements are selected whose class name ends with clr.

    在上面的示例中,选择了其类名以clr结尾的元素。

    翻译自: https://www.includehelp.com/code-snippets/wildcard-selectors-in-css.aspx

    css通配符选择器

    展开全文
  • 一、通配符选择器 作用:给当前页面上所有的标签设置属性 (2)格式: *{属性:值;} (3)注意点:由于通配符选择器是给界面上所有的标签设置属性,因此在设置之前会遍历所有的标签,如果当前界面上的标签比较多,...

    一、通配符选择器

    作用:给当前页面上所有的标签设置属性

    (2)格式:

    *{属性:值;}

    (3)注意点:由于通配符选择器是给界面上所有的标签设置属性,因此在设置之前会遍历所有的标签,如果当前界面上的标签比较多,那么性能就会比较差,所以一般在企业开发过程中一般不会使用通配符选择器。

    (4)例子:

       *{
    
                color: red;
    
            }
    
    ........省略代码.......
    
    <h1>我是标题</h1>
    
    <p>我是段落</p>
    
    <a href="#">我是一个链接</a>
    
    web前端开发学习Q-q-u-n:784783012 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频)
    

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bldbVXBX-1570263207937)(https://upload-images.jianshu.io/upload_images/13133049-220d9b26c07d3992.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)]

    二、选择器综合练习

    下面的这些方法都可以对p标签进行属性的设置

    没有最好的方法,只有更合适的做法,对之前学习的选择器都练习了一遍

    web前端开发学习Q-q-u-n:784783012 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频)
    <!DOCTYPE html>
    
    <html lang="en">
    
    <head>
    
        <meta charset="UTF-8">
    
        <title>d82_selector_comprehensive_exercise</title>
    
        <style>\
    
            /*标签选择器*/
    
            p{
    
                color: red;
    
            }
    
            /*id选择器*/
    
            #identity1{
    
                color: green;
    
            }
    
            #identity2{
    
                color: green;
    
            }
    
            /*class选择器*/
    
            .para{
    
                color: blue;
    
             }
    
            /*后代选择器*/
    
            div p{
    
                color: yellow;
    
            }
    
            /*子元素选择器*/
    
            div>p{
    
                color: red;
    
            }
    
            /*交集选择器*/
    
            p.para{
    
                color: green;
    
            }
    
            /*并集选择器*/
    
            #identity1,#identity2{
    
                color:wheat;
    
            }
    
            /*通用兄弟选择器*/
    
            h1~p{
    
                color: #37fa1e;
    
            }
    
            /*序选择器*/
    
            p:nth-of-type(n+1){
    
                color:green;
    
            }
    
            /*属性选择器*/
    
            p[id]{
    
                color: #ff4b54;
    
            }
    
    </style>
    
    </head>
    
    <body>
    
    <h1>我是标签</h1>
    
    <div>
    
    <p id="identity1" class="para">我是段落1</p>
    
    <p id="identity2" class="para">我是段落2</p>
    
    </div>
    
    </body>
    
    </html>
    
    
    展开全文
  • 任务9 复合选择器通配符选择器 第四单元 CSS3基础 学习目标 通配符选择器 交集选择器 并集选择器 后代选择器 如何同时应用多个样式 了解: 学习目标 任务目标 实战演练制作寓言故事网页 任务目标 强化训练制作诗词...
  • CSS基础选择器 标签选择器(元素选择器) 标签选择器是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。其基本语法格式如下: 标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性...

    CSS基础选择器

    标签选择器(元素选择器)

    标签选择器是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。其基本语法格式如下:

    标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }  或者
    元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
    

    标签选择器最大的优点是能快速为页面中同类型的标签统一样式,同时这也是他的缺点,不能设计差异化样式。

    标签选择器 可以把某一类标签全部选择出来 div span

    课堂案例:

    传智简介

    类选择器

    类选择器使用“.”(英文点号)进行标识,后面紧跟类名,其基本语法格式如下:

    .类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
    
     标签调用的时候用 class=“类名”  即可。
    

    类选择器最大的优势是可以为元素对象定义单独或相同的样式。 可以选择一个或者多个标签

    小技巧:

    1.长名称或词组可以使用中横线来为选择器命名。
    2.不建议使用“_”下划线来命名CSS选择器。
    

    ​ 输入的时候少按一个shift键;
     浏览器兼容问题 (比如使用_tips的选择器命名,在IE6是无效的)
     能良好区分JavaScript变量命名(JS变量命名是用“_”)

    3.不要纯数字、中文等命名, 尽量使用英文字母来表示。
    

    命名规范: 见附件(Web前端开发规范手册.doc)

    命名是我们通俗约定的,但是没有规定必须用这些常用的命名。

    <head>
            <meta charset="utf-8">
            <style>
            span {
            	font-size: 100px;
            }
            .blue {
            	color: blue;
            }
            .red {
            	color: red;
            }
            .orange {
    			color: orange;
            }
    		.green {
    			color: green;
    		}
            </style>
        </head>
        <body>
        	<span class="blue">G</span>
        	<span class="red">o</span>
        	<span class="orange">o</span>
        	<span class="blue">g</span>
        	<span class="green">l</span>
        	<span class="red">e</span>
        </body>
    

    多类名选择器

    我们可以给标签指定多个类名,从而达到更多的选择目的。

    注意:

    1. 样式显示效果跟HTML元素中的类名先后顺序没有关系,受CSS样式书写的上下顺序有关。
    2. 各个类名中间用空格隔开。
    

    多类名选择器在后期布局比较复杂的情况下,还是较多使用的。

    <div class="pink fontWeight font20">亚瑟</div>
    <div class="font20">刘备</div>
    <div class="font14 pink">安其拉</div>
    <div class="font14">貂蝉</div>
    

    类名选择器 :< div class=“nav”> 这个 div 的名字 就是 nav nav 就是 div 这个 div 也是 nav

    < 人 class = 刘德华 > 我们想要吧div 找到 div {} .nav {}

    id选择器

    id选择器使用“#”进行标识,后面紧跟id名,其基本语法格式如下:

    #id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
    

    该语法中,id名即为HTML元素的id属性值,大多数HTML元素都可以定义id属性,元素的id值是唯一的,只能对应于文档中某一个具体的元素。

    用法基本和类选择器相同。

    id选择器和类选择器区别

    W3C标准规定,在同一个页面内,不允许有相同名字的id对象出现,但是允许相同名字的class。

    类选择器(class) 好比人的名字, 是可以多次重复使用的, 比如 张伟 王伟 李伟 李娜

    id选择器 好比人的身份证号码, 全中国是唯一的, 不得重复。 只能使用一次。

    id选择器和类选择器最大的不同在于 使用次数上。

    通配符选择器

    通配符 选择器用“*”号表示,他是所有选择器中作用范围最广的,能匹配页面中所有的元素。其基本语法格式如下:

    * { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
    

    例如下面的代码,使用通配符选择器定义CSS样式,清除所有HTML标记的默认边距。

    * {
      margin: 0;                    /* 定义外边距*/
      padding: 0;                   /* 定义内边距*/
    }
    

    注意:

    这个通配符选择器,就像我们的电影明星中的梦中情人, 想想它就好了,但是它不会和你过日子。

    展开全文
  • 二、通配符选择器 2.1 语法 2.2 示例 2.3 注意点 一、id选择器 id选择器可以为标有特定id的HTML元素指定特定的样式。 HTML元素以id属性来设置id选择器,CSS中id选择器以#来定义。 1.1 语法 #id名 { 属性1:...
  • 选择器的作用 选择标签 ①标签选择器 标签名 { 属性1: 值; 属性2: 值; } 将当前页面中所有的这个标签名都选择出来 修改样式 不能修改某一个的样式... 通配符选择器不需要调用 自动给所有元素使用样式
  • important > 内联样式表 > id选择器 > (伪)类选择器 > 标签选择器 > 通配符 3.权重相同时候,取后面的样式 权重的总结: !important 权重是最高!(不能使用!,只能在修改框架样式时候用) 内联样式表:1000 id选择符...
  • <!DOCTYPE html> <... <head> ...meta charset="UTF-8">... /*方式一:通配符,选中所有元素*/ ... /*方式二:标签选择器:通过标签来选择元素*/ a{ color: green; } p{
  • .red { color: red; }
  • 文章目录一丶 包含选择器二丶 分组选择器三丶 通配符选择器四丶 浮动五丶 清除浮动的三种方法 一丶 包含选择器 二丶 分组选择器 三丶 通配符选择器 四丶 浮动 五丶 清除浮动的三种方法 ...
  • 005_CSS通配符选择器

    2020-10-13 22:21:51
    1. CSS2 引入了一种新的简单选择器 - 通配选择器(universal selector), 显示为一个星号(*)。该选择器可以与任何元素匹配, 就像是...通配符选择器</title> <meta charset="utf-8"> <style type="tex
  •  通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。 6. 继承的样式没有权值。 18. 块级元素水平垂直居中的方法有哪些(三个方法) 让div等块级元素水平和垂直都居中,即永远处于屏幕的正中央,当我们做...
  • 1.CSS规定拥有更高确定度的选择器优先级更高 2.如果样式中包含冲突的规则,且它们具有相同的确定度。那么,后出现的规则优先级高。 优先级:由高到低(从上到下) !important 内联(1,0,0,0) id: (0,1,0,0) 类:(0,0,1,...
  • web前端@css选择器

    千次阅读 2019-09-03 14:13:52
    web前端@css选择器超级详细 文章很长 需耐心阅读 内容总览 内容总览 学会使用CSS选择器 熟记CSS样式和外观属性 熟练掌握CSS各种选择器 熟练掌握CSS各种选择器 熟练掌握CSS三种显示模式 熟练掌握CSS背景属性 熟练...
  • important内联(1,0,0,0)id: (0,1,0,0)类:(0,0,1,0)伪类/属性元素:(0,0,0,1)通配符选择器class="web",多个元素可以拥有同一个类名 id选择器id="web",具有唯一性 伪类选择器CSS伪类(pseudo-class)是加在选择器...
  • CSS的通配选择器

    万次阅读 2017-12-02 06:47:44
    单独使用时,这个选择器可以与文档中的任何元素匹配,就像一个通配符。如,让页面上的所有文本都为黑色: * { color: black; } 当然也可以选择某个元素下的所有元素。在与其他选择器结合使用时,通配选择器可以对...
  • CSS常见文本样式包括颜色、大小、字体等,颜色有4种表示形式;列表常见样式包括类型、图片和位置等;背景样式包括颜色、图片、重复方式、位置;浮动主要为了脱离文档流的...选择器优先级行内样式最高,通配选择器最低。
  • CSS基础学习四:元素选择器

    千次阅读 2015-11-01 15:02:41
     选择器名称 { 属性名:属性值;属性名:属性值;......}  属性与属性之间用分号隔开;属性与属性值直接使用冒号连接;如果一个属性有多个属性值的话,那么多个属性值用空格隔开。  上述提到了我这一篇博客所要说...
  • 通配符选择器:给当前所有的标签设置属性,界面标签不要过多,性能会比较差。 * { color: yellow; } (5)属性选择器 Css 2引入了属性选择器:可以根据元素的属性以及属性值来选择元素。 a...
  • 2021年前端面试题及答案

    万次阅读 多人点赞 2020-02-11 19:29:34
    通配符选择器( * ) 8.属性选择器(a[rel = "external"]) 9.伪类选择器(a: hover, li:nth-child) 可以继承的属性: 可继承的样式: font-size font-family color, UL LI DL DD DT; 不可继承的样式:border ...
  • 入门学习Linux常用必会60个命令实例详解doc/txt

    千次下载 热门讨论 2011-06-09 00:08:45
    这是因为Linux和许多版本的Unix一样,提供了虚拟控制台的访问方式,允许用户在同一时间从控制台(系统的控制台是与系统直接相连的监视和键盘)进行多次登录。每个虚拟控制台可以看作是一个独立的工作站,工作台...
  • 前端面试题(持续更新中)

    万次阅读 多人点赞 2019-11-06 17:16:33
    通配符选择器( * ) 8.属性选择器(a[rel = “external”]) 9.伪类选择器(a: hover, li:nth-child) 1.2 可以继承的属性: 可继承的样式: font-size font-family color, UL LI DL DD DT; 不可继承的样式:border...
  • Web前端从入门到放弃(css3选择器的总结)一、基本选择器 选择器 类型 功能描述 * 通配选择器 选择文档中所有的html元素 E 元素选择器 选择指定的类型的html元素 id ID选择器 选择指定ID属性值为“id”的...
  • CSS3选择器大全

    万次阅读 多人点赞 2018-08-16 11:31:08
    1.CSS3选择器 属性选择器 在HTML中,通过各种各样的属性可以给元素增加很多附加的信息。例如,通过id属性可以将不同div元素进行区分。 input[type=&quot;text&quot;] { width:150px; display:block; ...
  • 前端面试题

    万次阅读 多人点赞 2019-08-08 11:49:01
    你做的页面在哪些流览测试过?这些浏览器的内核分别是什么? 21 每个HTML文件里开头都有个很重要的东西,Doctype,知道这是干什么的吗? 21 Quirks模式是什么?它和Standards模式有什么区别 21 div+css的布局较...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 28,672
精华内容 11,468
关键字:

web通配符选择器