精华内容
下载资源
问答
  • html标签选择器
    千次阅读
    2017-08-30 10:15:15
    <!DOCTYPE html>


    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title>标签选择器</title>
        <style>
            p{
                color:red;
            }
            h1{
                color:blue;
            }


        </style>
    </head>
    <body>
        <!--
            1.什么是标签选择器?
            作用:根据指定的标签名称,在当前界面中找到所有该名称的标签,然后设置属性


            格式:
            标签名称{
            
                属性:值;
            }
            注意点:
            1.标签选择器选中的是当前界面中所有的标签,而不能单独选中某一个标签
            2. 标签选择器无论标签藏得多深都能选中
            3.只要是html中的标签就可以作为标签选择器
        -->
        <p>我是段落</p>


        <h1>
            我是标题
        </h1>
    </body>
    </html>
    更多相关内容
  • HTML标签 选择器使用

    千次阅读 2018-08-24 14:56:21
    CSS 选择器: (最常使用的css选择是类和便签选择器,类和便签的的组合...标签选择器(div, h1, p) 相邻选择器(h1 + p) 子选择器(ul &gt; li) 后代选择器(li a)  通配符选择器( * ) 属性选择器(a[rel =...

    CSS 选择器:

    (最常使用的css选择是类和便签选择器,类和便签的的组合形式也很好用,非常不建议使用id选择器,id一般不用来写样式)

     id选择器(# myid)

     类选择器(.myclassname)

    标签选择器(div, h1, p)

    相邻选择器(h1 + p)

    子选择器(ul > li)

    后代选择器(li a)

     通配符选择器( * )

    属性选择器(a[rel = "external"])

    伪类选择器(a: hover, li:nth-child)

    可继承的样式:

     font-size、 font-family、color、 UL、LI、DL、DD、DT

    不可继承的样式属性:

    border、 padding、margin、width、 height

    优先级算法:(理解这个很重要,当有样式冲突的时候可以看看这个优先级顺序)

    优先级就近原则,同权重情况下样式定义最近者为准;

    载入样式以最后载入的定位为准;

    3)      3.!important >  id > class > tag  

    4)      important 比 内联优先级高,但内联比 id 要高

    CSS3新增伪类举例:(这个写样式也很好用)

    1)      p:first-of-type  选择属于其父元素的首个 <p> 元素的每个 <p> 元素。

    2)      p:last-of-type   选择属于其父元素的最后 <p> 元素的每个 <p> 元素。

    3)      p:only-of-type  选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。

    4)      p:only-child     选择属于其父元素的唯一子元素的每个 <p> 元素。

    5)      p:nth-child(2)  选择属于其父元素的第二个子元素的每个 <p> 元素。

    6)      :enabled :disabled 控制表单控件的禁用状态。

    7)      :checked         单选框或复选框被选中。

    CSS3有哪些新特性?

    1)    CSS3实现圆角(border-radius),阴影(box-shadow),

    2)    对文字加特效(text-shadow、),线性渐变(gradient),旋转(transform)

    3)    transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋转,缩放,定位,倾斜

    4)    增加了更多的CSS选择器  多背景 rgba 

    5)    在CSS3中唯一引入的伪元素是 ::selection.

    6)    媒体查询,多栏布局

    7)    border-image

    展开全文
  • 一个HTML文件由很多不同的标签组成,利用标签选择器可以统一设置使用某类标签定义的元素的外观。 例如: text-align:center; font-size:42px; color:#FF6600; 2.类选择器(class) 使用类选择器可以相同或不同的...

    HTML中选择器

    1. 标签选择器
    一个HTML文件由很多不同的标签组成,利用标签选择器可以统一设置使用某类标签定义的元素的外观。
    例如:

                text-align:center;
                font-size:42px;
                color:#FF6600;
    

    2.类选择器(class
    使用类选择器可以相同或不同的标签分类设置不同的样式。定义类选择器时,需要在类名称前面加一个“.”。
    语法如下:

    .类名{样式属性:取值:样式取值:取值:…}

    实例如下:

      <html>
      <head>
      <title>class选择器</title>
      <style type="text/css">
      <!--
       .one{                      /*类名为one的类选择器*/
           color:red;             /*文字颜色为红色*/
           font-size:18px;        /*文字大小为18像素*/     
           }
      -->
      </style>
      </head>
      <body>
            <p class="one">精彩阿鑫很6</p>
      </body>
      </html>
    

    3.id选择器
    id选择器用来对单个元素设置单独的样式,在同一html文件中,id不能重复。定义id选择器时,需要在id名称前面加一个#号。
    语法如下:

    .id名{样式属性:取值:样式属性:取值:…}

      <html>
      <head>
      <title>class选择器</title>
      <style type="text/css">
      <!--
       #one{                      /*类名为one的类选择器*/
           color:red;             /*文字颜色为红色*/
           font-size:18px;        /*文字大小为18像素*/     
           }
      -->
      </style>
      </head>
      <body>
            <p id="one">精彩阿鑫很6</p>
      </body>
      </html>
    

    4.通用选择器
    通用选择器是一种特殊类型的选择器,它用星号*来表示选择器是名称,可以定义所有网页元素的显示格式。
    如:

       *{margin:0;
          padding:0;
           }
    

    欢迎大家赞赏阿鑫的CSDN博客 喜欢点赞记得关注!!!!!

    展开全文
  • html的几种选择器

    千次阅读 2021-08-23 23:23:24
    一、并集选择器 就是把两个选择器写在一起,用逗号隔开。例如:.pp1,.pp2{} <DOCTYPE! html> <html> <head> <title>第九题</title> <meta charset="utf-8"> <style...

    目录

    一、并集选择器

    二、后代选择器

    三、子元素选择器

    四、相邻元素选择器

    五、交集选择器

    六、通用兄弟选择器

    七、序选择器

    同级别:

    同类型:

    八、属性选择器

    九、通用选择器


    一、并集选择器

    就是把两个选择器写在一起,用逗号隔开。例如:.pp1,.pp2{}

    <DOCTYPE! html>
    <html>
        <head>
    	<title>第九题</title>
    	<meta charset="utf-8">
    	<style>
    	    .pp1,.pp2{color:red;font-size:50px;}
    	    .ss1{font-weight:bolder;}
    	</style>
        </head>
        <body>
           <p class="pp1 ss1">我是标题</p>
           <p class="pp2">我是段落</p>
        </body>
    </html>

    二、后代选择器

    标签之间有先后顺序,中间用空格隔开,选择器1 选择器2 选择器3{}。例如:div ul li{}

    <DOCTYPE! html>
    <html>
        <head>
    	<title>第五题</title>
    	<meta charset="utf-8">
    	<style>
    	    body div p{
    		text-indent:1em;
    		}
    	    body div h2{ 
    		color:blue;
    		font:italic bolder 30px "黑体";
    		text-indent:2em;}
    		}
    	</style>
        </head>
        <body>
    	    <h1>正能量故事五:用人之道</h1>
    	    <p>去过庙的人都知道,一进庙门,首先是弥陀佛,笑脸迎客,而在他的北面,则是黑口黑脸的韦陀。但相传在很久以前,他们并不在同一个庙里,而是分别掌管不同的庙。</p>
    		<div>
    		<p>1.为什么弥乐佛来的人非常多,依然入不敷出?</p>
    	    <h2>弥乐佛热情快乐,所以来的人非常多,但他什么都不在乎,丢三拉四,没有好好的管理账务,所以依然入不敷出。</h2>
    		<p>2.为什么韦陀管账是一把好手,最后却香火断绝?</p>
    		<h2>而韦陀虽然管账是一把好手,但成天阴着个脸,太过严肃,搞得人越来越少,最后香火断绝。</h2>
    		<p>3.为什么在大师的眼里,没有废人?</p>
    		<h2>佛祖在查香火的时候发现了这个问题,就将他们俩放在同一个庙里,由弥乐佛负责公关,笑迎八方客,于是香火大旺。而韦陀铁面无私,锱珠必较,则让他负责财务,严格把关。在两人的分工合作中,庙里一派欣欣向荣景象。</h2>
    		<p>4.我们在这个故事里面得到的启示是什么?</p>
    		<h2>其实在用人大师的眼里,没有废人,正如武功高手,不需名贵宝剑,摘花飞叶即可伤人,关键看如何运用。 </h2>
    		</div>
        </body>
    </html>

    三、子元素选择器

    选择器1>选择器2>选择器3{}

    四、相邻元素选择器

    <!DOCTYPE html>
    <html lang="en">
    	<head>
    	<title>子选择器的综合使用</title>
    		<meta charset="utf-8">
    		<style>
    		    body h1+p{color:yellow;}
    		    body div h2+p{color:green;}
    		    body div div p{color:red;}
    		    body div div p+p{color:pink;}
    		    body div div+p{color:purple;}
    		    body p{color:blue;}
    		</style>
    	</head>
    	<body>
    	<h1>Headline</h1>
    	<p>paragraph 1</p>
    	        <div class="main">
    				<h2>Headline 2</h2>
    				<p>paragraph 2</p>
    	            <div>
    	                  <p>paragraph 3</p>
    	                  <p>paragraph 4</p>
    	            </div>
    				<p>paragraph 5<p>
    	        </div>
    			
    	<p >paragraph 6</p>
    
    	</body>
    </html>

    五、交集选择器

    就是两个不同的选择器一起用。#ss1.cc1{}

    <DOCTYPE! html>
    <html>
        <head>
    	<title>第七题</title>
    	<meta charset="utf-8">
    	<style>
    	    #s1.c1{font-size:30px;color:green;text-align:right;}
    	    #s2.c1{font-size:30px;color:green;text-align:right;}
    	</style>
        </head>
        <body>
           <h1>成功法则</h1>
           <p>迟到毁一生</p>
           <p id="s1" class="c1">早退穷三代</p>
           <p id="s2" class="c1">按时上下课</p>
           <p>必成高富帅</p>
    	   
        </body>
    </html>

    六、通用兄弟选择器

     h1~p        h1后面的p全部选中

    a~p        a后面的p全部选中

    七、序选择器

    只识别div,可以和其他选择器结合

    同级别:

    first-child        同级别第一个

    last-child        同级别最后一个

    nth-child(n)        (n)为同级别中的第n个标签

    nth-last-child(n)        (n)为同级别中倒数的第n个标签

    only-child        唯一标签

    nth-child(odd)        同级别中的奇数标签

    nth-child(even)        同级别中的偶数标签

    同类型:

    first-of-type        同类型第一个

    last-of-type        同类型最后一个

    nth-of-type(n)        (n)为同类型中的第n个标签

    nth-last-of-type(n)        (n)为同类型中倒数的第n个标签

    only-of-type        唯一标签,可识别div外的内容

    nth-of-type(n+1)        选中第n个标签后所有的标签

    <!DOCTYPE HTML>
    <head>
    <title>序选择器的使用3</title>
    <meta charset="utf-8"> 
    	<style type="text/css">
    	    p:nth-of-type(n){
    		color:green;
    		font:italic bold 30px "华文新魏";
    		text-decoration:line-through;
    		text-align:center;
    		}
    	</style>
    </head>
    <body>
    <h1>我是标题1</h1>
    <p>我是段落1</p>
    <p>我是段落2</p>
    <p>我是段落3</p>
    <p>我是段落4</p>
    <h1>我是标题2</h1>
    <p>我是段落5</p>
    <p>我是段落6</p>
    <p>我是段落7</p>
    <p>我是段落8</p>
    </body>
    </html>

    <!doctype html>
    <html>
        <head>
    	    <meta charset="utf-8">
    		<title>序选择器的使用2</title>
    		<style type="text/css">
    		   p:nth-of-type(3n+1){
    		   color:red;
    		   font:30px "华文新魏";
    		   text-decoration:underline;
    		   text-align:center;
    		   }
    		   p:nth-of-type(3n+2){
    		   color:blue;
    		   font:30px "微软雅黑";
    		   text-decoration:overline;
    		   }
    		</style>
        </head>
    	<body>
    	    <h1>我是标题</h1>
    		<p>我是段落1</p>
    		<p>我是段落2</p>
    		<p>我是段落3</p>
    		<p>我是段落4</p>
    		<p>我是段落5</p>
    		<p>我是段落6</p>
    		<p>我是段落7</p>
    		<p>我是段落8</p>
    	</body>
    </html>

    八、属性选择器

    模板:标签[属性]{}

    p[id]{}        所有p标签内的id标签都统一更改,class也可以

    p[class=pp1]{}        只修改class=pp1的内容

    <!DOCTYPE HTML>
    <head>
    <title>属性选择器的综合应用</title>
    <meta charset="utf-8"> 
    <style>
    h1[class=aa]{
    text-align:center;
    }
    p[class=bb]{
    text-align:center;
    color:red;
    font-size:30px;
    }
    p[class=cc]{
    text-align:center;
    color:green;
    font-size:30px;
    }
    </style>
    </head>
    <body>
    <h1 class="aa">成功法则</h1>
    	
    	 <p class="bb">迟到毁一生</p>
    	
    	 <p class="cc">早退穷三代</p>
    	
    	 <p class="bb">按时上下课</p>
    	
    	 <p class="cc">必成高富帅</p>
    </body>
    </html>

    九、通用选择器

    *{}        这个可以修改body内的所有内容

        *{
        font:30px "隶书";
        }

    设置所有字体为隶书,大小为30px

    展开全文
  • 1.标签选择器 语法格式: <style> 标签名{ 属性:属性值; 属性:属性值; } </style> 标签选择器主要针对的是页面中某个标签中的样式设置,它的作用范围是这个页面内所有写在该标签内的内容,标签...
  • 标签选择器和id选择器

    千次阅读 2021-04-26 15:30:07
    标签选择器和id选择器 标签选择器 标签选择器也称元素选择器、类型选择器,它直接使用元素的标签名当做选择器,将选择页面上所有该种标签。 标签选择器将选择页面上所有该种标签,无论这个标签所处位置的深浅。看...
  • CSS|标签选择器

    千次阅读 2021-07-25 14:26:15
    CSS|标签选择器 1.简介 选择器的作用是选择页面上的某一个或者某一类元素 基本选择器: 标签选择器 类选择器 id选择器 2.标签选择器 CSS文件: /* 标签选择器 会选择到页面上所有的该标签元素 */ h1{ color: red...
  • 标签选择器(元素选择器)

    千次阅读 2019-10-02 20:05:36
    标签选择器(元素选择器) 标签器是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。其基本语法格式如下: 标签名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; ......} 标签...
  • 1.标签选择器:如:p td tr h1 h2 span a 标签选择器,是所有带有某种标签的都生效。这里以p为例,也就是所有的带有p标记的都会这样的样式 CSS代码: p{color:red;} HTML代码: >我是标签小红> 2.类别选择器:...
  • 标签选择器 类选择器 层级选择器(后代选择器) id选择器 组选择器 伪类选择器 3. 标签选择器 根据标签来选择标签,以标签开头,此种选择器影响范围大,一般用来做一些通用设置。 示例代码 <style type=...
  • CSS——标签选择器,类选择器

    千次阅读 2020-06-26 21:04:00
    文章目录选择器(重点)CSS...标签选择器是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。其基本语法格式如下: 标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 或者
  • CSS 标签选择器

    千次阅读 2020-09-04 09:57:05
    本节我们来学习 CSS 中的...本节我们来讲标签选择器标签选择器是 CSS 中最常见的选择器。像前面几节中,我们举例时用到的都是标签选择器。 通过前面的学习我们知道在 HTML 页面中引入 CSS 样式最好的方法是引入外部
  • JS标签选择器以及节点操作

    万次阅读 2019-03-19 15:21:21
    JS的DOM开始当然是从选择器开始的,小编这边先做一个归类。 一、DOM选择器 document代表整个文档这边就省略他的开头了 1. getElementById( ) //显然是用作与获取id来获取标签(实战中不常用) 2....
  • 标签选择器是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。其基本语法格式如下: 标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 或者 元素名{属性1:属性值1; 属性2...
  • CSS:美化网页元素,控制HTML标签展示样式 CSS与HTML相结合,结合方式如下: (1)内联样式:CSS代码复用性太低,书写凌乱,不推荐,缺点就是一次只能控制一个标签端的展示样式 (2)内部样式:配合选择器,进行标签...
  • css标签选择器、类名选择器、多类名选择器 标签选择器:顾名思义,标签选择器就是在css样式中通过标签名字来对标签的样式来进行修改。 代码如下: <!DOCTYPE html> <html lang="en"> <head>...
  • 基于Vue实现多标签选择器

    千次阅读 2019-09-22 21:14:31
    html lang="en"> <head> <title>Document</title> <!-- 引入本地组件库 --> <link rel="stylesheet" href="static/element-ui/index.css"> <script ...
  • HTML5基础之常用标签以及标签选择器

    万次阅读 2016-11-14 20:23:02
    html中,标签非常多,比如说列表,按钮,图片,文字等等,每一种标签都有自己的使用方法以及相关的约束条件。具体的标签可以直接到w3c的网站上查看,这里就简单了解一下html5的标签。 一、HTML5的新结构标签  在...
  • 一:什么是 CSS 中的元素选择器(标签选择器)。 二:元素选择器的语法及优缺点。
  • 标签选择器中的“标签”指的是HTML标签,such as:a、span、div、p、li、img等。 格式举例: .... div{backgroud-color:red; font-size:16px;} .... <div>...</div>//就会按标签里写的格式显示...
  • 1、id选择器 #box{ } #box{ ................. } 特点:每一个标签只能有一个ID。 2、类选择器 .类名{ } .box{width: 100px;height: 100px;background: blue} .box2{border:5px solid ...
  • 标签选择器是指用HTML标签名称作为选择器.按标签名称分类.为页面中某一类标签指定统一的CSS样式. 作用:可以把某一类标签全部选择出来.比如所有的div标签 和 所有的 span标签 语法: 标签名{属性1:属性值1; 属性2:属性...
  • ,说不允许使用标签选择器、属性选择器、id选择器,但是效果是有的,但是我们不知道在什么时候会失效,为了保险起见,我们还是听话,不用。 二、解决方式 我们可以这样,在组件的外面再套一层容器 //父组件中使用了...
  • 3 元素(标签选择器: 格式 标签名(html元素){ /*CSS样式代码*/ } 使用范围,是将同样的样式,作用在多个同名的标签上。 4 类选择器: 我是红色 我是红的 当 heml的标签名不一样,但是需求一样时,就...
  • CSS选择器的作用是从HTML页面中找出特定的某类元素,而常用的CSS选择器有如下几类,一起来看看吧! 一、通配符选择器 通配符选择器常用 ‘*’ 号表示,它是所有选择器里作用范围最广的,能匹配页面中所有的元素。 ...
  • HTML常用标签 选择器

    千次阅读 2018-06-02 09:10:06
    标题标签&lt;h1&gt;~&lt;h6&gt; 1最大,6最小 段落 &lt;p&gt;&lt;/p&gt; 换行 &lt;br/&gt; 水平线 &lt;hr/&gt; 粗体&lt;strong&gt;&lt;/strong&...
  • 这里我们就需要在HTML元素中设置id和class选择器。那有的新手朋友可能就会问,css class怎么用?div标签用id还是class呢?本篇文章就给大家介绍关于css类选择器id和class的用法和区别。希望通过对id和class通俗易懂...
  • 概述 想要实现对 HTML 页面中的元素进行一...标签选择器(就是标签的名字) 所有的标签,都可以是选择器。比如 div、span、ul、li、dt、dl、dd、input 等 无论这个标签藏的多深,一定能够被选择上 标签选择器,...
  • css选择器设置标签样式

    千次阅读 2018-11-14 23:19:31
    html标签上设置style可以给标签设置属性: &lt;div style="background-color: #2459a2;height: 48px;"&gt;啊啊啊&lt;/div&gt; 我们还可以通过&lt;head&gt;标签里设置选择器...
  • 标签指定式选择器 用法:        标签名.选择器名{属性:值; 属性:值;}        特点关系:既…又… <DOCTYPE html> <html> <...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 396,666
精华内容 158,666
关键字:

html标签选择器