CSS学习笔记（一）：选择器、运作机制

2022/4/7 6:23:53

编程Tag： 选择器 属性 css 元素 选择 兼容性 笔记

本文主要是介绍CSS学习笔记（一）：选择器、运作机制，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

镇楼图

Pixiv:torino

〇、CSS是什么？

CSS是指Cascading Style Sheets专门用于设计样式和美化的标记语言，HTML5删除了大量用于美化的属性或元素进一步表明了内容应当和表现分离

基本语法

CSS的语法和HTML一样特别简单

CSS的语法只有选择器、属性、属性值三部分

selector {property:value;}

其中property:value;被称为一条声明(Declaration)

声明写在{}内，被框定的一条条声明称为声明块

CSS侧重设计，与制定内容分离能极大提高开发效率

此外合理的利用选择器能大幅度缩减美化所带来的代码量

方式以及样式层叠顺序

CSS有三种方式

1.外联式Linking

2.嵌入式Embedding

3.内联式lnline

但是CSS不仅可以对同一定义不同样式还存在着多种形式的样式

CSS规定样式是存在顺序的，层级分别如下

1.浏览器默认设置

2.外联式/嵌入式

3.内联式

注释

CSS的注释与HTML不同，在CSS的代码种注释采用常见的/*注释部分*/

创建样式

CSS有三种方法提供

1.内联式

HTML代码中提供了全局属性style用来设定样式

由于本身选定了对象，只需要写明属性以及属性值即可

<p style="属性:值; 属性:值;"></p>

2.嵌入式

在head部分引入style标签，就可以在里面写CSS代码了

<head>
	<style>
		选择器 {
    		属性:值;
    		属性:值;
             /* ... */
		}
	</style>
</head>

3.外联式

创建一个新的CSS文件在CSS文件中写CSS代码

HTML通过link标签导入即可

<head>
    <link rel="stylesheet" href="CSS文件路径"/>
    <!-- rel表明文档是外部样式表 -->
</head>

一、基本选择器与组合选择器

选择器表明了选择的对象，在CSS3中加入了更多选择器以方便选择，但至少要了解旧版本一些最基本的选择器以满足最基本的选择功能。此外组合选择器是针对元素与元素之间逻辑关系而设定的

#id（id选择器）

id选择器是根据HTML全局属性的id来确定的，只会选择特定元素

兼容性：所有主流浏览器均支持

#example {
    /*选择id为example的元素*/
}

.class（类选择器）

根据全局属性class来选择的，会选择所有特定一类的元素

兼容性：所有主流浏览器均支持

.example {
    /*选择class为example的元素*/
}

*（通配符选择器）

选择文档中一切元素，包括html、body这样的元素

兼容性：所有主流浏览器均支持

* {
    /*选择文档中所有元素*/
}

element（标签选择器）

选择文档中所有的特定标签的元素

兼容性：所有主流浏览器均支持

div {
    /*选择文档中所有div元素*/
}

element 与*

此外还可以结合一些不同类型的选择器

div * {
    /*选择div内所有的元素但不包含div*/
}

这样细微的差别是有区别的，比如

<div>
	<p>My name is Donald.</p>
	<p>I live in Duckburg.</p>
</div>

div * {
	background-color:yellow;
    /*此属性是将背景色改为黄色*/
    /*div和div *是有区别的*/
}

element与.class

会进行element和.class两次筛选

div.example {
    /*选择div中class为example的元素*/
    /*注意不要加空格*/
}

element,element（组选择器）

组选择器可以对多个标签进行选择，大大提高了选择效率

兼容性：所有主流浏览器均支持

h1,p,td{
    /*选择文档中所有的三个标签*/
}

element element（嵌套选择器、后代选择器）

后代选择器用于选择内部元素，只要元素内含有即可

兼容性：所有主流浏览器均支持

div p {
    /*选择div中的p元素*/
}

复杂点也可以这样

table tfoot tr td img {
    /*选择table中的tfoot中的tr中的td中的img元素*/
}

element>element（子选择器）

与嵌套选择器类似，但不同的是子选择器更严格。嵌套选择器只要包含即可，而子选择器严格要求，要求下一级必须是所设定的

