欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

关于CSS选择器的总结

程序员文章站 2022-07-08 12:12:30
类属性 类属性是HTML中的class属性,类的目的是标识一组具有相同特征的元素,为了让不同标签名的元素应用相同的样式 1.类选择符 .类名  (两者之间没有空格)...

类属性

类属性是HTML中的class属性,类的目的是标识一组具有相同特征的元素,为了让不同标签名的元素应用相同的样式

1.类选择符

.类名  (两者之间没有空格)

2.标签带类选择符

如果只想选中带有某个类的元素,可以在类选择符前面加上标签

3.多类选择符

.类名.类名 (注意中间没有空格)

用来选择同时拥有这两个类的元素

id属性

id是可以在页面中唯一的标识一个元素,即id在每个页面中只能使用一次,可排除无关标签,是HTML中的id属性

#id名

上下文选择符 空格

以某个祖先标签为上下文,无论该标签与祖先标签隔着多少层,都可以选中

特殊上下文选择符

1.子选择符 >

标签1 > 标签2 (标签1是标签2的父元素)

2.紧邻同胞选择符 +

标签1 +标签2 (标签2必须在标签1后面,且为同级关系)

3.一般同胞选择符 ~

标签1 ~ 标签2 (标签2在标签1后面,但不一定是紧跟,中间可以有其他标签)

4.通用选择符 *

匹配该页面所有的元素

属性选择符

1.属性名选择符

标签名[属性名]  (选择任何带有属性名的标签)

只要有这个属性就会被选中,跟属性值无关

2.属性值选择符

标签名[属性名="属性值"]   (选择任何带有值为属性值的属性名的标签名)

伪类

伪类分为两种:

1.UI伪类:会在HTML元素处于某个状态时(比如鼠标指针位于链接上时),为该元素应用css样式 

- 链接伪类:针对链接伪类的一共有四个

Link  此时,链接就在那儿等着用户点击。

Visited  用户此前点击过这个链接。

Hover  鼠标指针正悬停在链接上。

Active  链接正在被点击(鼠标在元素上按下,还没有释放)。

例如:

a:link {color:black;}

a:visited {color:gray;}

a:hover {text-decoration:none;}   (注意:可以用于任何元素)

a:active {color:red;}

:focus伪类

表单中的文本字段在用户点击时获得焦点

input:focus {border:1px solid blue;}

:target伪类

如果用户点击一个指向页面中其他元素的链接,则那个元素就是目标(target)

#more_info:target {background:#eee;}

2.结构化伪类

:first-child 和:last-child

:first-child 代表一组同胞元素中的第一个元素,而:last-child 则代表最后一个

:nth-child(n)

li:nth-child(3) (选择一组列表中的每个第三项)

:nth-child 伪类最常用于提高表格的可读性

伪元素

文档中若有实无的元素

1.::first-letter 伪元素:可以改变第一个字母的效果

2.::first-line 伪元素:可以改变第一行的效果

3.::before 和::after 伪元素:可用于在特定元素前面或后面添加特殊内容 

例如:

p.age::before {content:"Age: ";}

p.age::after {content:" years.";}

结合

<p class="age">25</p>

可得到效果:

Age: 25 years.

css选择器优先级

多重样式情况: 

行内>内联>外联

优先级顺序: 

内联样式> ID选择器 > 伪类> 属性选择器 > 类选择器 > 元素选择器 > 通用选择器

css优先级是根据权重算出来的。