学习前端之CSS选择器

学习前端之CSS选择器

CSS选择器是个啥子东东？别看它取了个高级的名字，其实就相当于给目标人物取名字，例如：

<div></div>

我要给上面的div标签加样式，首先就要找到它，简单粗暴的一种，就是直接取div

div{
    width:100px;
    height:100px;
    background-color:red;
}

这样我们就能给div加样式了。废话不多说，选择器有哪些呢？

标签选择器

上面的例子就是标签选择器，直接是用的标签名，写div，就会选中HTML中所有的div标签

id选择器

这个选择器就相当于身份证号，一个身份证号只能代表一个人，一个id只能选中一个标签，别人不能一起共用，id选择器以"#"来定义。同样选中上面的div，用id选择器。

<div id = "box"></div>

#box{
    width:50px;
    height:50px;
    background-color:green;
}

注：id属性不能以数字开头，数字开头的ID在Mozilla/Firefox浏览器中不起作用。

class选择器

class选择器与id选择器类似，但有别于id选择器，它可以在多个元素中使用，又叫做类选择器，以一个点"."号显示。

<div class = "box"></div>

.box{
    width:150px;
    height:150px;
    background-color:blue;
}

注：类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。

属性选择器

一般用于input标签上，input标签有多种type，想要给其中一种type加样式，就用属性选择器。

<form>
    username:<input type = 'text'><br>
    password:<input type = 'password'><br>
    <input type = 'submit' value = "提交">
</form>

input[type='text']{
    width:150px;
    margin-bottom:10px;
    background-color:blue;
}
input[type='password']{
    width:150px;
    margin-bottom:15px;
    background-color:pink;
}
input[type='submit']{
    width:80px;
    margin-left:35px;
    display:block;
}

除了上面的用法外，还可以

[attribute]，表示选择所有带有括号里属性元素

[attribute~=value]表示选择attribute属性包含单词"value"的所有元素

[title~=flower] 选择标题属性包含单词"flower"的所有元素

[attribute|=language]表示选择 attribute属性以 language为开头的所有元素

[lang|=en] 选择 lang 属性以 en 为开头的所有元素

[attribute^=value]表示选择每一个attribute属性的值以"value"开头的元素

a[src^=“https”] 选择每一个src属性的值以"https"开头的元素

[attribute$=value]表示选择每一个attribute属性的值以"value"结尾的元素

a[src$=".pdf"] 选择每一个src属性的值以".pdf"结尾的元素

[attribute*=value]表示选择每一个attribute属性的值包含子字符串"value"的元素

a[src*=“runoob”] 选择每一个src属性的值包含子字符串"runoob"的元素

通配符*

选择所有的元素,用于最开头，初始化页面。以第一个例子标签选择器为例，我们给div设好样式后，会发现它离左边，上面都有一定的距离，这个样式我们并没有设置，是浏览器自带的样式。

每个元素设置好样式后，都会有以上的距离，为了消除这个样式，就用"*"

*{
    margin:0;
    padding:0;
}

这样我们就把这个样式消除了。

以上的这些选择器都是简单的选择器，还有复杂选择器，就下次再分享啦！！！