精华内容
下载资源
问答
  • CSS 选择器分类

    2019-07-05 06:48:53
    CSS 选择器分类  普通选择器:使用HTML元素标签座位选择器。  如: p{ font-size:24px; }  派生选择器:通过依据元素在其位置的上下文关系定义样式,是标记更加简洁。  如: h2 strong{color:bule;}  &...

    CSS 选择器分类

       普通选择器:使用HTML元素标签座位选择器。

          如:  p{ font-size:24px; }

       派生选择器:通过依据元素在其位置的上下文关系定义样式,是标记更加简洁。

          如:  h2 strong{color:bule;}

              <h2>The strongly emphasized word in this subhead is<strong>blue</strong>.</h2>

              // h2 strong影响以上的blue文本。

       id 选择器:为标记特定id的HTML元素指定特定的样式。

          如:   #red {color:red}

               <p id="red">这个段落是红色。</p>  //id为red的元素的字符为红色。

       类选择器:类选择器以一个点号显示。

          如:      .center {text-align: center}

              <h1 class="center">This heading will be center-aligned</h1> 

               //class为“center”的多个元素都水平居中对齐

    转载于:https://www.cnblogs.com/lanchong/archive/2010/07/20/1781584.html

    展开全文
  • CSS选择器分类

    2020-09-28 10:43:23
    选择器 【掌握】 一、基本选择器【重点】 1.标签选择器 权值1 标签选择器: 利用标签名称做为选择器的名称,可以选择页面上的一种标签 格式: 标签名 <style type="text/css"> p { color: red; } div { ...

    选择器 【掌握】

    一、基本选择器【重点】

    1.标签选择器 权值1

    标签选择器: 利用标签名称做为选择器的名称,可以选择页面上的一种标签
    格式: 标签名

    <style type="text/css">
    		p {
    			color: red;
    		}
            div {
    		    color: red;
    		}
    </style>
    

    2.ID选择器 权值100

    ID选择器: 选择页面上唯一的标签,
    格式: #id属性的值

    <style type="text/css">
    		#header {
    			color: blue;
    		}
            #header {
    			color: red;
    		}
            #header {
    			color: yellow;
    		}
    </style>
    <body>
            <div id="header">我是头部</div>
    		<div id="main">我是主体</div>
    		<div id="footer">我是尾部</div>
    </body>
    

    3.类选择器 【开发中引用最常见】 权值10

    类选择器: 利用标签中的class属性的值作为选择器的名称,可以选择页面上的一类标签,这里的一类是由开发者自己来定义的,用户也可以使用复合属性来对标签归类,class的名称在页面中可以重复

    格式: .class属性的值

    <style type="text/css">
    			.a {
    				color: red;
    			}
    			
    			.b {
    				color: green;
    			}
    
                .c {
                    color:blue
    }
    </style>
    <body>   
    		 <h1 class="a">王宝强</h1>
             <span class="b">PGONE</span>
    		 <p class="c">班长</p>
    		 <!-- 复合属性 -->
    		 <p class="a b">李小璐</p>
    </body>
    

    三种选择器的优先级 【掌握】
    如果多个基本选择器作用于同一个标签,那么优先级顺序是:
    Id选择器 > 类选择器 > 标签选择器

    选择器的权值 【了解】
    选择器 权值 描述
    style = “” 1000 标签内引入
    id 100 ID选择器
    .class 10 类选择器
    tag name 1 标签名选择器

    如果多个选择器的优先级相同时,根据浏览器的渲染工作原理,从上向下渲染。也即谁离结构越近,谁的优先级越高。

    三种基本选择器还可以互相嵌套使用,使用规则如下
    1.如果中间有标签选择器,那么标签选择器必须出现在最前面
    2.如果没有标签选择器,那么随意

    二、高级选择器 【掌握】

    1.通用选择器 【掌握】

    选择页面中所有的标签,通常用来设置页面的整体样式,例如外边距和内边距

    <style type="text/css">	
    		/* 选择页面中所有的标签 */
    		* {
    			padding: 0px;
    			margin: 0px;
    		}
    </style>
    

    2.组合选择器 【掌握】

    选择页面中多个选择器,每个选择器使用逗号隔开,一般用来抽取多个标签的共同样式
    div, span,ul,li {
    color: white;
    background: black;
    }

    3.层次选择器 【掌握】

    3.1 后代选择器
    格式: E F 选择E标签下面所有的F标签
    3.2 子代选择器
    格式: E>F 选择E标签下面第一层中所有的F子标签
    3.3 相邻兄弟选择器
    格式: E+F 选择E标签后面同辈的紧邻的F标签
    3.4 通用兄弟选择器
    格式: E~F 选择E标签后面同辈的所有F标签

    代码示例

    <!DOCTYPE html>
    <html>
    <head lang="en">
    	<meta charset="UTF-8">
    	<title>使用CSS3层次选择器</title>
    	<style type="text/css">
    
    		/*让所有的p标签和ul标签加上边框*/
    		p,ul{
    			border: 1px solid red;  /*边框属性*/
    		}
    
    		/*后代选择器: 给body下面所有的p标签加上背景*/
    		body p {
    			background-color: red;
    		}
    		/*子选择器 给body下面的一级子标签p标签加上背景*/
    		body>p {
    			background-color: red;
    		}
    		/*相邻兄弟选择器: 给.active所对应的p标签 紧邻的p标签设置背景*/
    		.active+p {
    			background-color: red;
    		}
    		/*通用兄弟选择器: 给.active对应的p标签 后面的所有兄弟标签p标签设置背景*/
    		.active~p {
    			background-color: red;
    		}
    	</style>
    </head>
    <body>
    	<p class="active">1</p>
    	<p class="active2">2</p>
    	<p>3</p>
    	<ul>
    		<li>
    			<p>4</p>
    		</li>
    		<li>
    			<p>5</p>
    		</li>
    		<li>
    			<p>6</p>
    		</li>
    	</ul>
    
    </body>
    </html>
    

    4.结构伪类选择器 【掌握】

    4.1 E F: first-child 选择E标签下面第一个子标签F
    4.2 E F:last-child 选择E标签下面最后一个子标签F
    4.3 E F:nth-child(n) 选择E标签下面第N个子标签F
    4.4 E F:first-of-type 选择E标签下面第一个类型是F的子标签
    4.5 E F:last-of-type 选择E标签下面最后一个类型是F的子标签
    4.6 E F:nth-of-type(n) 选择E标签下面第N个类型是F的子标签
    4.7 nth-of-type(odd) 选择E标签下面偶数个类型是F的子标签
    4.8 nth-of-type(even) 选择E标签下面奇数个类型是F的子标签
    代码示例

    <!DOCTYPE html>
    <!DOCTYPE html>
    <html>
    <head lang="en">
    	<meta charset="UTF-8">
    	<title>使用CSS3结构伪类选择器</title>
    	<style>
    		ul,li,p,h2 { border: 1px solid red;}
    		/*ul的第一个子元素*/
    		.u li:first-child {
    			background-color: red;
    		}
    		/* .li1 {
    			background-color: orange;
    		} */
    		/*ul的最后一个子元素*/
    		ul li:last-child{
    			background-color: blue;
    		}
    
    		/*body下面的第2个p元素*/
    		body p:nth-child(2) {
    			background-color: green;
    		}
    		/*选择到父级里的第一子元素p*/
    		body p:nth-of-type(1) {
    			background-color: #00FF00;
    		}
    
    		/*父元素里第2个类型为p的元素*/
    		body p:nth-of-type(2) {
    			background-color: yellow;
    		}
    	</style>
    </head>
    <body>
    	<h2>结构伪类选择器</h2>
    	<p>p1</p>
    	<p>p2</p>
    	<p>p3</p>
    	<ul class="u">
    		<li>li1</li>
    		<li>li2</li>
    		<li>li3</li>
    	</ul>
    </body>
    </html>
    

    5.属性选择器 【了解】

    5.1 E[attr] : 选择具有属性attr的元素
    5.2 E[attr=val]: 选择属性attr等于val的元素
    5.3 E[attr^=val]: 选择属性attr以val开头的元素
    5.4 E[attr$=val]: 选择属性attr以val结尾的元素
    5.5 E[attr*=val]: 选择属性attr包含val的元素

    代码示例

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			
    			a {
    				display: inline-block;
    				width: 45px;
    				height: 45px;
    				background-color: #AAAACC;
    				border-radius: 8px;
    				margin-left: 10px;
    				text-align: center;
    				line-height: 45px;
    				text-decoration: none;
    				font-size: 20px;
    				font-weight: 900;
    			}
    				
    			/* 选中所有含有id属性的链接背景为红色*/
    			a[id] {
    				background-color: red;
    			}
    			/* 选中所有class属性等于links item的链接背景为黑色*/
    			a[class="links item"] {
    				background-color: black;
    			}
    			/*注意:如果属性值中有特殊字符,那么必须使用双引号包裹*/
    			/*选中所有href中以http开头的链接为蓝色*/
    			a[href^="http://"] {
    				background-color: blue;
    			}
    			
    			/*选中所有href中以png结尾的链接为绿色*/
    			a[href$=png] {
    				background-color: green;
    			}
    	
    			/* 选中包含class中包含item的链接为橘色*/
    			a[class*=item]{
    				background-color: orange;
    			}
    			
    		</style>
    	</head>
    	<body>
    		<p class="demo">
    	    <a href="http://www.baidu.com" class="links item first" id="first" >1</a>
    	    <a href="" class="links active item" title="test website" target="_blank" >2</a>
    	    <a href="sites/file/test.html" class="links item"  >3</a>
    	    <a href="sites/file/test.png" class="links item" > 4</a>
    	    <a href="sites/file/image.jpg" class="links item" >5</a>
    	    <a href="efc" class="links item" title="website link" >6</a>
    	    <a href="/a.pdf" class="links item" >7</a>
    	    <a href="/abc.pdf" class="links item" >8</a>
    	    <a href="abcdef.doc" class="links item" >9</a>
    	    <a href="abd.doc" class="linksitem last" id="last">10</a>
    </p>
    	</body>
    </html>
    

    6.伪类选择器 【掌握】

    6.1 E:link 元素E未访问默认样式
    6.2 E:visited 元素E访问后样式
    6.3 E:hover 元素E鼠标悬浮样式
    6.4 E:active 元素E鼠标点击未松开的样式
    代码示例

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style type="text/css">
    			a {
    				display: inline-block;
    				width: 45px;
    				height: 45px;
    				background-color: #AAAACC;
    				border-radius: 8px;
    				margin-left: 10px;
    				text-align: center;
    				line-height: 45px;
    				text-decoration: none;
    				font-size: 20px;
    				font-weight: 900;
    			}
    			
    			/* 伪类选择器 */
    			a:link {
    				background-color: red;
    			}
    			
    			a:visited {
    				background-color: blue;
    			}
    			
    			a:hover {
    				background-color: yellow;
    			}
    			
    			a:active {
    				background-color: green;
    			}
    			
    		</style>
    	</head>
    	<body>
    		<a href="http://www.baidu.com" class="links item first" id="first" >1</a>
    		<a href="" class="links active item" title="test website" target="_blank" >2</a>
    		<a href="sites/file/test.html" class="links item"  >3</a>
    		<a href="sites/file/test.png" class="links item" > 4</a>
    	</body>
    </html>
    

    总结: CSS选择器学习目标就是能够灵活地使用各种选择器选择不同的标签,并且在不使用id或者class等属性的时候也能够查找到你想要的标签,同时也要学会灵活地将不同的选择器嵌套在一起使用,掌握到这个程度就可以了。

    展开全文
  • css选择器分类

    2019-10-04 13:03:29
    css选择器大致可以分为10大类: 1、元素选择器 如:p{} 2、类选择器 如:.xx{} 3、ID选择器 如:#xx{} 4、关联选择器 如:p a{} 5、子元素选择器 如:p>a{} 6、相邻兄弟选择器 如:p+a{},匹配的是紧邻p元素...

    css选择器大致可以分为10大类:

    1、元素选择器 如:p{}

    2、类选择器 如:.xx{}

    3、ID选择器 如:#xx{}

    4、关联选择器 如:p a{}

    5、子元素选择器 如:p>a{}

    6、相邻兄弟选择器 如:p+a{},匹配的是紧邻p元素后面的a元素

    7、组合选择器 如:p,a{}

    8、元素选择器 如:img[alt],匹配包含alt属性的img元素

    9、伪类选择器 如:a:hover{}

    10、伪元素选择器

     

    伪元素和伪类之所以这么容易混淆,是因为他们的效果类似而且写法相仿,但实际上 css3 为了区分两者,已经明确规定了伪类用一个冒号来表示,而伪元素则用两个冒号来表示。

    :Pseudo-classes
    ::Pseudo-elements
    

    但因为兼容性的问题,所以现在大部分还是统一的单冒号,但是抛开兼容性的问题,我们在书写时应该尽可能养成好习惯,区分两者。

    转载于:https://www.cnblogs.com/wujindong/p/5314057.html

    展开全文
  • Css选择器分类

    2019-03-05 19:49:24
    选择器名 用法和解释 标签选择器 又称为元素选择器,最为基本 格式:标签名{} ID选择器 根据id选择标签 ,格式:#id{} Class选择器 根据class名,设置的选择器 格式:.class...
    选择器名  用法和解释
    标签选择器

    又称为元素选择器 ,最为基本

    格式:标签名{}

    ID选择器 根据id选择标签 ,格式:#id{}
    Class选择器

    根据class名,设置的选择器

    格式:.class名{} ,点一定注意

    并集选择器

    创建由逗号分隔的多个选择器可以将样式应用到单个选择器匹配的所有元素 或者理解成将多个相同样式定义的选择器以逗号进行分组。

    格式:选择器,选择器,选择器{}

    后代选择器

    多个选择器以空格分开,组合成包含关系,且右边的选择器从属于左边,即右边的选择器只能在左边的选择器范围内选择

    格式:父选择器名   子代选择器名{}

    子元素选择器

    子代选择器和后代选择器很像,不过只选择匹配元素中的直接后代目标元素为匹配第一个选择器的元素的直接后代,且匹配第二个选择器用于选择指定标签元素的第一代子元素

    语法:第一个选择器>第二个选择器

    总结:>作用于元素的第一代后代,空格作用于元素的所有后代。

    兄弟选择器

    相邻兄弟选择器可以选择紧接着另一元素后的元素,必须得是同一个父元素

    格式:a+b{} 

    伪类选择器  动态伪类选择器:根据条件的改变匹配元素,是相对于文档的固定状态来说的。
            :link选择器 选择未访问链接元素
            :visited选择器 选择已访问的链接元素
            :hover选择器 鼠标悬停在其上的元素
            :active选择器 被用户激活的元素,通常意味着用户即将点击该元素 
    属性选择器

    属性选择器:对带有指定属性的 HTML 元素设置样式
    可以为拥有指定属性的 HTML 元素设置样式,而不仅限于 class 和 id 属性。 

    格式:标签名[属性名='值']{}

     

     

     


       

            

           

    展开全文
  • CSS选择器分类标签(空格分隔): CSS 选择器标签选择器标签选择器:html代码中的标签。例如:html、form、span为p标签设置12px字号,行间距设置1.6em的样式:p{font-size:12px;line-height:1.6em;}类选择器类选择器:...
  • CSS选择器分类汇总,里面包含CSS所有的选择器的使用语法和例子描述。一个思维导图分类汇总了所有CSS选择器,还有表格等文档。
  • 易记的css选择器分类大法基础选择器层次选择器集合选择器条件选择器行为选择器状态选择器结构选择器属性选择器伪元素使用选择器的优势 基础选择器 选择器 别名 说明 版本 tag 标签选择器 指定类型的标签 1 ...
  • 1. CSS选择器分类 在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素。
  • css选择器分类以及其他知识点 一. id:#id选择器指定具有ID的元素的样式。特点:一对一,一个标签只能对应一个id,就如同一个人只能有一个身份证号码。 <div id="myOnlyId"></div>//正确 <div id=...
  • CSS选择器分类整理

    2019-10-01 03:24:11
    读完《CSS权威指南》,对选择器有如下整理: selector 本质上是执行元素样式匹配规则,我们可以利用它来限定某些元素 选择器类型: <!-- 实体,即HTML中存在 --> 1.通配选择器 * 匹配任意 2.元素选择器 p 3....
  • CSS选择器分类和权重

    2019-11-29 16:04:05
    CSS全称“Cascading Style Sheet”,叫做...元素选择器 a{} 伪元素选择器 ::before{} 类选择器 .link{} 属性选择器 [type=radio]{} 伪类选择器 :hover{} ID选择器 #id{} 组合选择器 [type=checkbox] + babel{} 否...
  • 常见CSS选择器分类

    2017-12-24 18:23:00
    CSS选择器 基本/基础选择器 通配符选择器 例:*{color:red;} 引入后会把html里所有内容变成红色 元素选择器 例:h1{color:red;} 并集/组合选择器 例:h1,h2,p{color:red;} 类选择器 必须要以点符号开始 ...
  • css 选择器分类总结

    2017-11-02 16:25:00
    css 选择器分为以下几种: 1,html元素选择器 以html元素标签名字显示 1 2 3 4 5 6 7 body{ bgcolor:green; } p{ color:red; } 2,id 选择器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,706
精华内容 682
关键字:

css选择器分类