CSS选择符

最新推荐文章于 2024-07-08 14:14:43 发布

Tansum

最新推荐文章于 2024-07-08 14:14:43 发布

阅读量358

点赞数

分类专栏： C++ 文章标签： CSS

本文链接：https://blog.csdn.net/weixin_40161974/article/details/85105035

版权

C++ 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.分组选择符

分组选择符以逗号作为分隔符。

h1,h2{color:blue;}

对h1，h2运用同样的规则

2.上下文选择符

上下文选择符，严格来讲（也就是CSS规范里），叫后代组合式选择符（descendant combinator selector），就是一组以空格分隔的标签名。用于选择作为指定祖先元素后代的标签。

article p{font-weight:bold;}

对位于article后代的p元素运用该规则。

特殊的上下文选择符

（1）子选择符> 标签1>标签2

标签2必须是标签1的子元素。

（2）紧邻同胞选择符+ 标签1+标签2

标签2必须紧跟在其同胞标签1的后面。

（3）一般同胞选择符~ 标签1~标签2

标签2必须跟（不一定紧跟）在其同胞标签1后面。

（4）通用选择符*

通用选择符是一个通配符，它匹配任何元素。如：

*{color：blue;}

这条规则会导致所有元素（的文本和边框）都变成蓝色。

一般在使用*选择符时，都会同时使用另一个选择符，如：

p * {color:pink;}

这样只会把p包含的所有元素的文本变为粉色。

通用选择符可用来构成非子选择符，比如：

section * a{font-size:1.2em;}

任何是section孙子元素，而非子元素的a标签都会被选中。不管a的父元素是什么。

3.类属性

（1）类选择符

.类名

类选择符前面是点（.），紧跟着类名，两者之间没有空格！

（2)标签带类选择符

可把标签名和类选择符写在一起，可以选中带有这个类的标签。

p.special{color:red;}

(3)多类选择符

可以给元素添加多个类，用空格分隔。更准确的说法是，HTML的class属性可以有多个空格分隔的值。

要选择同时存在这两个类名的元素，可以这样写.类名1.类名2{……}

注意，CSS选择符的两个类名之间没有空格，因为我们只想选择同时具有这两个类名的那个元素。如果加了空格，那就变成“祖先/后代”关系的上下文选择符了。

4.ID属性

ID与类的写法类似，而且表示ID选择符的#（井号）的用法，也跟表示类选择的.（英文句号）类似。

如ID选择符为：#类名

5.属性选择符

(1)属性名选择符

标签名[属性名]

选择任何带有属性名的标签名。

<style>
……
img[title]{border:2px solid blue;}
……
</style>

<body>
……
<img src="……" title="……" alt="……" />
……
</body>

（2）属性值选择符

标签名[属性名="属性值"]

<style>
……
img[title="test"]{border:2px solid blue;}
……
</style>

<body>
……
<img src="……" title="test" alt="……" />
……
</body>

6.伪类

（1）UI伪类

a)链接伪类

针对链接的伪类一共有四个：

link 此时，链接就在那儿等着用户点击
visited 用户此前点击过这个链接
hover 鼠标指针正悬停在链接上
active 链接正在被点击（鼠标在元素上按下，还没有释放)

以下是这些状态对应的4个伪类选择符：

a:link{……}
a:visited{……}
a:hover{……}
a:active{……}

一个冒号（:）表示伪类，两个冒号（::）表示CSS3新增的伪元素。

b) ：focus伪类

元素:focus

表单中的文本字段在用户单击它时会获得焦点，然后用户才能在其中输入字符。如：

input:focus {border:1px solid blue; }

会在光标位于input字段中时，为该字段添加一个蓝色边框，这样可以让用户明确地知道输入的字符会出现在哪里。

c) :target伪类

元素：target

如果用户点击一个只想页面中其他元素的链接，则那个元素就是目标（target），可以用：target伪类选中它。

（2）结构化伪类

a) :first-child 和 :last-child

元素：first-child 代表一组同胞元素中的第一个元素

元素：last-child 代表一组同胞元素中的最后一个元素

b) :nth-child(n)

元素:nth-child(n) n代表一个数值

7.伪元素

（1）::first-letter伪元素

元素::first-letter

可用来创建首字符放大的效果，如：

p::first-letter{font-size:300%;}

（2） ::first-line伪元素

元素::first-line

可以选中文本段落（一般情况下是段落）的第一行。

（3）::before和::after伪元素

元素::before

元素::after

可用于在特定元素前面或后面添加特殊内容。如：

<style>
……
p.age::before{content:"Age: ";}
p.age::after{content:" years.";}
……
</style>

<body>
……
<p class="age">25</p>
……
</body>

能得到如下结果：Age: 25 years.

Tansum

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
CSS选择符

1.分组选择符分组选择符以逗号作为分隔符。h1,h2{color:blue;}对h1，h2运用同样的规则2.上下文选择符上下文选择符，严格来讲（也就是CSS规范里），叫后代组合式选择符（descendant combinator selector），就是一组以空格分隔的标签名。用于选择作为指定祖先元素后代的标签。article p{font-weight:bold;}...
复制链接

扫一扫

专栏目录