精华内容
下载资源
问答
我要提问
  • 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>
    css
    更多相关内容

  • 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

    收起
    展开全文
    css3新增伪类

  • HTML中的标签选择器、类选择器、ID选择器等之间的区别

     千次阅读 2020-09-07 17:48:58
    一个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博客 喜欢点赞记得关注！！！！！

    收起
    展开全文
    css css3

  • 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

    收起
    展开全文
    css

  • CSS基础之标签选择器 类选择器 ID选择器

     千次阅读 2021-12-01 13:35:55
    1.标签选择器 语法格式： <style> 标签名{ 属性:属性值； 属性:属性值; } </style> 标签选择器主要针对的是页面中某个标签中的样式设置，它的作用范围是这个页面内所有写在该标签内的内容，标签...
    收起
    css3

  • 标签选择器和id选择器

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

  • CSS|标签选择器

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

  • 标签选择器（元素选择器）

     千次阅读 2019-10-02 20:05:36
    标签选择器（元素选择器） 标签器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。其基本语法格式如下： 标签名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; ......} 标签...
    收起

  • html标签选择器的使用选择（学习小记）

     千次阅读 2013-07-24 23:26:58
    1.标签选择器：如：p td tr h1 h2 span a 标签选择器，是所有带有某种标签的都生效。这里以p为例，也就是所有的带有p标记的都会这样的样式 CSS代码: p{color:red;} HTML代码: >我是标签小红> 2.类别选择器：...
    收起

  • css 选择器（标签选择器、类选择器、层级选择器、id选择器、组选择器、伪类选择器、通配符选择器）

     千次阅读 2021-04-17 15:16:07
    标签选择器 类选择器 层级选择器(后代选择器) id选择器 组选择器 伪类选择器 3. 标签选择器 根据标签来选择标签，以标签开头，此种选择器影响范围大，一般用来做一些通用设置。 示例代码 <style type=...
    收起
    css

  • CSS——标签选择器，类选择器

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

  • CSS 标签选择器

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

  • JS标签选择器以及节点操作

     万次阅读 2019-03-19 15:21:21
    JS的DOM开始当然是从选择器开始的，小编这边先做一个归类。 一、DOM选择器 document代表整个文档这边就省略他的开头了 1. getElementById( ) //显然是用作与获取id来获取标签（实战中不常用） 2....
    收起
    JS节点操作

  • CSS基础选择器（标签选择器、类选择器、多类名选择器、 id选择器、通配符选择器、属性选择器）

     千次阅读 2019-06-06 11:08:05
    标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。其基本语法格式如下： 标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 或者 元素名{属性1:属性值1; 属性2...
    收起
    css css3

  • CSS选择器（id选择器，包含选择器，标签名选择器，类选择器，属性选择器，通配符选择器，伪类选择器，相邻...

     千次阅读 2020-07-06 23:51:03
    CSS：美化网页元素，控制HTML标签展示样式 CSS与HTML相结合，结合方式如下： （1）内联样式：CSS代码复用性太低，书写凌乱，不推荐，缺点就是一次只能控制一个标签端的展示样式 （2）内部样式：配合选择器，进行标签...
    收起
    css

  • css标签选择器、类名选择器、多类名选择器

     千次阅读 2019-06-21 00:30:05
    css标签选择器、类名选择器、多类名选择器 标签选择器：顾名思义，标签选择器就是在css样式中通过标签名字来对标签的样式来进行修改。 代码如下： <!DOCTYPE html> <html lang="en"> <head>...
    收起
    css

  • 基于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 教程系列第 5 篇】什么是 CSS 中的元素选择器（标签选择器）

     千次阅读 2019-11-24 16:18:11
    一：什么是 CSS 中的元素选择器（标签选择器）。 二：元素选择器的语法及优缺点。
    收起

  • 【CSS】标签选择器、类选择器和ID选择器的区别

     千次阅读 2019-03-26 20:17:24
    标签选择器中的“标签”指的是HTML标签，such as：a、span、div、p、li、img等。 格式举例： .... div{backgroud-color:red; font-size:16px;} .... <div>...</div>//就会按标签里写的格式显示...
    收起

  • 11选择器（id选择器，类选择器，标签选择器）

     千次阅读 2016-09-05 09:23:44
    1、id选择器 #box{ } #box{ ................. } 特点：每一个标签只能有一个ID。 2、类选择器 .类名{ } .box{width: 100px;height: 100px;background: blue} .box2{border:5px solid ...
    收起
    id选择器 类选择器

  • 标签选择器 ~类选择器~id选择器~通配符选择器~

     千次阅读 2019-02-12 17:28:33
    标签选择器是指用HTML标签名称作为选择器.按标签名称分类.为页面中某一类标签指定统一的CSS样式. 作用:可以把某一类标签全部选择出来.比如所有的div标签 和 所有的 span标签 语法: 标签名{属性1:属性值1; 属性2:属性...
    收起

  • 小程序不支持标签选择器、id选择器？那就不用。

     千次阅读 2020-04-29 10:34:34
    ，说不允许使用标签选择器、属性选择器、id选择器，但是效果是有的，但是我们不知道在什么时候会失效，为了保险起见，我们还是听话，不用。 二、解决方式 我们可以这样,在组件的外面再套一层容器 //父组件中使用了...
    收起
    css

  • css各种选择器，元素标签选择器，类选择器，id选择器，选择器的组合

     千次阅读 2017-10-28 11:29:40
    3 元素（标签）选择器： 格式 标签名（html元素）{ /*CSS样式代码*/ } 使用范围，是将同样的样式，作用在多个同名的标签上。 4 类选择器： 我是红色 我是红的 当 heml的标签名不一样，但是需求一样时，就...
    收起
    css java helloworld

  • CSS常用选择器（通配符选择器，标签选择器，类选择器，id选择器.....），你知道多少？

     万次阅读 多人点赞 2020-03-07 15:20:58
    CSS选择器的作用是从HTML页面中找出特定的某类元素，而常用的CSS选择器有如下几类，一起来看看吧！ 一、通配符选择器 通配符选择器常用 ‘*’ 号表示，它是所有选择器里作用范围最广的，能匹配页面中所有的元素。 ...
    收起
    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选择器？（示例）

     千次阅读 2021-06-11 04:02:40
    这里我们就需要在HTML元素中设置id和class选择器。那有的新手朋友可能就会问，css class怎么用？div标签用id还是class呢？本篇文章就给大家介绍关于css类选择器id和class的用法和区别。希望通过对id和class通俗易懂...
    收起

  • CSS-基础选择器，标签选择器、id 选择器、类选择器、通配符 *的用法详解

     千次阅读 2019-09-28 19:24:36
    概述 想要实现对 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;标签里设置选择器...
    收起
    css 选择器 css选择器

  • 标签指定式选择器、后代选择器、并集选择器

     千次阅读 2020-02-12 20:13:36
    标签指定式选择器 用法：        标签名.选择器名{属性:值; 属性:值;}        特点关系：既…又… <DOCTYPE html> <html> <...
    收起
    css

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 396,666
精华内容 158,666
热门标签
关键字：

html标签选择器