CSS：选择器

最新推荐文章于 2023-05-15 15:42:39 发布

枫眠cc

最新推荐文章于 2023-05-15 15:42:39 发布

阅读量336

点赞数

分类专栏： ★ CSS

赠人玫瑰，手有余香！本文是作者的原创文章，转载或摘抄时请注明出处。

本文链接：https://blog.csdn.net/lovecuidong/article/details/105563698

版权

★ CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

选择器

定位到某个标签添加样式信息

基本选择器

1、标签选择器（body，div，p，ul，li...）

根据标签名称定位到元素，会把当前网页上的所有的这个标签的样式更改掉

有多个标签时，中间使用“,”隔开

标签名称{样式名称:样式值;...;}

p{
    color:firebrick;
    font-size:50px;
}

2、类选择器（.）

某一类标签可以通用一种样式

.类选择器名称{样式名称:样式值;...;}

<p class="c1">段落1</p>
<p class="c2">段落2</p>
.c1{
    background-color:royalblue;
}
.c2{
    background-color:salmon;
}

3、ID选择器（#）

根据ID名称定位到标签元素添加样式

ID名即为HTML元素的id属性值，大多数HTML元素都可以定义ID属性，元素的ID值是唯一的，只能对应于文档中某一个具体的元素。

#id选择器名称{样式名称:样式值;...;}

<div id="d1"></div>
<div id="d2"></div>
#d1{
    width:100px;
    height:100px;
    background-color:darkblue;
}
#d2{
    width:100px;
    height:100px;
    background-color:drakgreen;
}

4、全局选择器（*）

* {
    margin: 0px;
    padding: 0px;    
}

5、属性选择器

[属性]
[属性='属性值']
标签[属性='属性值']

选择器	描述
[attribute]	用于选取带有指定属性的元素。
[attribute=value]	用于选取带有指定属性和值的元素。
[attribute~=value]	用于选取属性值中包含指定词汇的元素。
[attribute\|=value]	用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value]	匹配属性值以指定值开头的每个元素。
[attribute$=value]	匹配属性值以指定值结尾的每个元素。
[attribute*=value]	匹配属性值中包含指定值的每个元素。

[title]{color:red;}   /*为带有 title 属性的所有元素设置样式*/
[title=W3School]{border:5px solid blue;}   /*为 title="W3School" 的所有元素设置样式*/

后代选择器

1、后代选择器（#d ul li）

为当前元素的后代加样式，后代指直接包含或间接包含在当前元素中的元素。

选择器名称 后代元素{样式名称:样式值;...;}

#d ul li{
    color:firebrick;
    font-size:50px;
}
/*对id为d的元素包含下的ul元素中的li元素应用样式，其他元素不受影响。*/

2、子选择器（>）

父元素，直接包含子元素的元素叫父元素；子元素，直接被父元素包含的元素叫子元素。

父元素选择器名称>子元素选择器名称{样式名称:样式值;...;}

div > span{
    color:firebrick;
    font-size:50px;
}

3、相邻兄弟选择器（+）

拥有共同的父元素叫兄弟元素，相邻的兄弟元素叫相邻兄弟元素。

兄弟元素+后一个兄弟元素{样式名称:样式值;...;}

<ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
</ul>
li + li {font-weight:bold;}   /*这个选择器只会把列表中的第二个和第三个列表项变为粗体，第一个列表项不受影响。*/

4、兄弟选择器（~）

兄弟元素~所有兄弟元素{样式名称:样式值;...;}

#span ~ p{
    color:firebrick;
    font-size:50px;
}

相邻兄弟选择器和兄弟选择器区别

‘+’选择器则表示某元素后相邻的兄弟元素，也就是紧挨着的，是单个的。而‘~’选择器则表示某元素后所有同级的指定元素，强调所有的。

<body>
    <p>这是段落标签</p>
    <h3 class="h3">这是标题标签</h3>
    <p>这是段落标签</p>
    <p>这是段落标签</p>
    <p>这是段落标签</p>
</body>

.h3 + p {
    color: red;
}

.h3 ~ p {
    color: red;
}

伪类选择器

1、动态伪类选择器

常给a标签使用，也可以给其它标签使用，但是在IE6浏览器，只能给a标签使用。（LoVeHAte 爱恨原则）

:link 链接时的状态
:visited 访问之后的状态
:hover 鼠标移入时的状态
:active 鼠标点击时的状态

a:link {color: #FF0000}	        /* 未访问的链接 */
a:visited {color: #00FF00}	/* 已访问的链接 */
a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
a:active {color: #0000FF}	/* 选定的链接 */

2、结构性伪类选择器

:first-child 第一个子元素
:last-child 最后一个子元素
:nth-child(n) 第几个子元素
:first-of-type 同辈元素中第一个元素
:last-of-type 同辈元素中最后一个元素
:nth-of-type(n) 同辈元素中第几个元素

li:first-child {text-transform:uppercase;}   /*将ol或ul元素第一个子元素的所有 li元素变成大写*/

3、UI伪类选择器（表单元素使用）

:checked 选中（只能给radio、checkbox使用）
:enabled 可用的
:disabled 不可用的

4、伪元素选择器

:first-letter 向文本的第一个字母添加特殊样式
:first-line 向文本的首行添加特殊样式
:before 在元素之前添加内容
:after 在元素之后添加内容

p:first-line {color:#ff0000;font-variant:small-caps;}   /*浏览器会根据 "first-line" 伪元素中的样式对 p 元素的第一行文本进行格式化*/
h1:before{content:url(logo.gif);}   /*在每个 <h1> 元素前面插入一幅图片*/

选择器优先级

在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式
作为style属性写在元素内的样式（行内样式）
id选择器
类选择器
标签选择器
通配符选择器
浏览器自定义或继承

总结排序：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性，同一级别中后写的会覆盖先写的样式。

例如：判断div是应用那条规则呢，有个简单的计算方法（经园友提示，权值实际并不是按十进制，用数字表示只是说明思想，一万个class也不如一个id权值高）

内联样式表的权值为 1000

ID 选择器的权值为 100

Class 类选择器的权值为 10

HTML 标签选择器的权值为 1

全局选择器的权重为 0

我们可以把选择器中规则对应做加法，比较权值，如果权值相同那就后面的覆盖前面的了

div.class的权值是1+10=11，而.test1 .test2的权值是10+10=20，所以div会应用.test1 .test2。

枫眠cc

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS：选择器

选择器定位到某个标签添加样式信息基本选择器1、标签选择器（body，div，p，ul，li...）根据标签名称定位到元素，会把当前网页上的所有的这个标签的样式更改掉有多个标签时，中间使用“,”隔开标签名称{样式名称:样式值;...;}p{ color:firebrick; font-size:50px;}2、类选择器（.）某一类标签可以通用一...
复制链接

扫一扫