精华内容
下载资源
问答
  • 一、通配符选择器 作用:给当前页面上所有的标签设置属性 (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通配符选择器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通配符选择器

    展开全文
  • CSS基础选择器 标签选择器(元素选择器) 标签选择器是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。其基本语法格式如下: 标签名{属性1:属性值1; 属性2:属性值2; 属性3:...

    CSS基础选择器

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

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

    标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }  
    

    或者:

    元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
    

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

    类选择器

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

    .类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
    

    标签调用的时候用 class=“类名” 即可。

    类选择器最大的优势是可以为元素对象定义单独或相同的样式。 可以选择一个或者多个标签
    1.长名称或词组可以使用中横线来为选择器命名。
    2.不建议使用“_”下划线来命名CSS选择器。
    3.不要纯数字、中文等命名, 尽量使用英文字母来表示。

    多类名选择器

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

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

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

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

    id选择器

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

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

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

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

    id选择器和类选择器区别*

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

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

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

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

    通配符选择器

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

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

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

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

    示例代码:

    <!DOCTYPE html>
    <html lang="en">
      <head>
    	<meta charset="UTF-8">
    	<title>基本选择器</title>
    	<style>
    	  /* 1.标签选择器:h1-h6,div,span,p,ul,li,ol,dl,a,img等等 */
    	  h1{
    	  	 color:blue;
    	  }
    
    	  /* 2.类选择器:在标签中添加一个属性,class="类名",理解为:取的别名 */
    	  .leaf{
    	  	    font-size:20px;
    	  	    /* 设置背景颜色 */
    	  	    background-color:grey;
    	  }
    
    	  /* 3.id选择器:在标签中添加一个属性,id="id名",具有唯一性,体现在操作js的时候 */
    	  #fly{
    	  	   color:yellow;
    	      }
    
    	  /* 4.通配符选择器:能匹配到页面所有的标签,在项目中不推荐使用 */
    	  *{
    	  	/* 清除所有标签的内外边距 */
    	  	padding:0;
    	  	margin:0;
    	   }
    	   /* 用这种方法运行速度更快
    	   h1,
    	   h2,
    	   h3,
    	   h4,
    	   h5,
    	   h6,
    	   img,
    	   li,
    	   ul,
    	   ol,
    	   div,
    	   body,
    	   html,
    	   table,
    	   dl,
    	   dd,
    	   dt {
       	        padding:0;
       	        margin:0;
    	   } */
    	</style>
      </head>
      <body>	
    	<h1 class="leaf" id="fly" >叶的飘落,是风的追求还是树的不挽留?</h1>
      </body>
    </html>
    
    展开全文
  • 文章目录一丶 包含选择器二丶 分组选择器三丶 通配符选择器四丶 浮动五丶 清除浮动的三种方法 一丶 包含选择器 二丶 分组选择器 三丶 通配符选择器 四丶 浮动 五丶 清除浮动的三种方法 ...


    需求:现在需要这些标签设定成特殊的样式,要怎么做到呢?

    一丶 包含选择器

    两个都是兄弟元素,拥有同一个父亲时,可用!

    h3,ul{
    	color: red;
    }
    



    二丶 分组选择器

    两个都是兄弟元素,拥有同一个父亲时,可用!

    #div h3{
    	color: red;
    }
    #div ul{
    	color: green;
    }
    



    三丶 通配符选择器

    对所有此id的元素,都会变成该样式,但是它的优先级最低

    .uil{
    	color: green;
    }
    



    四丶 浮动

    意思就是说,使得网页突然变成三位立体的感觉,下面的东西会认为上面的高度是0,就会上来,此时浮动的元素就会覆盖上来的界面


    五丶 清除浮动的三种方法

    【1】直接在内联样式中清除 【不推荐】

    			<div  id="left" style="clear: both;">
    				
    			</div>
    

    【2】给浮动元素的父元素添加 overflow 属性 【不推荐】

    	<div id="main" style="overflow: hidden;">
    		<div id="left">
    			
    		</div>
    		<div id="right">
    	</div>
    

    【3】使用after伪元素清除浮动
    html代码:

    		<div class="clearfix" id="main" >
    			<div  id="left" ">
    				
    			</div>
    			<div id="center">
    				
    			</div>
    			<div id="right" >
    			</div>
    		</div>
    

    css代码:

    	.clearfix:after{
    	content: "";
    	display: block;
    	height: 0;
    	clear: both;
    	visibility: hidden;
    	}
    
    展开全文
  • css选择器:基础选择器,复合选择器 1.标签选择器 2.类选择器 3.id选择器 4.通配符选择器
  • CSS 三大特性: 继承/优先级/叠层(后者会覆盖前者) 优先级排序:!important > 行内样式 > id选择器 > 类选择器 > 标签选择器 > 通配符 > 继承 > 浏览器默认 id选择器(#myid) ...通配符选择器(*
  • 一、CSS 选择器 1. 选择器的作用 :选择器(选择符)就是根据不同需求把不同的标签选出来这就是选择器的作用。... 基础选择器又包括:标签选择器、类选择器、id 选择器和通配符选择器(四大类) 每个基础选择...
  • 选择器的作用 选择标签 ①标签选择器 标签名 { 属性1: 值; 属性2: 值; } 将当前页面中所有的这个标签名都选择出来 修改样式 不能修改某一个的样式... 通配符选择器不需要调用 自动给所有元素使用样式
  • 1通配符选择器 * 2元素选择器 element 3类选择器 .class 4id选择器 #id 5内联样式 style 二、复合选择器: 1交集选择器 element.class || element#id 2并集选择器 element1,element2,element3,... 3后...
  • CSS选择器及其权重基本选择器属性选择器并列选择器选择器...通配符选择器 - - - * { } 属性选择器 存在选择器 - - - [attribute] { } 相等选择器 - - - [attribute = “value”] { } 前缀选择器 - - - [attribute ^
  • 通配符选择器: 也是一种简单的选择器,用 "*"表示,一般称之为通配符,表示对任意元素都有效 属性选择器: 对带有指定属性的HTML元素设置样式,从广义的角度来看,元素选择器是一种元属性选择器的特例,是一种忽视...
  • 选择器 1.行间样式:(在标签行内声明)(很少用) 2.head标签内声明style(双标签) { *(通配符){ 获取每一个元素; } #id{ 获取所有为此id名的元素 (注意:一个id对应一个标签) } .class{ 获取类名为此的类 (注:...
  • css的基本认识css基础引入样式的三种方法行间样式内部样式外部样式选择器类选择器id选择器通配符选择器选择器优先级别选择器进阶关系选择器群主选择器交集选择器常用的伪类其他选择器比较 css基础 <!DOCTYPE ...
  • 选择器元素选择器类选择器属性选择器关系选择器并选择器通配符选择器 元素选择器 用标签名作为选择器,选中所有相应的元素 类选择器 根据class的属性来选择元素,样式定义为:.classname { } ID选择器 根据id名来...
  • 选择器:使界面更整洁标签选择器类选择器多类名选择器ID选择器ID选择器和类选择器的区别通配符选择器链接伪类选择器结构伪类选择器(CSS3)目标伪类选择器 标签选择器 类选择器 示例(sublime环境) <!DOCTYPE...
  • 行间样式>id>class>类型选择>通配符 选择器的优先级一致的情况下,后边的样式会覆盖前边的 转载于:https://www.cnblogs.com/muzha-yuan/p/5373280.html
  • css3选择器

    2020-02-29 20:44:54
    让我们康康有哪些选择器呢? 选择器的分类 ...元素选择符包括:通配符选择器()、标签选择器(element)、id 选择器(#)、class 选择器(.)。 **1. 通配符选择器()** 可以选择所有元素的选择器。web ...
  • 选择器

    2017-03-15 23:52:00
    选择 在最近的web开发中是不是就会用到一些选择器,发现很多尤其是CSS3新增的不太熟悉,在此总结一下。 优先级 ...6.通配符选择器 同一级别 同一级别中后写的会覆盖先写的样式 基础选择器 ...
  • 基本选择器又分为:通配符、标签选择器、class选择器、id选择器,在这里需要注意的编程思想在css层叠样式表中元素有且仅有一个id。注意以下几点1.id唯一性2.元素id不相同,就像每一个人只有一个身份证一样,ID就代表...
  •  CSS3 属性选择器,在 CSS3 中,追加了三个属性选择器分别为:[att*=val]、[att^=val]和[att$=val],使得属性选择器有了通配符的概念。 <!DOCTYPE html> <html lang="en"> <head> <...
  • CSS选择器

    2016-11-28 12:16:44
    在最近的web开发中是不是就会用到一些选择器,发现很多尤其是CSS3新增的不太熟悉,在此总结一下。 优先级 不同级别 ...important 会覆盖页面内任何位置定义的...6.通配符选择器 7.浏览器自定义 同一级别 同
  • 十分钟搞定CSS选择器

    2017-11-08 23:27:00
    在最近的web开发中是不是就会用到一些选择器,发现很多尤其是CSS3新增的不太熟悉,在此总结一下。 优先级 不同级别 1. 在属性后面使用 !...6.通配符选择器 7.浏览器自定义 同一级别 同一级别中后写的会覆盖先...
  • 1.通配符选择器 2.id选择器 3.类选择器 4.伪类选择器 5.派生选择器 6.群组选择器 7.标签选择器 二、案例源码demo:https://github.com/Way123Ne/htmAndcssAndJs/tree/master/CSSSelectorDemo/WebRoot...
  • CSS3选择器的性能比较

    2015-08-18 13:58:52
    在众多CSS3选择器中,如何选择最合适的选择器一直是很揪心的问题。A.Google 资深web开发工程师Steve Souders一句话就可以概括这个问题:1.id选择器(#myid)2.类选择器(.myclassname)...通配符选择器(*)8.属性选...

空空如也

空空如也

1 2 3 4 5 ... 7
收藏数 127
精华内容 50
关键字:

web通配符选择器