007 CSS基本选择器】的更多相关文章

复习. 一:类选择器 1.多类名选择器 使用场景:某个标签上需要多个类进行描述. 多个类之间使用空格分开. 冲突的时候,和类名在html中的先后顺序没有关系,和css中的样式的先后顺序有关系. 2.案例 需求:将几个div标为红色,然后将第一个div还要字体变大为40. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>…
<div id="demo"> <div class="inner"> <p><a href="#">链接</a></p> <p><input type="checkbox" name="" id="" /></p> </div></div>class 选择…
代码如下: <html> <head>     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">     <title>仿css样式选择器</title>     <style type="text/css">         #textid{             height: 100p…
后代选择器(descendant selector)又称为包含选择器. 后代选择器可以选择作为某元素后代的元素. 根据上下文选择元素 我们可以定义后代选择器来创建一些规则,使这些规则在某些文档结构中起作用,而在另外一些结构中不起作用. 举例来说,如果您希望只对 h1 元素中的 em 元素应用样式,可以这样写: h1 em {color:red;} 上面这个规则会把作为 h1 元素后代的 em 元素的文本变为 红色.其他 em 文本(如段落或块引用中的 em)则不会被这个规则选中: <h1>Th…
如果我要查找<div>上用了.class的元素,查找方法:div.class:中间是不空格的. 以上这种形式为css后代选择器 参考:http://www.w3school.com.cn/css/css_selector_descendant.asp…
CSS样式选择器分为4个等级,a.b.c.d,可以以这四种等级为依据确定CSS选择器的优先级. 1.如果样式是行内样式(通过Style=””定义),那么a=12.b为ID选择器的总数3.c为Class类选择器的数量.4.d为类型选择器的数量5.属性选择器,伪类选择器和class类选择器优先级一样,伪元素选择器和类型选择器一样6.!important 权重最高,比 inline style 还要高. 例如:   选择器 特殊性 (a,b,c,d) Style= ”” 1,0,0,0 #wrappe…
css是英文Cascading Style Sheets的缩写.它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.我们再将html比喻为树干的时候,css比喻为叶子,花.那要控制这些样式,则要使用css对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器.HTML页面中的元素就是通过CSS选择器进行控制的. css的选择器可分为:1.id选择器:2.class类别选择器:3.元素选择器:4.属性选择器…
派生选择器 通过依据元素在其位置的上下文关系来定义样式,你可以使标记更加简洁. 在 CSS1 中,通过这种方式来应用规则的选择器被称为上下文选择器 (contextual selectors),这是由于它们依赖于上下文关系来应用或者避免某项规则.在 CSS2 中,它们称为派生选择器,但是无论你如何称呼它们,它们的作用都是相同的. 派生选择器允许你根据文档的上下文关系来确定某个标签的样式.通过合理地使用派生选择器,我们可以使 HTML 代码变得更加整洁. 比方说,你希望列表中的 strong 元素…
在 CSS 中,类选择器以一个点号显示: .center {text-align: center} 在上面的例子中,所有拥有 center 类的 HTML 元素均为居中. 在下面的 HTML 代码中,h1 和 p 元素都有 center 类.这意味着两者都将遵守 ".center" 选择器中的规则. <h1 class="center"> This heading will be center-aligned </h1> <p clas…
id 选择器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式. id 选择器以 "#" 来定义. 下面的两个 id 选择器,第一个可以定义元素的颜色为红色,第二个定义元素的颜色为绿色: #red {color:red;} #green {color:green;} 下面的 HTML 代码中,id 属性为 red 的 p 元素显示为红色,而 id 属性为 green 的 p 元素显示为绿色. <p id="red">这个段落是红色.&l…
CSS类选择器和ID选择器皆允许以一种独立于文档元素的方式来指定样式,同时二者皆区分大小写. 区别如下: 第一:在同一个页面内,不允许有相同名字的id对象出现,但是允许相同名字的class 第二:当页面中用到js或者要动态调用对象的时候,要用到id(当然class也会用到,但是id更常用). 第三:id选择器不能结合使用,class可单独使用,也可与其他元素结合使用. 第四:class有多类选择器,id选择器则无,如 <p class="important warning">…
一.为何专门说起IE7 以前,或者说数年前,我们从事桌面端网页开发的时候,基本上都还要兼顾IE6浏览器, 即使有些特性,IE7支持,我们也会忽略之.于是,我们会不自然地把IE6和IE7浏览器归为一路货色,研究的多半是两个浏览器共性的东西,比方说haslayout之类的. 但是,最近1~2年,至少我个人所从事的桌面PC项目都不需要管IE6浏览器(0.3%)了,但是,还是要关心IE7浏览器(3%+)的.虽然,我们有丰富的处理IE6浏览器的经验,但是,当我们不要管IE6浏览器的时候,我们前端技术的选型…
<!-- css样式选择器 HTML选择器 类选择器 ID选择器 关联选择器 组合选择器 伪元素选择器 selector{ /* selector是样式选择器 property:value; /* color:red; property:value; /* font-size:4cm; ..... } selector当定义一条样式规则时,必须指定受这条样式规则作用的网页元素,在一条规则中定义的网页元素就是selector(选择器),也就是选择该样式规则作用于的网页元素. --> <!D…
概述:CSS是指层叠样式表,他是定义如何显示HTML元素,样式表通常存储在样式表中,通常存储在.css文件中,下面对css的选择器进行总结,便大家夯实基础! 1 语法规范: 每个样式规则有两个部分:选择器和样式声明…
关于CSS常用选择器: 1.ID选择器 关于ID选择器具有唯一性,在文档流中,ID是唯一的,在低版本的浏览器中,允许出现不适唯一ID的情况,而在高版本的浏览器中,出现ID不唯一的情况浏览器会出现的报错的. 例如:<h1 id="warning">Meerkat <em>Central</em></h1>   #warning{color:red} 进行CSS样式的设置 2.类选择器 对文档元素的class属性命名不具有唯一性,也就是说不用…
原文:CSS中选择器优先级顺序实战讲解 我们有些程序猿在给一个元素(比如div)应用样式的时候,会有一些疑问,为什么我写在后面的样式不能覆盖前面的样式呢,不是说CSS是层叠样式表吗? 如果你在开发中也遇到同样的问题,即在给某一元素应用样式的时候(比如写在外部样式表中),写在后面的样式不能覆盖前面定义的样式.这个时候,你可能就得考虑是不是没考虑优先级问题了.   当我们在给一个标签,比如div应用样式的时候,我们得考虑优先级问题. 下面列出的就是是选择器的优先级:     行内样式 > ID选择器…
派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h1开始里面包含的所有的em元素变成红色,h1为祖先,其他的em都是后代,即选中后代,不管是儿子还是孙子,只要是都会被选中,为后代选择器.例如 <html> <head> <style type="text/css"> ul em {color:red;…
与html相比,Css支持更丰富的文档外观,Css可以为任何元素的文本和背景设置颜色:允许在任何元素外围设置边框:允许改变文本的大小,装饰(如下划线),间隔,甚至可以确定是否显示文本. 什么是CSS? CSS 指层叠样式表 (Cascading Style Sheets) CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体.大小.对齐方式等).图片的外形(宽高.边框样式.边距等)以及版面的布局等外观显示样式. CSS以HTML为基础,提供了丰富的功能…
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /**光标悬浮时**/ .btn_sure:hover{background:url('./7.png');} /**点击前**/ .btn_sure{w…
CSS样式基础了解1.css基础语法CSS样式的出现是为了将内容和表现分离极大的提高了工作效率内联样式(在 HTML 元素内部)<p style="margin-left: 10px:margin-right:10px"></p><标签名 style="属性:属性值;属性:属性值;" 属性="属性值"></标签名>内部样式表(位于 <head> 标签内部)<style type=&…
CSS(选择器) 作用:用于匹配 HTML 元素 选择器分类: 1.元素选择器  a{} 2.伪元素选择器  ::before{}  (真实存在的元素) 3.类选择器   .link{} 4.属性选择器[type=radio]{} 5.伪类选择器  :hover    (一种状态,不是真实存在的) 6.ID选择器  #id          (唯一存在) 7.组合选择器[type=checkbox]+label{} 8.否定选择器  :not(.link){} 9.通用选择器  *{} 选择器权…
基础选择器 基础选择器是选择器的所有选择器的基本组成元素,也最简单,包含如下5个类别: ID选择器 标签选择器 类选择器 属性选择器:类选择器算是一个特殊的属性选择器,通用的属性选择器举例如下: #css代码 [href="http://www.baidu.com/"] {font-size: 12px;} #html代码 <a href="http://www.baidu.com/>百度</a>" 通配选择器:就是特殊符号*,一般不建议单独…
CSS基础选择器 (1)id选择器:   #       =>  标签拥有 id="user"  属性 <style> #user { width: 200px; } </style> <div id="user"></div> (2)( class ) 类选择器 :  .        => 标签拥有 class="user" 属性 <style> .user { widt…
---恢复内容开始--- 前言:在CSS中选择器的种类有很多很多,但是在实际的工作中,我们经常会用到的分为两大类:基础选择器和复合选择器这两个大类,学习选择器的目的就是为了在复杂的页面中能够快速定位到你需要添加的层叠样式,好了,下面我们开始进入选择器的学习吧. (一)基础选择器 1.标签选择器(元素选择器) 什么是标签选择器:是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式. 作用:标签选择器 可以把某一类标签全部选择出来 比如所有的div标签 和 所有的…
CSS Class 选择器 再<stype>标签内,通过class属性来对标签进行css样式配置 <html> <head> <!-- style 设置头部标签--> <style> /*.c1 添加样式 */ .c1{ background-color: #2459a1; height: 10px; } </style> </head> <body> <!-- class="c1"…
CSS 标签选择器 再<stype>标签内,通过指定输入标签来配置CSS样式 <html> <head> <!-- style 设置头部标签--> <style> /* div 找到所有body下的div标签 */ div{ /* 改变背景颜色 */ background-color: #2459a2; /* 改变字体颜色 */ color: white; } </style> </head> <body> &…
CSS 层级选择器 注:使用空格分隔,塞选到最后一项应用. 标签选择器 下 标签选择器 父标签 --> 指定子标签添加css属性 <html> <head> <!-- style 设置头部标签--> <style> /*只应用于span标签下的div标签*/ span div{ /* 改变背景颜色 */ background-color: #2459a2; /* 改变字体颜色 */ color: white; } </style> <…
CSS 组合选择器 注:使用逗号分隔,同时应用. 多个id选择器拼接到一起 含有:i1 i2 i3的标签同时应用css样式. <html> <head> <!-- style 设置头部标签 --> <style> /*可将多个id选择器名称拼接到一组*/ #i1,#i2,#i3{ /* 改变背景颜色 */ background-color: #2459a2; /* 改变字体颜色 */ color: white; } </style> </h…
基础选择器 选择器:css 选择 html 标签的一个工具,是将 css 与 html 建立起联系,那么 css 就可以控制 html 样式 选择器其实就是给 html 标签起名字 标签选择器 作用:根据指定的标签名称,在当前界面中找到所有该名称的标签,然后设置属性 格式: 标签名称 { 属性: 值; } 注意点: 标签选择器选中的是当前界面中所有的标签,而不能单独选中某一个标签 标签选择器无论标签藏得多深都能选中 id选择器 作用:根据指定的 id 名称找到对应的标签,然后设置属性 格式: #…
css高级选择器&盒模型 1.组合选择器 群组选择器 /* 每个选择器为可以为三种基础选择器的任意一个,用逗号隔开,控制多个*/ div,.div,#div{ color:red } 后代(子代)选择器 /*后代选择器:用空格将父级和子级连接*/ .sup .sub{ color:red } /*子代选择器:用 > 将父级和子级连接,即父级 > 子级*/ .sup > .sub{ color:red } 1.子代选择器是(一级嵌套关系) 2.后代选择器(一级或者多级嵌套关系) 兄…