兼容性：所有主流浏览器均支持

<div>
    <span><p>Hello</p></span>
</div>

div p {
    /*可以选中p元素*/
}

div > p {
	/*无法选中p元素*/
}

div > span > p {
	/*可以选中p元素*/
}

element+element（相邻同级选择器）

相邻同级选择器，选择元素结束后下一个元素

兼容性：所有主流浏览器均支持

<table>
    <!-- 有很多元素... -->
</table>
<p>Hello</p>

table + p {
	/*选择table同级相邻的p元素*/
    /*可选中p元素*/
}

element~element (*)

首先前者和后者要有同样的父级元素，然后选择前者之后所有的后者的元素

兼容性：所有主流浏览器均支持

<body>
    <p>Hello</p>
    <div>
        <ul>
            <!-- 不会被选中 -->
        </ul>
    </div>
    <ul>
        <!-- 会被选中 -->
    </ul>
    <ul>
        <!-- 会被选中 -->
    </ul>
    <div>
        <p>Hello</p>
        <ul>
            <!-- 会被选中 -->
        </ul>
        <ul>
            <!-- 会被选中 -->
        </ul>
    </div>
    <ul>
        <!-- 会被选中 -->
    </ul>
</body>

p ~ ul {
    /*会选择同一级p之后的所有的ul元素*/
}

二、属性选择器

上章基本是按照元素名、之间的逻辑关系来设定的，比较特殊的也就id、class选择器是根据属性值来定的。属性选择器是CSS2引入的类型，不考虑元素名而是只考虑属性、属性值来选择的

很简单的例子，有一个网页有很多超链接，但是有一部分还没有设定链接不可访问，需要不同样式来提醒用户。虽然可以用类选择器分离开，但需要写上很多class=***，能否不增加代码的基础上快速解决这样的问题，此时属性选择器便有了用途。（合理地使用选择器能大幅度减少代码量）

[attribute]（简单属性选择器）

简单属性选择器只会根据属性是否存在来选择

兼容性：所有主流浏览器均支持

[href] {
	/*选择有属性href的元素*/
}

也可以采用element[attribute]的形式

a[href] {
	/*选择所有a中有属性href的元素*/
    /*注意不要加空格*/
}

[attribute="value"]（精确属性值选择器）

和前一个相比，不止要求存在，还要求值一模一样才能被选择

兼容性：所有主流浏览器均支持

[href="#"] {
	/*选择属性href为"#"的元素*/
}

也可以采用element[attribute="value"]的形式

a[href="#"] {
	/*选择所有a中有属性href的值为"#"的元素*/
    /*注意不要加空格*/
}

一般情况，未设定的超链接会设置为"#"，由此解决了开头所引入的问题

[attribute~="value"]（部分属性值选择器）

会以单词为单位，空格为间隔分割单词，判断是否存在单词

同样的element[attribute~="value"]

兼容性：所有主流浏览器均支持

<a href="#" title="apple example banana"></a>

a[title~="example"] {
	/*选择a中title属性值含example单词的元素*/
}

[attribute|="value"]（语言属性选择器）

会以单词为单位，空格或-间隔分割单词，判断开头是否存在单词

兼容性：所有主流浏览器均支持

<p lang="en-US">Hello</p>

[lang|="en"] {
	/*选择开头单词为en的元素*/
}

