这是我参与「第四届青训营」笔记创作活动的第1天
也是本小白学习前端的CSS第一篇~
主要是选择器的学习

CSS

<!--HTML文档链接CSS采用以下语句-->
<link rel="stylesheet" href="styles.css">

浏览器都会有他们的默认的样式类型，比如说标题都是粗体什么的，还有列表都是有项目符号的……

选择器:

一般来说，我们通过class属性，也就是一个类来规定样式，例子：

<!--在HTML里面你的设定是这样的，并且在第二这个li上面增加了class属性叫做special-->
<ul>
    <li>第一</li>
    <li clss="special">第二</li>
    <li>第三</li>
</ul>
<!--然后在CSS上面，你修改了special样式-->
.special{
    color:orange;
    font-weight:bold;
}
<!--然后就能够只修改列表里面第二个那个样式了-->

其实选择器的选择方式有好多好多种类，要如果精准的选择你想要选择的东西，就需要你对这些选择器非常的熟练了，下面是几种类型的选择方式

id选择器

故名思意就是通过id进行选择，id就是一个属性，类似于上面讲的class属性，但是不同的是class属性一般都能够链接多个，但是id一般都只有一个，所以白不如用class

<!--id建议唯一-->
<h1 id="logo"> xxxxxxxxxxxxxxxxxx </h1>
<style>
    #logo{ 
    font-size:60px;
    front-wight:200;
    }
</styke>

类选择器

就是class

属性选择器

顾名思义···
但是他还是有很多用法：

1、直接选中这类属性
    类似于我定义了一个disabled这个属性
    那么我在选择器上面，可以直接用[disabled]来选中他
2、选中属性值特定的属性
    比如说：我定义了一个type="password"
    那么我在选择器上面，就应该用[type="password"]来选中他
3、选中属性值存在某一特性的值
    比如说我的一个超链接的href是以#开头的
    那么我在选择器上面，就应该用a[href^="#"]
    如果我的一个超链接的href是以.jpg结尾的
    那么我在选择器上面，就应该用a[href$=".jpg"]

伪类选择器

伪类选择器还分为：状态伪类和结构为类
状态伪类就是说：
一个链接或者什么东西都会有不同的状态，比如说一个链接有点击状态还有鼠标悬浮状态还有正常状态等等，那么我们选择器选中这些状态之后对他的进行样式的修改，举个例子：

<a xxxxxxxxxxxxx>xxx</a>
<style>
    a:link{x;}                 正常状态下
    a:visited{x;}              访问之后
    a:hover{x;}                鼠标移到的时候
    a:activex{x;}              鼠标按下去的时候
</style>

<lable>
    用户名：
    <input type="text">
</lable>
<style>
    :focus{x;}                 按下去的时候，不管是边框还是链接都可以
</style>

结构伪类就是说：
他会根据HTML解析之后在DOM树上面的位置来选择他，其实我也没明白DOM树，但是不管，看例子能理解就行了：

这个例子不仅定义了所有列表的样式，还特指了第一个列表元素的样式
通过li:first-child来指定他
<ol>
    <li>可可</li>
    <li>翔翔</li>
    <li>盒盒</li>
    <li>一一</li>
    <li>二二</li>
</ol>
<style>
    li{
        list-style-position:inside;
        border-bottom:1px solid;
        padding:0.5em;
    }
    li:first-child{
        color:coral;
    }
    li:last-child{
        border-bottom:none;
    }
</style>

组合选择器

组合选择器就是两个选择器之间的关系，我的理解就是两个不管是元素还是属性还是其他东西的关系

分为好几种：

直接组合    AB    满足A同时满足B                  input:focus
后代组合    A B   选中B，如果他是A的子孙           nav a
亲子组合    A>B   选中B，如果他是A的子元素         section>p
兄弟选择器  A~B   选中B，如果他在A的后面且和A同级   h2~p
相邻选择器  A+B   选中B，如果他紧跟在A的后面        h2+p

如果要选择多个标签等等的，就可以用选择器组，中间用逗号隔开

body,h1,h2,h3,h4,h5{
    x;
}
 [type="checkbox"],[type="radio"]{
     x;
 }

ok经历了上面的选择器选择之后，我们就能够修改他的样式了，一般都是
属性+值，属性和值用冒号分开
属性：人类可读的标识符，只是你想要更改的样式的特征
值：每一个指定的属性都有一个值，就是你要更改成什么样子的

小白学前端|青训营笔记

CSS