CSS 复习归纳

最新推荐文章于 2025-05-18 14:51:50 发布

亚里沙ARE

最新推荐文章于 2025-05-18 14:51:50 发布

阅读量222

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.youkuaiyun.com/qq_39793373/article/details/103232540

版权

CSS 专栏收录该内容

1 篇文章

订阅专栏

1，css指层叠样式表 (Cascading Style Sheets)

三种引入方式：内链式 <div style="color:red">、

嵌入式在<head><style>内容</style></head>、

外部式 <link href="style.css" rel="stylesheet" type="text/css" />

2,元素选择器

直接用html元素，比如h1{color:blue;}

选择器分组：h2,p{color:gray;} h2元素与段落都有灰色

通配符选择器：*{color：red} 使每个元素都变为红色，

类选择器：*.important {color:red;} 也可以使用.important {color:red;}，同理。也可以为p.important{color:red; } 指定元素。

多类选择器： <p class="important warning"> html内，class带两个值，用空格分隔。 .impotant.warning{ css样式 }，如果一个多类选择器包含类名列表中没有的一个类名，匹配就会失效。

ID选择器：*#intro {font-weight:bold;} 与类选择器大同小异，不过是id内的值。id在每个文档中只能使用一次，id区分大小写。

属性选择器：

1，简单属性选择器：

*[title] {color:red;}把包含标题（title）的所有元素变为红色

a[href] {color:red;}对有 href 属性的锚（a 元素）应用样式

a[href][title] {color:red;} 根据多个属性进行选择

img[alt] {border: 5px solid red;} 对所有带有 alt 属性的图像应用样式

2，具体属性选择器

a[href="链接"][title=“标题内容"] {color: red;} 把多个属性-值选择器链接在一起来选择一个文档。

注意：属性与属性值必须完全匹配！包括空格

3，部分属性选择器

p[class~="important"] {color: red;} 选择 class 属性中包含 important 的元素

4，子串匹配属性选择器

[abc^="def"]	选择 abc 属性值以 "def" 开头的所有元素
[abc$="def"]	选择 abc 属性值以 "def" 结尾的所有元素
[abc*="def"]	选择 abc 属性值中包含子串 "def" 的所有元素

a[href*="链接"] {color: red;}对指向该链接的所有链接应用样式，不必为所有这些链接指定 class。

5，特定属性选择类型

*[lang|="en"] {color: red;} 会选择 lang 属性等于 en 或以 en- 开头的所有元素。会作用到：<p lang="en">Hello!</p> <p lang="en-us">Greetings!</p> <p lang="en-au">G'day!</p> 不会作用到<p lang="fr">Bonjour!</p> <p lang="cy-en">Jrooana!</p>

CSS 选择器参考手册

选择器	描述
[attribute]	用于选取带有指定属性的元素。
[attribute=value]	用于选取带有指定属性和值的元素。
[attribute~=value]	用于选取属性值中包含指定词汇的元素。
[attribute\|=value]	用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value]	匹配属性值以指定值开头的每个元素。
[attribute$=value]	匹配属性值以指定值结尾的每个元素。
[attribute=value*]	匹配属性值中包含指定值的每个元素。

5,后代选择器（包含选择器）

h1 em {color:red;} 会把作为 h1 元素后代的 em 元素的文本变为红色。

<h1>This is a <em>important</em> heading</h1>

 div.sidebar {background:blue;}包含边栏的 div 指定值为 sidebar 的          class 属性设置样式

注意：两个元素之间的层次间隔可以是无限的。比如ul em。会选择以下标记中的所有 em 元素

6，子元素选择器

  h1 > strong {color:red;} ：<h1>This is <strong>very</strong> important.</h1> strong收到影响。   
  注：子选择器可以加入空格，无影响

7，相邻兄弟选择器

  h1 + p {margin-top:50px;} h1挨着的p元素收到影响。一个结合符只能选择两个相邻兄弟中的第二个元素