CSS选择符详解-优快云博客

本文链接：https://blog.youkuaiyun.com/u014156690/article/details/50556022

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

上下文选择符: 基于祖先或兄弟元素选择一个元素。
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中的类似，只不过这里指定了属性的属性值，因此更加具体。

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

一、CSS选择符选择标签

1.上下文选择符

2.ID和类选择符

3. 属性选择符