CSS选择器
2017-12-27 本文已影响0人
闪电西兰花
1.CSS选择器常见的有几种?
* {
margin: 0;
padding: 0; /*通配符，选取html中所有标签元素，一般用于样式reset，去除浏览器默认的内外边距*/
}
div { color: red; } /*标签选择器*/
#id /*id选择器*/
.class /*类选择器*/
*[属性名] /*属性选择器。所有具有该属性的元素*/
input[type = "text"] /*属性选择器，选取所有具有该属性的元素*/
h1,p /*选择器分组，选择html中所有的h1和p标签*/
p a /*后代选择器，p元素下所有的a（不分子孙）*/
p>a /*子元素选择器，和后代选择器的区别是，这里的a必须是p的直接子元素（孙辈的不算）*/
p+h1 /*相邻兄弟选择器，p和h1有共同的父元素*/
2.选择器的优先级
<1>在属性后面使用!important会覆盖页面内任何位置定义的元素样式
p { color: red!important; }
<2>作为style属性写在元素标签上的内联样式
<p style="color:blue;">我是段落</p>
<3>id选择器
<4>类选择器
<5>伪类选择器
<6>属性选择器
<7>标签选择器
<8>通配符选择器
<9>浏览器自定义
3.class 和 id 的使用场景
- id具有唯一性，主要用在页面布局中较大的容器（大区块）
- class用的最多，在一个页面中可重复利用，用于布局中的内部模块，或者当几个模块拥有共同样式时可用同一个class
4.以下选择器分别是什么意思
#header {} /*id选择器，选取id属性值为header的元素*/
.header {} /*类选择器，选取class属性值为header的元素*/
.header .logo {} /*class属性值为header元素下的所有class属性值为logo的元素*/
.header.mobile {} /*class属性值中包括header和mobile的元素*/
.header p,
.header h3 {} /*class属性值为header的元素下所有p和所有h3元素*/
#header .nav>li {} /*id名为header的元素下的class属性值为nav的元素的直接子元素li*/
#header a:hover /*当鼠标指针浮动在id名为header的元素下的a标签时*/
5.伪类选择器
a:link { color: #fff; } /*未被访问的链接*/
a:visited { color: #ccc; } /*已被访问的链接*/
a:hover { color: #333; } /*鼠标指针浮动在链接上*/
a:active { color: #eee; } /*正在被点击的链接*/
p:before {} /*p元素前插入样式*/
p:after {} /*p元素后插入样式*/
6.:first-child和:first-of-type的作用和区别
-
:first-child选择属于其父元素的首个子元素，例如p:first-child{ color:red; }
<div class="logo">
<p>123</p> <!--变成红色-->
<p>456</p> <!--不变-->
</div>
<div class="logo2">
<p>789</p> <!--变成红色-->
<p>0</p> <!--不变-->
</div>
-
:first-of-type匹配属于其父元素的特定类型的首个子元素的每个元素，等同于:nth-of-type(1)例如：p:first-of-type{ color:red; }，这里的p只要是子元素就行，不需要一定是第一个子元素，只不过是子元素p中的第一个
<div class="logo">
<a href="">点击跳转</a>
<p>123</p> <!--变成红色-->
<p>456</p>
</div>
<div class="logo2">
<h3>logo</h3>
<p>789</p> <!--变成红色-->
<p>0</p>
</div>
7.以下代码输出样式及原因
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
.item1:first-child{
color: red;
}
.item1:first-of-type{
background: blue;
}
</style>
</head>
<body>
<div class="ct">
<p class="item1">aa</p> <!--红色字，蓝色背景；匹配第一个子元素和子元素中第一个p-->
<h3 class="item1">bb</h3> <!--仅蓝色背景；匹配子元素中第一个h3-->
<h3 class="item1">ccc</h3>
</div>
</body>
</html>
