关于CSS选择器的总结
类属性
类属性是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优先级是根据权重算出来的。
上一篇: 今日头条前端面试的笔试题分享