一、CSS选择符选择标签

您所在的位置:网站首页 css标签名称可以直接作为选择符 一、CSS选择符选择标签

一、CSS选择符选择标签

2024-07-16 06:59| 来源: 网络整理| 查看: 265

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

上下文选择符: 基于祖先或兄弟元素选择一个元素。ID和类选择符: 基于id和class属性值选择元素。属性选择符: 基于属性的有无和特征选择元素。 The Document Object Model The page's HTML markup structure defines the DOM. 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;}

This is a demo.

//就可把p标签里的段落设置成斜体.

2. 标签带类选择符 标签1.类名 选择class属性值为类名的标签1。 例如:

p.test {color:red;}

This tag has no class.

This tag has class whose value is test.

//只会选择带有第二个p标签,不是第一个.

3. 多类选择符

This is a special text.

//多个类名,类名之间使用空格隔开,可以有多个类名. //选择同时存在这两个类的元素: .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像素宽的蓝色边框

2. 属性值选择符 标签名[属性名=”属性值”] 选择任何指定属性为特定属性值的标签。 跟1中的类似,只不过这里指定了属性的属性值,因此更加具体。

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



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3