CSS选择符

最新推荐文章于 2024-07-08 14:14:43 发布

Goodbye_yesterday

最新推荐文章于 2024-07-08 14:14:43 发布

阅读量131

点赞数

分类专栏： html&CSS

本文链接：https://blog.csdn.net/Goodbye_/article/details/112427050

版权

html&CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1.元素选择符

元素选择符通常是HTML元素

h1 {
    color: black;
}

声明和关键字

声明块中有一个或多个声明

p {
    font: medium;
    color: red;
}

2.群组

群组选择符

即把几个元素选择符集中在一起

h1 , h2, h3 {
    color: black;
}

通用选择符

* 
{
    color: red;
}

在旧浏览器中使用新元素使用DOM操作生成元素，浏览器就会把他们当成元素来对待

document.createElement('main');

3.类选择器和ID选择器

即最常用的class属性和id属性，不再过多介绍

这里只总结一点关于多个类

p.warning.urgent{
    background: silver;
}

这个选择的是同时具有两个类名的p元素

ID值在一个文档中不应该是相同的，虽然这么写浏览器可能不会报错，但是不应该这样做，特别是在操作DOM时，getElementById()只能取出第一个id,而css则可能应用到所有的类
ID选择符的权重更高

4属性选择符

简单属性选择

h1[class] {
    color: silver;
}

多个属性的选择

a[href][title] {
    font-weight: bold;
}

精准的属性值选择

planet[monns="1"] {
    font-weight: bold;
}

根据部分属性值选择

[foo|="bar"]

*[lang|="en"] {
    color: white;
}

匹配lang属性，lang属性的值可以"en","en-","en-..."

[foo~="bar"]

选择的元素有foo属性，且其值是包含bar这个词的一组词

匹配属性值的子串

span[class*="cloud"] {
    font-size: italic;
}

只要class的值是cloud的字串都能匹配

匹配属性值开头的子串

a[href^="https:"] {
    font-weight: bold;
}

与上面一种不同的就是必须是这个开头的子串，也就是前缀

匹配属性值结尾的子串

a[href$=".pdf"] {
    font-weight: bold;
}

也就是后缀

不区分大小写的标识符

planet[type*="rock" i] {
    //styles
}

加上i不区分class的大小写

5.后代选择器

<html>
<head>
</head>
<body>
    <p> hhhhh</p>
</body>
</html>

如果要选中body的后代p元素

h1 em {
    color: gray;
}

6.子元素选择器

h1 > strong {
    color: red;
}

选择子元素，h1 有子元素strong才会应用这个样式

7.紧邻同胞选择器

h1 + p {
    margin-top: 0;
}

选择的元素p 紧跟在 h1后面才会应用该样式

html > body table + ul {
    margin-top: 1.5em;
}

html的子元素body的后代元素table的紧邻同胞元素（略复杂qaq）

8.选择后续同胞

h2 ~ol {
    font-style: italic;
}

选择同一个父元素下的所有在h2之后的ol元素

9.伪类选择器

a:link:hover {
    color: red;
}

选择根元素的伪类 :root

选择没有任何子元素的伪类 :empty

选择唯一的子代 :only-child

a[href] img:only-child {
    border: 2px solid black;
}

a标签的href属性 img是a的唯一子元素

:only-of-type 匹配同胞中唯一的那种元素

:first-child 匹配第一个子元素

:last-child 匹配最后一个子元素

:first-of-type 选择第一个某种元素

:last-of-type 选择最后一个某种元素

table:first-of-type {
    border-top: 2px solid gray;
}

table:last-of-type {
    border-top: 2px solid gray;
}

选中的元素如上图所示，黄色代表first-of-type选中的东西，绿色代表last-of-type选中的东西

:nth-child(1) 选中第n个子元素，参数决定是第几个

:nth-child(2n) 表示选中偶数位的子代

:nth-last-child() 和上面的:nth-child()功能类似，只不过是从后面往前面数的

:nth-of-type()和 :nth-last-of-type() 选择同一级中的第n个某种元素

10.动态伪类

css2.1定义了两个只能在超链接上使用的伪类

:link 用作超链接的锚记，而且指向未访问的地址

:visited 指向已访问的超链接

用户操作伪类

:focus 指向当前获得输入焦点的元素

:hover 指向鼠标悬停的元素

:active 指向由用户输入激活的元素，例如用户单击超链接时按下鼠标按键的那段时间

11.UI状态伪类

:enable 接收输入的元素

:disabled 不接受输入的元素

:checked 由用户或文档中默认选中的单选按钮或复选框

:indeterminate 指既未选中也没有选中的单选按钮或复选框,这个状态只能由DOM脚本设定，不能由用户设定

:default 指默认选中的单选按钮，复选框或选项

:valid 指代满足所有数据有效性语义的输入框

:invallid 指代不满足所有数据有效性语义的输入框

:in-range 指输入的值在最小值和最大值之间的输入框

:out-of-range 指输入的值小于控件允许的最小值或大于控件允许的最大值的输入框

:required 指必须输入值的输入框

:optional 无需一定输入值的输入框

:read-write 指由用户编辑的输入框

:read-only 不能由用户编辑的输入框

:target 它所指向的文档片段

:lang 伪类根据文本使用的语言选择元素

*[lang|="fr"] {
    font-style: italic;
}

选择法语的文本置为斜体

:not() 否定伪类这个选择器选择的是class属性不是moreinfo的li元素

li:not(.moreinfo) {
    font-style: italic;
}

这个选择器选择的是class=”link" 非li 和非p元素

*.link:not(li):not(p) {
    font-style: italic;
}

12.伪元素选择符

装饰首字母

::first-letter 伪元素用于装饰任何非行内元素的首字母

p::first-letter {
    color: red;
}

<p-first-letter>是个伪元素

装饰首行

::first-line用于装饰元素的首行文本

p::first-line{
    font-size: 150%
    color: purple;
}

上面的 ::first-letter 和 ::first-line都只能应用于块级元素，不能应用到行内元素上

::before 和 :: after

h2::before {
    content: "]]";
    color: silver;
}

在h2元素之前插入银色的]]

::after使用同理

本文是CSS权威指南的第二章笔记整理

Goodbye_yesterday

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录