CSS选择器
CSS选择器
1.常用选择器
常用的选择器有类型选择器和后代选择器。
1.1类型选择器
类型选择器用来选择特定类型的元素。可以根据三种类型来选择。
1)ID选择器,根据元素ID来选择元素。
前面以”#”号来标志,在样式里面可以这样定义:
#demoDiv{
color:#FF0000;
}
这里代表id为demoDiv的元素的设置它的字体颜色为红色。
我们在页面上定义一个元素把它的ID定义为demoDiv,如:
这个区域字体颜色为红色
用浏览器浏览,我们可以看到因为区域内的颜色变成了红色
再定义一个区域
这个区域没有定义颜色
用浏览器浏览,与预期的一样,区域没有应用样式,所以区域中的字体颜色还是默认的颜色黑色。
2)类选择器根据类名来选择
前面以”.”来标志,如:
.demoDiv{
color:#FF0000;
}
在HTML中,元素可以定义一个class的属性。
如:
这个区域字体颜色为红色
同时,我们可以再定义一个元素:
这个段落字体颜色为红色
最后,用浏览器浏览,我们可以发现所有class为demo的元素都应用了这个样式。包括了页面中的div元素和p元素。
上例我们给两个元素都定义了class,但如果有很多个元素都会应用这个元素,那个一个个的定义元素,就会造成页面重复的代码太多,这种现象称为“多类症”。
我们可以改成这样来定义。
这个区域字体颜色为红色
同时,我们可以再定义一个元素:
这个段落字体颜色为红色
这样,我们就只是定义了一个类,同时把样式应用到了所有的元素当中。
3)标签选择器根据标签选择
用标签选择指根据标签名来应用样式,定义时,直接用标签名。如:
div{
color:#FF0000;
}
我们再定义一个元素。
这个区域字体颜色为红色
这个区域字体颜色也为红色
用浏览器浏览,我们发现两个DIV元素都被应用了样式,这里不用定义id,也无需要定义class属性。
示例参见:根据标签来选择元素.html
这种选择方式非常的有用,比如你觉得锚链接的下划线不太美观,想把所有的锚链接的样式都设成无下划线形式,颜色为鲜艳的蓝色。可以这样定义。
a{
text-decoration:none;
color:#00CCCC;
}
1.2 后代选择器
后代选择器也称为包含选择器,用来选择特定元素或元素组的后代,后代选择器用两个常用选择器,中间加一个空格表示。其中前面的常用选择器选择父元素,后面的常用选择器选择子元素,样式最终会应用于子元素中。
如:
.father .child{
color:#0000CC;
}
黑色
也是蓝色
这里我们定义了所有class属性为father的元素下面的class属性为child的颜色为蓝色。后代选择器是一种很有用的选择器,使用后代选择器可以更加精确的定位元素。
1.3. 伪类
有时候还会需要用文档以外的其他条件来应用元素的样式,比如鼠标悬停等。这时候我们就需要用到伪类了。以下是链接应用的伪类定义。
a:link{
color:#999999;
}
a:visited{
color:#FFFF00;
}
a:hover{
color:#006600;
}
/* IE不支持,用Firefox浏览可以看到效果*/
input:focus{
background:# E0F1F5;
}
Link表示链接在没有被点击时的样式。Visited表示链接已经被访问时的样式。Hover表示当鼠标悬停在链接上面时的样式。
伪类不仅可以应用在链接标签中,也可以应用在一些表单元素中,但表单元素的应用IE不支持,所以一般伪类都只会被应用在链接的样式上。
1.4. 通用选择器
通用选择器用*来表示。例如:
*{
font-size: 12px;
}
表示所有的元素的字体大小都是12px;同时通用选择器还可以和后代选择器组合。
例如:
p *{
……
}
表示所有p元素后代的所有元素都应用这个样式。但是与后代选择器的搭配容易出现浏览器不能解析的情况,比如像这样子:
所有的文本都被定义成红色
所有这个段落里面的子标签都会被定义成蓝色
所有这个段落里面的子标签都会被定义成蓝色
所有这个段落里面的子标签都会被定义成蓝色
所有这个段落里面的子标签都会被定义成蓝色
这个例子里面p标签里面嵌套了一个p标签,这个时候样式可能会出现与预期结果不相同的结果。
1.5. 群组选择器
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔。如:
p, td, li {
line-height:20px;
color:#c00;
}
#main p, #sider span {
color:#000;
line-height:26px;
}
.www_52css_com,#main p span {
color:#f60;
}
.text1 h1,#sider h3,.art_title h2 {
font-weight:100;
}
使用群组选择器,将会大大的简化CSS代码,将具有多个相同属性的元素,合并群组
进行选择,定义同样的CSS属性,这大大的提高了编码效率,同时也减少了CSS文件的体积。
2. 子选择器与相邻同胞选择器
子选择器的格式为:
father > child{
…….
}
子选择器与后代选择器非常相像,不同的地方是子选择器只应用于父元素的直接后代,对于直接后代的后代则不应用这个样式。IE不支持子选择器,Firefox才支持这种选择。
例如对于一个导航菜单:
定义样式为:
#nav > li{
background:url(images/nav_bg.gif) no-repeat;
color:#FF0000;
}
使用firefox浏览,你可以看到菜单1和菜单2被应用了样式,而菜单2.1和菜单2.2则没有被应用样式。
相邻同胞选择器的格式为:
brother1 + brother2{
…….
}
它表示如果brother2类型前面的元素是brother1,那么brother2类型元素就会应用这个样式。这种选择器的使用比较少。而且IE不支持这种选择器。
3. 属性选择器
顾名思义,属性选择器是根据这个属性是否存在和属性的值来选择元素,这是一种非常有用的选择器,但是这种选择器IE6现在还不支持,所以使用的的时候要注意。
3.1 判断属性是否存在。
例如:
abbr[title]{
color:#FF0000;
}
表示abbr标签是否有title属性,如果则应用这个样式。
3.2 根据属性值来判断
p[title='app']{
color:#FF0000;
}
这里所有p标签中,title属性为app的都会应用这个样式。
4. 浏览器对CSS选择器的支持情况4.1. 说明
?√表示目前支持.
?Δ表示该选择器有部分支持.
?Χ表示不支持.
?* 表示通用选择器
? E 表示标签选择器
?.class表示类型选择器
?#id表示ID选择器
4.2. 基本选择器
Selector FF3.0 FF 2.0 FF 1.5 IE8 IE7 IE6
* √√√√√√
E √√√√√√
.class √√√√√Δ#id √√√√√√4.3 多元素的组合选择器
这里E和F表示任意的基本选择器。
Selector FF3.0 FF2.0 FF 1.5 IE8 IE7 IE6 E F √√√ 1. √√
E >
F √√√√√Χ
E +
F √√√√√Χ
4.4 CSS 2.1 属性选择器
Selector FF3.0 FF2.0 FF 1.5 IE8 IE7 IE6 E[attr] √√√ΔΔΧE[attr=val] √ΔΔ√√ΧE[attr~=val] √ΔΔΔΔΧE[attr|=val] √ΔΔΔΔΧ4.5 CSS 2.1中的伪类
Selector FF 3.0 FF2.0 FF1.5 IE8 IE7 IE6 :first-child √ΔΔΔΔΧ:link √√√√√√:visited √√√√√√
:lang() √√√ΔΧΧ4.6 CSS 2.1中的伪元素
Selector FF3.0 FF2.0 FF 1.5 IE8 IE7 IE6 :before √√√√ΧΧ::before √√√ΧΧΧ:after √√√√ΧΧ::after √√√ΧΧΧ:first-letter √√√Χ√√::first-letter √√√ΧΧ√:first-line √√√Χ√√::first-line √√√ΧΧ√4.7 CSS 3的同级元素通用选择器
Selector FF3.0 FF 2.0 FF 1.5 IE8 IE7 IE6
E ~
F √√√√√Χ
4.8 CSS 3 属性选择器
Selector FF3.0 FF2.0 FF 1.5 IE8 IE7 IE6 E[attr^=val] √ΔΔΧ 2 ΧΧE[attr$=val] √ΔΔΧ 2 ΧΧE[attr*=val] √ΔΔΧ 2 ΧΧ
4.9 CSS 3中与用户界面有关的伪类
Selector FF3.0 FF2.0 FF 1.5 IE8 IE7 IE6 :enabled √√√ΧΧΧ:disabled √√√ΧΧΧ:checked √√√ΧΧΧ4.10 CSS 3中的:target 伪类
Selector FF3.0 FF 2.0 FF 1.5 IE8 IE7 IE6 :target √√√ΧΧΧ4.11其他
Pattern IE6 IE7 IE8 FF
E:active E:hover E:focus ΔΔ√√ΔΔ√√ΧΧ√√
E:before E:after ΧΧΔ 3 √ΧΧΔ 3 √
CSS选择器笔记
CSS选择器笔记 阮一峰整理 参考网址:456 Berea Street 一、基本选择器 实例: * { margin:0; padding:0; } p { font-size:2em; } .info { background:#ff0; } https://www.360docs.net/doc/116689066.html, { background:#ff0; } https://www.360docs.net/doc/116689066.html,.error { color:#900; font-weight:bold; } #info { background:#ff0; } p#info { background:#ff0; } 二、多元素的组合选择器
实例: div p { color:#f00; } #nav li { display:inline; } #nav a { font-weight:bold; } div > strong { color:#f00; } p + p { color:#f00; } 三、CSS 2.1 属性选择器 实例: p[title] { color:#f00; } div[class=error] { color:#f00; }
td[headers~=col1] { color:#f00; } p[lang|=en] { color:#f00; } blockquote[class=quote][cite] { color:#f00; } 四、CSS 2.1中的伪类 实例: p:first-child { font-style:italic; } input[type=text]:focus { color:#000; background:#ffe; } input[type=text]:focus:hover { background:#fff; } q:lang(sv) { quotes: "\201D" "\201D" "\2019" "\2019"; } 五、 CSS 2.1中的伪元素
CSS选择器
CSS选择器 1.常用选择器 常用的选择器有类型选择器和后代选择器。 1.1类型选择器 类型选择器用来选择特定类型的元素。可以根据三种类型来选择。 1)ID选择器,根据元素ID来选择元素。 前面以”#”号来标志,在样式里面可以这样定义: #demoDiv{ color:#FF0000; } 这里代表id为demoDiv的元素的设置它的字体颜色为红色。 我们在页面上定义一个元素把它的ID定义为demoDiv,如:
这个段落字体颜色为红色
最后,用浏览器浏览,我们可以发现所有class为demo的元素都应用了这个样式。包括了页面中的div元素和p元素。 上例我们给两个元素都定义了class,但如果有很多个元素都会应用这个元素,那个一个个的定义元素,就会造成页面重复的代码太多,这种现象称为“多类症”。 我们可以改成这样来定义。
CSS选择器的声明与嵌套
CSS选择器的声明与嵌套 使用CSS选择器控制HTML标记的时候,每个选择器的属性可以一次声明多个,选择器本身也可以同时声明多个。 并且,任何形式的选择器,都是合法的,标记选择器,class选择器和ID选择器都可以集体声明。 集体声明 在声明CSS选择器时,如果某些选择器的风格是完全相同的,或者部分相同,这时便可以使用集体声明的方式,将风格相同的选择器同时声明。 [html]view plain copy print? 1. 2. 3.
17. 18. 19.
20.集体声明h1
21.集体声明h3
23.集体声明h4
24.集体声明h5
25.集体声明p1 26.集体声明p2 27.
集体声明p3 28. 29. 30. 全局声明 对于实际网站中,如果希望页面中所有的标记都使用同一种CSS样式,但是,又不希望逐个来集体声明,这是可以使用全局声明符号*来声明。 [html]view plain copy print? 1. 2. 3.
实验14 CSS选择器
实验14C S S选择器1.实验目的 (1)掌握在网页上应用CSS的方法。 (2)掌握CSS的基本语法规则。 (3)掌握CSS的常用选择器。 (4)掌握使用Dreamweaver定义CSS的方法。 2.实验内容 定义“网络与信息安全实验教学”网站首页的样式,如图14-1所示。 图14-1 首页效果图
2 3.实验步骤 一.创建“网络与信息安全实验教学”站点 ( 1)将“实验14”文件夹中的syjx 文件夹复制到D 盘; (2)启动Dreamweaver ,使用“站点|新建站点”命令创建“网络与信息安全实验教学”站点,并指定syjx 文件夹为“网络与信息安全实验教学”站点的本地根文件夹。 二.定义“首页”的CSS 样式。 ( 1)在Dreamweaver 中打开index.html 文件。 (2)选择“文件 | 新建”命令,新建CSS 文件,保存在syjx 文件夹中,命名为css.css 。 (3)将文档窗口切换到index.html ,单击CSS 面板上的“附加样式表”按钮,将css.css 作为外部样式表链接到index.html ,如图14-2所示。 图14-2 CSS 面板 ( 4)在css.css 文件中定义首页的样式。 b ody{ background:#f6fafd} /*主体背景颜色*/ a { font-family:"宋体"; /*字体*/(文本样式) font-size:15px; /*文字大小*/ color:#FFFFFF; /*白色*/ text-decoration:none; /*无下划线*/ } .menu{font-weight:bold;} /*加粗*/(导航菜单样式) .new_title{ (标题样式) font-family: "宋体"; font-size: 14px; font-style: normal; color: #FFFFFF; font-weight: bold; 样
CSS选择器的权重与优先规则
CSS选择器的权重与优先规则 2011-06-26 我们在使用CSS对网页元素定义样式时经常会遇到这种情况:要对一般元素应用一般样式,然后在更特殊的元素上覆盖它们。那么我们怎么样来保证我们所新定义的元素样式能覆盖目标元素上原有的样式呢? 在CSS中,会根据选择器的特殊性来决定所定义的样式规则的次序,具有更特殊选择器的规则优先于具有一般选择器的规则,如果两个规则的特殊性相同,那么后定义的规则优先。 那么,又怎么来计算选择器的特殊性呢?下面这张图介绍了特殊性的计算方法: 我们把特殊性分为4个等级,每个等级代表一类选择器,每个等级的值为其所代表的选择器的个数乘以这一等级的权值,最后把所有等级的值相加得出选择器的特殊值。 4个等级的定义如下: 1.第一等:代表内联样式,如: style=””,权值为1000。 2.第二等:代表ID选择器,如:#content,权值为100。 3.第三等:代表类,伪类和属性选择器,如.content,权值为10。
4.第四等:代表类型选择器和伪元素选择器,如div p,权值为1。 例如上图为例,其中#NAV为二等选择器,.ACTIVE为三等选择器,UL、LI和A为四等选择器。则整个选择器表达式的特殊性的值为1*100+1*10+3*1=113 下面是一些计算示例:
注意:通用选择器(*),子选择器(>)和相邻同胞选择器(+)并不在这四个等级中,所以他们的权值都为0。 我们再来看一个具体的例子:假如有以下组样式规则,你能判断出HTML代码中的两个标题是什么颜色吗? 01 #content div#main-content h2{ 02 color:red; 03 } 04 05 #content #main-content>h2{ 06 color:blue 07 } 08 body #content div[id="main-content"] h2{ 09 color:green; 10 } 11 12 #main-content div.paragraph h2{ 13 color:orange; 14 } 15 #main-content [class="paragraph"] h2{ 16 color:yellow; 17 } 18 div#main-content div.paragraph h2.first{ 19 color:pink; 20 } 以下是HTML代码:
HTML5开发培训CSS选择器及文字段落属性和背景属性和列表属性(上)(DOC)
HTML5开发培训CSS选择器及文字段落属性和背景属性和列表属性(上) 我们已经讲了一部分选择器了,今天还要继续讲一些选择器,以便我们能更快的找到页面中的元素并修饰他的样式。另外我们看到页面的标签还需要修饰其它的样式,比如背景图像,文字间距等,所以我们还讲些样式。通过以下几点介绍: ?关系选择器 ?动态伪类选择器 ?结构性伪类选择器 ?文字属性 ?段落属性 ?背景属性 ?列表属性 好了,我们先来看一下关系选择器 一、关系选择器 1.E F:后代选择器,找到页面中相应的的子元素及孙子及重孙子元素,因为这些元素都是后代元素,我们把标签的第一层嵌套的元素叫子元素,再一层嵌套及以后嵌套的元素及子元素都叫后代元素。(当然也是相对的)。后代选择器可以是我们第三章讲过的所有的基本选择器中的一种,我们先理一下元素之间的层次关系。