您的位置：首页 > Web前端 > CSS

一、CSS选择符选择标签

2016-01-21 21:52 295 查看

选择特定元素的选择符分为三种：

上下文选择符: 基于祖先或兄弟元素选择一个元素。

ID和类选择符: 基于id和class属性值选择元素。

属性选择符: 基于属性的有无和特征选择元素。

<!DOCTYPE html>
<html>
<body>
<section>
<h1>The Document Object Model</h1>
<p>The page's HTML markup structure defines the DOM.</p>
</section>
</body>
</html>
section是h1和p的父元素，也是直接祖先元素。
h1和p是section的子元素，也是直接后代元素。
h1和p是兄弟元素，它们有着共同的祖先父元素section。
section、h1和p是body的后代元素。
section和body是h1和p的祖先元素。

1.上下文选择符

1. 声明格式

标签1 标签2 {声明}

其中，标签2是要选择的元素，而且只有在标签1是其祖先元素的情况下才会被选中。并且标签1和2之间是以空格为分隔符。

例如：p em {color:green;}，选择以p为祖先元素的所有em元素。

article p em{color:green;}，选择的em必须有一个祖先是p，后者进而还要有一个祖先是article。

2. 子选择符>

标签1>标签2

其中，标签2必须是标签1的子元素，反过来说标签1必须是标签2的父元素。

3. 近邻兄弟选择符+

标签1+标签2

其中，标签2必须紧跟在标签1的后面。

4. 一般兄弟选择符~

标签1~标签2

标签2必须跟(不一定紧跟)在标签1的后面。

5. 通用选择符*

* {声明}

* {color:green;}

将所有元素(的边框和文本)都设置为绿色。

p * {color:red;}

将p包含的所有元素的文本设置成红色。

section * a{font-size:1.3em;}

该用法构成非子选择符，即任何section的后代但非直接子代元素的a标签都会被选中。

2.ID和类选择符

类属性就是HTML中的class属性，可为body标签包含的任何HTML元素添加该属性。

1. 类选择符

.类名 (注意，类选择符前面是点”.”，后面紧跟着类名，两者之间没有空格。)

例如：

.test {font-style:italic;}
<p class="test">This is a demo.</p>
//就可把p标签里的段落设置成斜体.

2. 标签带类选择符

标签1.类名

选择class属性值为类名的标签1。

例如：

p.test {color:red;}
<p> This tag has no class.</p>
<p class="test">This tag has class whose value is test.</p>
//只会选择带有第二个p标签，不是第一个.

3. 多类选择符

<p class="one two">This is a special text.</p>
//多个类名，类名之间使用空格隔开，可以有多个类名.
//选择同时存在这两个类的元素：
.one.two {font-size:200%;}
//也可以单独声明,此时应用两个类的样式到所选择的元素上
.one {color:blue;}
.two {font-size:200%;}

ID属性与class属性类似，但是表示ID选择符使用的是”#”而非”.”。

#id名 {css声明}

小结

ID的用途是在页面中唯一地标识一个元素；类的目的则是标识一组具有相似特征的元素,不要滥用类。

3. 属性选择符

1. 属性名选择符

标签名[属性名]

选择任何带有指定属性名的标签。

例如：

img[title]{border:2px solid blue;}
//导致带有title属性的HTMLimg元素显示2像素宽的蓝色边框
<img src="..." title="it's a image" alt="it's a image" />

2. 属性值选择符

标签名[属性名=”属性值”]

选择任何指定属性为特定属性值的标签。

跟1中的类似，只不过这里指定了属性的属性值，因此更加具体。

总结：在上面介绍的三种选择符的基础上还有很多种其他的形式，大家可以再自己的实践中区总结。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航