CSS Id 和 Class
id 和 class 选择器
如果你要在HTML元素中设置CSS样式,你需要在元素中设置"id" 和 "class"选择器。
id 选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。
以下的样式规则应用于元素属性 id="para1":
ID属性不要以数字开头,数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。
class 选择器
class 选择器用于描述一组元素的样式,class 选择器有别于id选择器,class可以在多个元素中使用。
class 选择器在HTML中以class属性表示, 在 CSS 中,类选择器以一个点"."号显示:
在以下的例子中,所有拥有 center 类的 HTML 元素均为居中。
你也可以指定特定的HTML元素使用class。
在以下实例中, 所有的 p 元素使用 class="center" 让该元素的文本居中:
类名的第一个字符不能使用数字!它无法在 Mozilla 或 Firefox 中起作用。
LPW5806
289***1083@qq.com
css 选择器
如果你要在 html 标签中设置 CSS 样式,那么你有四种方法,即 css 选择器有四种。
除了提到的 id 和 class 选择器外,第三种选择器为标签选择器,即以 html 标签作为 css 修饰所用的选择器。
实例
第四种选择器即直接在标签内部写css代码。
实例
这四种 css 选择器有修饰上的优先级,即:
第四种 > id > class > 第三种
LPW5806
289***1083@qq.com
Lambert
167***3216@qq.com
除了教程中的id选择器和class选择器,另还有元素选择器、属性选择器、包含选择器、子选择器和CSS3中新增的兄弟选择器,以下带上ID选择器和类选择器一起举例。
1.ID 选择器(ID selector,IS):使用 # 标识selector,语法格式:#S{...}(S为选择器名)。例:id为name的标签会匹配下面的样式
2.类选择器(class selector,CS):使用 . 标识selector,语法格式:.S{...}(S为选择器名)。例:class属性值为value的标签会匹配下面的样式
3.元素选择器(element selector,ES):又叫标签选择器,使用标签名作为selector名,语法格式:S{...}(S为选择器名)。例:所有的p标签都会匹配以下的样式
4.属性选择器(attribute selector,AS):ES其实是AS的一个特例,在AS基础上还能对selector描述得更具体,语法格式为 E[attr[~=][|=][^=][$=][*=]VALUE]{...},是并没有得到所有浏览器支持的选择器,因此不举例
5.包含选择器(package selector,PS):指定目标选择器必须处在某个选择器对应的元素内部,语法格式:A B{...}(A、B为HTML元素/标签,表示对处于A中的B标签有效)。例:以下div内的p标签和div外的p标签分别匹配不同的样式
6.子选择器(sub-selector,SS):类似于PS,指定目标选择器必须处在某个选择器对应的元素内部,两者区别在于PS允许"子标签"甚至"孙子标签"及嵌套更深的标签匹配相应的样式,而SS强制指定目标选择器作为 包含选择器对应的标签 内部的标签,语法格式:A>B{...}(A、B为HTML元素/标签)。例:以下div内的p标签匹配样式,div内的table内的p不匹配
7.兄弟选择器(brother selector,BS):BS是CSS3.0新增的一个选择器,语法格式:A~B{...}(A、B为HTML元素/标签,表示A标签匹配selector的A,B标签匹配selector的B时,B标签匹配样式)
Lambert
167***3216@qq.com
Elvirangel
zha***r601@163.com
鉴于楼上的一篇笔记,关于标签选择器的几点补充:
1. 补充包含选择器:
包含选择器除了有 A B{...} 的形式外(A和B都是标签),还可以有这种形式:.A B{...} 的形式(A是类名,B是标签)。
作用与上面介绍的相同,会使 class 名为 A 的标签里面所有名为 B 的子代标签的内容按照设定的内容显示。
2. 补充子选择器
子选择器除了有 A >B{...} 的形式外(A和B都是标签),还可以有这种形式:.A >B{...} 的形式(A是类名,B是标签)。
作用与上面介绍的相同,会使 class 为 A 的标签里面所有名为 B 的直接子代标签的内容按照设定的内容显示。而非直接子代的 B 标签的内容是不会改变的。
3.通用选择器语法形式为:*{属性:属性值}。它的作用是匹配 html 中的所有元素标签。
Elvirangel
zha***r601@163.com
seven丶7
528***307@qq.com
分享另外一种选择器:相邻选择器。
语法形式为:
实例:
尝试一下 »
seven丶7
528***307@qq.com