1、css3的引入
1.采用内联样式、行内样式(在元素的表头使用style属性来填写样式)
<div style="width: 200px;height: 200px;border: 1px solid #000;">坐看寒风起</div>
2、内部样式表(样式写到head中的style标签里)
<style>
*{
color: red;/*将所有标签文字改成红色*/
}
</style>
3、引入外部css文件(用head中的link标签来引入)
<link rel="stylesheet" href="./index.css"><!--href中填写css文件的地址-->
2.核心选择器
*2.1、通用选择器(号)
/* *号代表全部的 */
*{
color: red;/*将所有标签文字改成红色*/
}
2.2.id选择器
在body中的div设置id标识符,然后在css中的使用#标识符的格式来选中,id标识符一般是唯一的
<div id="a1">123</div>
#a1{
color: red;
}
2.3. 类选择器
在body中的div设置class标识符,然后在css中的使用.标识符的格式来选中。
<div class="a1">123</div>
.a1{
color: red;
}
2.4. 元素选择器
使用元素选择器来选择属于某一类元素
div{
color: red;
}
2.5、组合选择器
使用以上多种方式进行组合筛选来设置样式
<div class="a1">123</div>
<div class="a1">123</div>
<div id="a1">123</div>
div.a1{
color: red;
}
3、层次选择器
3.1 子代选择器
作用:选择指定元素的指定子代元素
语法:父元素>子元素 { }
<div class="a1">
<div class="b1">目标元素</div>
<div class="b2">
<div class="b1">我不是</div>
</div>
</div>
选中a1类中的类为b1中的元素,只能在子代中选择
.a1>.b1{
color: red;
}
3.2 后代选择器
作用:选择指定元素的指定后代元素
语法:祖先 后代{ }
<div class="a1">
<div class="b1">目标元素</div>
<div class="b2">
<div class="b1">我也是</div>
</div>
</div>
选中a1类中的类为b1中的元素,可以在后代中所有的元素中选择
.a1 .b1{
color: red;
}
3.3 兄弟选择器
作用:选择下一个兄弟(紧挨着)
语法:前一个+下一个{ }
<div>
<ul class="a1">
<li class="b1">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
选中 b1 的后面的兄弟 li2
.b1+li{
color: red;
}
作用:选择下面所有的兄弟元素
语法:兄~弟{ }
<div>
<ul class="a1">
<li class="b1">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
选中 b1 后面所有的 li 兄弟
.b1 ~ li{
color: red;
}
4、属性选择器
[属性名]{} p[title] 选择含有指定属性的元素
[属性名=属性值]{} p[title=as] 选择含有指定属性的元素和属性值的元素
[属性名^=属性值]{} p[title^=as] 选择属性值以指定值开头的元素
[属性名$=属性值]{} p[title$=d] 选择属性值以指定值结尾的元素
[属性值*=属性值]{} p[title*=a] 选择属性值中含有某值的元素
<p title="as">这是一个p标签</p>
<p title="ac">这是一个p标签</p>
<p title="asd">这是一个p标签</p>
<p title="ambd">这是一个p标签</p>
<p >这是一个p标签</p>
<p >这是一个p标签</p>
/* 例子:title属性中含有b的元素*/
p[title *= b] {
color:red;
}
/* 例子:title属性中以a开头的元素*/
p[title ^= a] {
color:red;
}
5、伪类选择器
伪类(不存在的类,特殊的类)
伪类用于描述一个元素的特殊状态
比如:第一个子元素、被点击的元素,鼠标移入的元素...
伪类一般情况下都是使用:开头
:first-child 第一个子元素
:last-child 最后一个子元素
:nth-child() 选中第n个子元素
特殊值:
n 第n个 n的范围0~~正无穷
2n或even 表示选中偶数位的元素
2n+1或odd 表示选中奇元素
-以上这些伪类都是根据所有的子元素进行排序
:first-of-type
:last-of-type
:nth-of-type()
这几个伪类的功能和上述的类似,不通点是他们在同类型元素中进行排序。
:not() 否定伪类
---将符合条件的元素从选择器中去除
<div>
<ul>
<p>坐看寒风起</p>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
下面的代码中,第一个和第二个区别就在于,
1.first-child是选择的是ul元素中的第一个子元素,如果第一个是子元素是li,则选择第一个元素,如果不是li则first-child不选中任何的元素。
2.first-of-type 是选择第一个是li的子元素,如果第一个子元素是li,则选择第一个,如果第一个子元素是其他的元素,
则往后找有没有li元素,如果有,选择其中的第一个li,如果没有,不选择任何元素。
3.第三个样式是选中所有的偶数元素,nth-child()与nth-of-type()区别跟上面是一样的
4.:not( ) 是否定伪类,排除某个选择其他的。
/*1*/
ul>li:first-child{
color:skyblue;
}
/*2*/
ul>li:first-of-type{
color: tomato;
}
/*3*/
ul>li:nth-of-type(2n){
color: tomato;
}
/*4*/
ul>li:not(:nth-child(5)){
color: tomato;
}
6、选择器的权重
选择器 | 权重 |
---|---|
!important | max |
内联样式 | 1000 |
#(id选择器) | 100 |
.(class选择器) | 10 |
p(元素选择器) | 1 |
一个权重为10的选择器大于十一个权重为一的选择器,选择器的权重不能用累加来越界。
7、备注:
以上选择器都是部分,详情请查看W3C官网
网址:W3C官网
选择器练习网站(看bilibili里尚硅谷的视频的链接)
网址:CSS Diner