CSS3选择器、级联、继承

最新推荐文章于 2025-03-28 23:22:40 发布

meili没有鱼

最新推荐文章于 2025-03-28 23:22:40 发布

阅读量457

点赞数

分类专栏： web小白傻瓜笔记文章标签： css html html5 css3

本文链接：https://blog.youkuaiyun.com/qq_42760090/article/details/108837655

版权

web小白同时被 2 个专栏收录

8 篇文章

订阅专栏

傻瓜笔记

4 篇文章

订阅专栏

本文详细介绍了CSS3的选择器类型，包括基本选择器、层次选择器、属性选择器、伪类和伪元素选择器。此外，还讨论了CSS中的级联规则和继承概念，以及如何正确使用它们来控制元素的样式。重点强调了选择器的优先级和应用实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

傻瓜笔记

CSS3选择器，级联，继承、HTML标签

CSS3选择器，级联，继承、HTML标签

HTML标签

CSS3选择器在应用时总是出现错误，检查代码才发现原来时选择器就没搞明白，今天我要单拿出来总结一下。
首先要搞清楚HTML中的标签，简单梳理下HTML常用标签。

行内标签

行内标签，与行内标签共享一行空间（宽高由内容决定，设置宽高无效）

<a href=""></a>
<span></span>
<i></i>
<em></em>
<u></u>
<strong></strong>
<sub></sub>
<sup></sup>
<!-- 行内标签，与行内标签共享一行空间 （宽高由内容决定，设置宽高无效）-->

块级标签

块级标签，每一行独占，搭建网页结构（宽度100%，高度可以设置）
p标签比较特殊，虽然是块级标签，但他是文本级标签，p标签里面只能放文字&图片&表单，p标签里面是不可以嵌套ul和h的，也不可以嵌套p标签。

<div></div>
<p></p>
<h1></h1><!--  h1-h6 -->
<ul></ul>
<dl></dl>
<li></li>
<dd></dd>
<dt></dt>
<!-- 块级标签，每一行独占，搭建网页结构（宽度100%，高度可以设置） -->

行内块级

行内块级标签，既满足内联又满足块级标签要求（可以与行内标签共享一行空间，也可以设置宽高）

<img src="" alt="">
<textarea name="" id="" cols="30" rows="10"></textarea>
<input type=""> 
<button></button>
<!-- 行内块级标签，既满足内联又满足块级标签要求（可以与行内标签共享一行空间，也可以设置宽高） -->

CSS3选择器

在CSS中，选择器是一种模式，用于选择需要添加样式的元素。CSS选择器分为四大类：基本选择器；层次选择器；过滤器；属性选择器。

基本选择器

选择器	解释
`element{}`	标签选择器,"element"指标签名称，eg:p{}
`.class{}`	类选择器，“class”指类名
`#id{}`	id选择器，"id"指id名
`*{}`	通用选择器，选择所有元素

类选择器这里阐述一下，他还有两种应用方式：

结合元素选择器
类选择器可以结合元素选择器来使用，举例：.class p{},意为选择类名为class下的p标签，是一种并且的关系。
多类选择器
多个类选择器链接在一起，仅能选择同时包含这些类名的元素，举例： .first .second{},意为仅能选择同时包含这些类名的元素；
书写方式：多个类之间要用空格隔开

层次选择器

选择器	解释
`element element{}`	后代选择器，用空格隔开，eg:div `p{}`选择的是div下的所有p标签
`element>element{}`	子代选择器，eg:`div>p{}`选择的是以div为父元素的p标签
`element+element{}`	下一个兄弟选择器，eg:`h1+p{}` 选择的是紧跟着h1标签的一个p元素，并且这两个标签有共同的父元素
`element~element{}`	之后所有兄弟选择器，eg:div `h1~p{}`选择的是h1标签之后所有的兄弟p元素

属性选择器

attr为属性名，value为指定值
[attr*=value]与[attr~=vlaue]要区分开，举个梨子；；
input[name*=hello] 意为：属性名为name，而属性名的值只要包含hello中的任意一个字母就能被选中；
input[name~=hello] 意为：属性名为name，而属性名的值之一为hello，则被选中；

选择器	解释
`[attr]`	选择指定attr属性名的元素（常用）
`[attr=value]`	选择属性名的值为指定值的元素（常用）
`[attr~=vlaue]`	选择属性名的值之一为指定值的元素
`[attr^=value]`	选择属性名的值以指定值开头的元素
`[attr$=value]`	选择属性名的值以指定值结尾的元素
`[attr*=value]`	选择属性名的值中包含有指定值的元素

伪类选择器

选择器	解释
a:link	未访问的链接
a:visited	已访问的链接
a:hover	鼠标移动到链接上
a:active	鼠标按键不松
:focus	拥有键盘输入焦点的元素
:first-child	元素的第一个子元素
[element]:nth-child(n)	第n个子元素是[elemrnt]的元素
:last-child	元素的最后一个子元素

注意：a:hover必须在 a:link、a:visited之后，a:active必须在a:hover之后，否则无效
强调：[element]:nth-child(n):

<div class="footer-list-family">
                    <input type="text" value="搜素">
                    <ul>
                        <li>关于我们</li>
                        <li>HELLO！</li>
                    </ul>
                    <ul>
                    	<li>廉正举报</li>
                        <li>联系我们</li>
                    </ul>

要求：应用css伪类选择器，选中第二个ul下的li，设置font为color。

正确代码：

.footer-list-family ul:nth-child(3) li{
   color: red;
}

我的错误认知：要选中第二个 <li>廉正举报</li> <li>联系我们</li>,代码应该是

.footer-list-family ul:nth-child(2) li{
   color: red;

}，但是这是错误的，他选中的是<li>关于我们</li> <li>HELLO！</li>

正确思路：[element]:nth-child(n)表示的是第n个子元素是[element]的元素，而我想要选中的第二个ul下的li,它是第三个子元素，所以正确代码为*.footer-list-family ul:nth-child(3) li{}*

伪元素选择器

选择器	解释
::before	[element]内容之前插入内容
::after	[element]内容之后插入内容
::first-line	选择[element]首行
::first-letter	选择[element]内容首字母
::selection	选择被用户选取的元素部分
::placeholder	选择一个表单元素的占位文本
::backdrop	在任何处于全屏模式的元素下的即刻渲染的盒子