html.class选择器,CSS Id 和 Class选择器

除了教程中的id选择器和class选择器，另还有元素选择器、属性选择器、包含选择器、子选择器和CSS3中新增的兄弟选择器，以下带上ID选择器和类选择器一起举例。

1.ID 选择器(ID selector，IS)：使用 # 标识selector，语法格式：#S{...}(S为选择器名)。例：id为name的标签会匹配下面的样式

#name{

color:red;

}

red text

2.类选择器(class selector，CS)：使用 . 标识selector，语法格式：.S{...}(S为选择器名)。例：class属性值为value的标签会匹配下面的样式

.value{

text-align:center;

}

center text

3.元素选择器(element selector，ES)：又叫标签选择器，使用标签名作为selector名，语法格式：S{...}(S为选择器名)。例：所有的p标签都会匹配以下的样式

p{

font-style:italic;

}

italic text

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标签分别匹配不同的样式

p{

color:red;

}

div p{

color:yellow;

}

red text

yellow text

6.子选择器(sub-selector，SS)：类似于PS，指定目标选择器必须处在某个选择器对应的元素内部，两者区别在于PS允许"子标签"甚至"孙子标签"及嵌套更深的标签匹配相应的样式，而SS强制指定目标选择器作为 包含选择器对应的标签 内部的标签，语法格式：A>B{...}(A、B为HTML元素/标签)。例：以下div内的p标签匹配样式，div内的table内的p不匹配

div>p{

color:red;

}

red text

no red text;

7.兄弟选择器(brother selector，BS)：BS是CSS3.0新增的一个选择器，语法格式：A~B{...}(A、B为HTML元素/标签，表示A标签匹配selector的A，B标签匹配selector的B时，B标签匹配样式)

div~p{

color:red;

}

no red text

no red text

red text

Lambert

Lambert

167***3216@qq.com4年前 (2017-12-09)