[attribute^="value] (*)（开头）

CSS3新增了三个匹配的选择器，但与前两个不同。旧版本的匹配是会以单词划分的，而新版本不会划分

会判断开头是否匹配

兼容性：所有主流浏览器均支持

<p title="HelloWorld">Hello</p>

p[title^="Hello"] {
	/*选择开头为Hello的p元素*/
}

[attribute$="value] (*)（结尾）

会判断结尾是否匹配

兼容性：所有主流浏览器均支持

<p title="HelloWorld">Hello</p>

[title$="Hello"] {
	/*选择结尾为World的元素*/
}

[attribute*="value] (*)（包含）

判断中间是否包含，同样不需要划分单词

兼容性：所有主流浏览器均支持

<p title="HelloWorld">Hello</p>

[title*="loW"] {
	/*选择结尾为loW的元素*/
}

三、常用伪类选择器

伪类是指存在着元素但具有不同状态，比如常见的是超链接。伪类选择比较多，但这边就只说最常用的四类

:link、:visited、:active、:hover

这四个伪类均是和链接有关

link：定义链接未被访问过的样式

visited：选择链接已被访问过的样式

active：选择点击链接时的样式

hover：选择指针指向时的样式

兼容性：所有主流浏览器均支持（旧版本可能无法实现）

此外前缀可以是基本选择器、组合选择器、属性选择器

a.example:link {
	/*选择example类的超链接link时的样式*/
}

a[title="example"]:visited {
	/*选择title为example的超链接visited的样式*/
}

:focus

适用于有焦点的元素，如超链接、文本框、按钮之类的，选择点击时的这一样式

兼容性：所有主流浏览器均支持（旧版本可能无法实现）

四、CSS运作的机制

已经知道了层叠的优先级是按内联式>嵌入式>外联式>默认的情况，但实际上要更复杂些，主要考虑的是当样式给同一对象时发生冲突如何解决这一问题

层叠（cascade）

层叠性表明对于同一级的样式，按照最后定义的样式来决定

<head>
    <style>
        p {
            color:red;
            font-size:18px;
        }
        p {
			color:yellow;
        }
    </style>
</head>
<body>
    <p>
        123
    </p>
</body>

此例，同样是对p的样式，font-size没有问题。但color存在两个样式，如何取舍？按照层叠性的原则，下面会刷新上面的，因此代码执行后效果来看color为yellow

继承（inherit）

简单来说，就是对父元素设定样式，子元素也会继承某些样式。具体会不会继承需要看实际效果，当然CSS也设置了一个属性可以强行设定是否继承。大部分属性都是可以被继承的，但某些像是设置边框之类的在默认情况下无法被继承

<head>
    <style>
        div {
			color:yellow;
        }
    </style>
</head>
<body>
    <div>
        <p>
            123
        </p>
    </div>
</body>

此例虽然是对div，但p会继承其样式

优先级（specificity）

<head>
    <style>
        #example {
            color:red;
            font-size:18px;
        }
        p {
			color:yellow;
        }
    </style>
</head>
<body>
    <div>
        <p id="example">
            123
        </p>
    </div>
</body>

此例结果选择的上面而非下面的，实际上不同的选择器具有不同的权重

网站：https://specifishity.com/

网站很详细地说明了不同选择器的权重

选择器 权重
继承、通配符选择器 0-0-0
元素选择器 0-0-1
类选择器、属性选择器、伪类选择器 0-1-0
id选择器 1-0-0
!important 打破规则，处于最高级别

对于组合选择器的符号或是特殊的伪类 :not()并不影响权重，但是not内的选择器会影响权重

!important打破权重规则，属于最高优先级，但慎用，和goto类似滥用会导致结构复杂

如何运作（处理冲突）？

总体上根据内联式>嵌入式/外联式>默认来覆盖。但具体的在某一层次会根据优先级的原则，根据不同权重来覆盖。如果发现权重一样，则根据层叠原则下面的会覆盖上面的。此外某些属性子元素可以继承。但是!important会打破一切规则。（注：外联式会像C语言import一样引入到位置上，变成"嵌入式"一样，也会遵循层叠原则）

p {
	color:yellow;
}

<link rel="stylesheet" href="example.css"/>
<style>
	p {
        color:red;
	}
</style>

<style>
	p {
        color:red;
	}
</style>
<link rel="stylesheet" href="example.css"/>
<!-- 两则代码效果完全不一致 -->

但是理解运作的基础是理解选择器的规则

h1[title="example"] .class:link {
	/*一个复杂的选择器，权重为0-3-1*/
}

参考网站

w3cschool

MDN CSS

HTML.net CSS

CSS specifishity

grid布局案例

grid小游戏

A Complete Guide to Grid

CSS Grid Starter Layouts

Getting Started with CSS Grid



这篇关于CSS学习笔记（一）：选择器、运作机制的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！


相关编程文章

更多>
本站官方QQ
官方QQ:
23002807

沪ICP备2023033072号-1

     

扫一扫关注最新编程教程