菜鸟教程 -- 学的不仅是技术,更是梦想!

CSS 教程
(追記) (追記ここまで)

CSS id 和 class

id 和 class 选择器

如果你要在HTML元素中设置CSS样式,你需要在元素中设置"id" 和 "class"选择器。

id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。

以下的样式规则应用于元素属性 id="para1":

实例

#para1{text-align:center; color:red; }

尝试一下 »

Remark ID属性不要以数字开头,数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

class 选择器

class 选择器用于描述一组元素的样式,class 选择器有别于id选择器,class可以在多个元素中使用。

class 选择器在 HTML 中以 class 属性表示, 在 CSS 中,类选择器以一个点 . 号显示:

在以下的例子中,所有拥有 center 类的 HTML 元素均为居中。

实例

.center{text-align:center;}

尝试一下 »

你也可以指定特定的 HTML 元素使用 class。

在以下实例中, 所有的 p 元素使用 class="center" 让该元素的文本居中:

实例

p.center{text-align:center;}

尝试一下 »

多个 class 选择器可以使用空格分开:

实例

.center{text-align:center; }.color{color:#ff0000; }

尝试一下 »

Remark 类名的第一个字符不能使用数字!它无法在 Mozilla 或 Firefox 中起作用。

AI 思考中...

6 篇笔记 写笔记

  1. #0

    LPW5806

    289***[email protected]

    464

    css 选择器

    如果你要在 html 标签中设置 CSS 样式,那么你有四种方法,即 css 选择器有四种。

    除了提到的 id 和 class 选择器外,第三种选择器为标签选择器,即以 html 标签作为 css 修饰所用的选择器。

    实例

    <style>
h3{
 color:red;
}
</style>
<h3>菜鸟教程</h3>

    第四种选择器即直接在标签内部写css代码。

    实例

    <h3 style="color:red;">菜鸟教程</h3>

    这四种 css 选择器有修饰上的优先级,即:

    第四种 > id > class > 第三种

    LPW5806

    289***[email protected]

    9年前 (2017年11月10日)
  2. #0

    Lambert

    167***[email protected]

    489

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

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

    <style>
#name{
 color:red;
}
</style>
<!--下面文字是红色的-->
<p id="name">red text</p>

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

    <style>
.value{
 text-align:center;
}
</style>
<!--下面的文字是居中对齐的-->
<p class="value">center text</p>

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

    <style>
p{
 font-style:italic;
}
</style>
<!--下面的文字是斜体的-->
<p style="font-style:italic">italic text</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标签分别匹配不同的样式

    <style>
p{
 color:red;
}
div p{
 color:yellow;
}
</style>
<p>red text</p><!--文字是红色的-->
<div>
 <p>yellow text</p><!--文字是黄色的-->
</div>

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

    <style>
div>p{
 color:red;
}
</style>
<div>
 <p>red text</p><!--文字是红色的-->
 <table>
 <tr>
 <td>
 <p>no red text;</p><!--文字是非红色的-->
 </td>
 </tr>
 </table>
</div>

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

    <style>
div~p{
 color:red;
}
</style>
<div>
 <p>no red text</p><!--文字是非红色的-->
 <div>no red text</div>
 <p>red text</p><!--文字是红色的-->
</div>

    Lambert

    167***[email protected]

    9年前 (2017年12月09日)
  3. #0

    Elvirangel

    zha***[email protected]

    175

    鉴于楼上的一篇笔记,关于标签选择器的几点补充:

    1. 补充包含选择器:

    包含选择器除了有 A B{...} 的形式外(A和B都是标签),还可以有这种形式:.A B{...} 的形式(A是类名,B是标签)。

    作用与上面介绍的相同,会使 class 名为 A 的标签里面所有名为 B 的子代标签的内容按照设定的内容显示。

    <style>
.first span{
 color:red;
}
</style>
<body>
<p class="first"><span>内容为红色</span>
<ol>
 <li><span>内容也是红色</span></li>
 <li><span>内容也是红色</span></li>
</ol></p>
</body>

    2. 补充子选择器

    子选择器除了有 A >B{...} 的形式外(A和B都是标签),还可以有这种形式:.A>B{...} 的形式(A是类名,B是标签)。

    作用与上面介绍的相同,会使 class 为 A 的标签里面所有名为 B 的直接子代标签的内容按照设定的内容显示。而非直接子代的 B 标签的内容是不会改变的。

    <style>
.first>span{
 color:red;
}
</style>
<body>
<p class="first"><span>内容为红色</span>
<ol>
 <li><span>内容不是红色</span></li>
 <li><span>内容不是红色</span></li>
</ol></p>
</body>
    3.通用选择器

    语法形式为:*{属性:属性值}。它的作用是匹配 html 中的所有元素标签。

    <!--使用html中任意标签元素字体颜色全部设置为红色:-->
<style>
*{color:red;}
</style>
<body>
<h1>标题为红色</h1>
<p>段落也为红色</p>
</body>

    Elvirangel

    zha***[email protected]

    8年前 (2018年03月11日)
  4. #0

    seven丶7

    528***[email protected]

    92

    分享另外一种选择器:相邻选择器。

    语法形式为:

    A+B{
 声明1; 
 声明;
 ...
}

    实例:

    <!--相邻选择器选择每个div紧邻后的一个元素p-->
<style>
 div+p{
 color: red;
 }
</style>
<div>
 <p>not red text</p>
 <p>not red text</p>
</div>
<p>red text</p>
<p>not red text</p>

    尝试一下 »

    seven丶7

    528***[email protected]

    8年前 (2018年07月31日)
  5. #0

    tan

    241***[email protected]

    122

    补充一下标点符号的含义,主要是经常出现的逗号我看大家都没有写

    css 中逗号,空格,冒号,点号的含义

    一:#a,b{............}

    二:#a b{............}

    三:#a:b{............}

    四:#a.b{............}

    这是四个分别代表着什么含义呢?

    一、一个id叫a和一个标签是b的样式

    二、一个id叫a下面的一个标签是b的样式

    三、一个id叫a的伪类b,例如:a:hover

    四、一个id叫a的下面的class叫b的样式

    tan

    241***[email protected]

    5年前 (2021年10月12日)
  6. #0

    youyv

    623***[email protected]

    71

    楼上说的都很详细,这里汇总加抛砖引玉

    1. 标签选择器 说明:选中指定标签,也叫元素选择器
    2. id选择器 # 说明:选中id属性
    3. class选择器 . 说明:选中class属性
    4. 属性选择器 [] 说明:这样写"a[id]",选中指定规则的属性,所在标签。
    5. 包含选择器 (空格) 说明:选中所有儿子,孙子等....
    6. 子选择器 > 说明:选中所有儿子,不选孙子等...
    7. 兄弟选择器 ~ 说明:选中后面一个或多个兄弟
    8. 相邻选择器 + 说明:选中后面一个兄弟
    9. 伪类选择器 : 说明:主要根据用户动作,标签位置,标签状态来选中
    10. 伪元素选择器 :: 说明:主要选中一段文本的一行,首字,或前后添加样式

    各种选择器都涉及优先级和兼容性,这里就不总结了。

    youyv

    623***[email protected]

    4年前 (2022年11月16日)

点我分享笔记

  • 昵称 (必填)
  • 邮箱 (必填)
  • 引用地址

AltStyle によって変換されたページ (->オリジナル) /