选择器笔记

选择器

目录

选择器

Ⅰ、基础选择器：

1、标签选择器（元素选择器）

2、类选择器

3、id选择器

4、通配符选择器

Ⅱ、复合选择器

1、交集选择器

2、并集选择器

Ⅲ、关系选择器

1、后代元素选择器（包含选择器）

2、子元素选择器（亲儿子选择器）

3、兄弟元素选择器

Ⅳ、属性选择器

1、[属性名] 

2、[属性名=属性值] 

3、[属性名^=属性值] 

4、[属性名$=属性值] 

5、[属性名*=属性值]

Ⅴ、伪类选择器

1、选定元素

2、：not（）否定伪类

3、链接伪类选择器

4、伪元素选择器

5、:focus伪类选择器

Ⅵ、三大特性

1、层叠性

2、继承性

3、优先级（权重）

---

Ⅰ、基础选择器：

1、标签选择器（元素选择器）

根据标签名来选中指定元素

语法格式：标签名 {属性： 属性值；}
把某一类全部标签选出

eg.
p{
color: red;
}

2、类选择器

class可重复使用，可利用class属性为元素分组

①.类名{属性： 属性值}
后面谁想用谁调用class类
口诀：样式点定义，结构类调用，一个或多个，开发最常用

eg.
.red {color: red;}
<div class="red">

②多类名
一个class里可写多个类名，用空格隔开

eg.

<div class="red abc"></div>

两个class，red和abc

3、id选择器

根据id的属性值选中一个元素

语法：#id名 {属性： 属性值；}
后面谁想用谁加id=“ xxx”
样式#定义，结构id调用，只能调用一次,别人不能调用

eg.
#pink {color: pink;}
<div id="pink">

4、通配符选择器

选中页面中所有元素

* {属性： 属性值；}
不需要调用，自动给所有元素使用样式
特殊情况才用

Ⅱ、复合选择器

1、交集选择器

选中同时符合多个条件的元素

语法：选择器1选择器2选择器n {样式声明；}

注意：

如果有元素选择器，必须使用元素选择器开头

2、并集选择器

同时选择多个选择器对应的元素

语法：选择器1，选择器2，选择器n{样式声明；}

注意：

①可选择多组标签，同时为他们定义相同样式
②英文逗号隔开
③任何形式的选择器都可作为并集选择器的一部分。

Ⅲ、关系选择器

1、后代元素选择器（包含选择器）

选中指定元素内的指定后代元素

语法：祖先 后代 {样式声明}

选择元素1里的所有元素2（后代元素）
①元素1和2中间必须有空格
②元素1父级，元素2可以是子级，儿子孙子层层往下找就行
③元素1和元素2可以是任意基础选择器

2、子元素选择器（亲儿子选择器）

选择作为某元素的最近一级子元素（选中指定父元素的指定子元素）

语法：父元素>子元素{样式声明}

3、兄弟元素选择器

①选择下一个兄弟（必须是紧挨的）

语法：前一个 + 后一个{样式声明}

②选择下边的所有兄弟

语法：兄 ~ 弟{样式声明}

Ⅳ、属性选择器

1、[属性名] 

选中含有指定属性的元素

eg.
p[title]{
    color:orange;
}
<p title="abc">123456</p>
<p title="abcdef">123456</p>
<p >123456</p>

（前两个变色）

2、[属性名=属性值] 

选择含有指定属性和属性值的元素

eg.
p[title=abc]{
    color:orange;
}
<p title="abc">123456</p>
<p title="abcdef">123456</p>
<p>123456</p>

（第一个变色）

3、[属性名^=属性值] 

选择属性值以指定值开头的元素

eg.
p[title^=abc]{
    color:orange;
}
<p title="abc">123456</p>
<p title="abcdef">123456</p>
<p title="hello">123456</p>
（前两个变色）

4、[属性名$=属性值] 

选择属性值以指定值结尾的元素

eg.
p[title$=abc]{
    color:orange;
}
<p title="abc">123456</p>
<p title="abcdef">123456</p>
<p title="helloabc">123456</p>
（一三变色）

5、[属性名*=属性值]

选择属性值中含有某值的元素

eg.
p[title$=abc]{
    color:orange;
}
<p title="abc">123456</p>
<p title="abcdef">123456</p>
<p title="helloabc">123456</p>
（三个都变色）

Ⅴ、伪类选择器

用冒号表示，用于向某些选择器添加特殊效果，如给链接添加特殊效果，或选择第一个第n个元素。

伪类表示特殊的状态

1、选定元素

①：first-child第一个子元素

②：last-child最后一个子元素

③：nth-child（）选中第n个子元素

特殊值：

        n   第n个  n范围0到∞   全选中

        2n 或even 表示选中偶数位元素

        2n+1或odd  表示选中奇数位元素

eg.
ul > li:nth-child(1){
    color:red;
}

<ul>
    <li>1</li>
    <li>2</li>
</ul>

（括号里写几，就是第几个）

注：以上，必须是所有子元素的排序（所有子元素第一个不是li就不变色）

④：first-of-type

⑤：last-of-type

⑥：nth-of-type

注：以上三个和上边功能类似，但他们在相同类型里排序（所有li第一个变色）

2、：not（）否定伪类

 将符合条件的元素从选择器中去除

eg.
ul > li:not(:nth-child(2)){
    color:red;
}

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
（除了第二个都变色）

3、链接伪类选择器

a:link选择所有未被访问的链接
a:visited选择所有已被访问的链接
a:hover选择鼠标指针位于其上的链接
a:active选择活动链接（鼠标按下未弹起的链接）

为保证有效果，要按顺序来LVHA（love hate）
给链接要单独指定样式。

写法：
/*a标签选择器 所有链接*/
a {
   color: gray;
}
/*：hover链接伪类 鼠标经过*/
a:hover {
    color: red;
}

注：
hover、active也可用于其他元素，其他两个只能用于a
xxx：hover

4、伪元素选择器

伪元素表示特殊的位置

伪元素使用：：开头

①::first-letter    表示第一个字母

②::first-line    表示第一行

③::selection    表示选中的内容

④::before    表示元素的开始

⑤::after    表示元素的最后

注：④⑤必须结合content属性使用
eg
.news-list li::before {
    content:'■'
}
意思是给news-list的所有li前加内容■

5、:focus伪类选择器

用于选取获得焦点的表单元素，只有<input>表单能用

eg.

input：focus {
        background-color：yellow； 
}

(选中的表单框会改变样式)

Ⅵ、三大特性

1、层叠性

相同选择器：样式冲突，就近原则（后面的覆盖前面）；样式不冲突，不层叠

2、继承性

子标签会继承父标签的某些样式（与文字，颜色相关的text-，font-，line-，color），可简化代码
行高继承：font：12px/24px ‘Microsoft YaHei’；（斜杠后面的是行高）
还有一种写法：font：12px/1.5 Microsoft YaHei；（1.5是所有子元素是当前元素文字大小的1.5倍）
①行高可以跟单位也可以不跟单位。
②如果子元素没有设置行高，则会继承父元素的行高1.5
③子元素的行高是当前子元素的文字大小*1.5

3、优先级（权重）

同时有多个选择器，有优先级
①选择器相同执行层叠性
②选择器不同，根据选择器权重
继承或*   0，0，0，0
元素选择器  0，0，0，1
类选择器，伪类选择器  0，0，1，0
ID选择器  0，1，0，0
行内样式style=“”  1，0，0，0
！important重要的  无穷大∞
③注意：
等级判断从左到右
通配符和继承权重为0，标签选择器1，类（伪类）选择器10，id选择器100，行内样式表为1000，！important无穷大
***继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0
④权重叠加
权重不会进位，有四个数组成