CSS和CSS3选择器

最新推荐文章于 2024-06-13 21:20:19 发布

香蕉你个布呐呐

最新推荐文章于 2024-06-13 21:20:19 发布

阅读量496

点赞数 1

分类专栏： CSS学习文章标签： css3 css CSS和CSS3的选

本文链接：https://blog.csdn.net/qq_32145291/article/details/61923552

版权

CSS学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这一篇是对精通CSS:高级Web标准解决方案第二章的学习总结.
将会有以下内容:
(1).常用的选择器.
(2).高级选择器
(3).新的CSS3选择器

最常用的选择器类型是类型选择器和后代选择器.类型选择器用来寻找特定类型的元素,比如段落或者标题元素.有时候也被称为元素选择器或简单选择器.

p{color:black}
h1{font-weight:bold}

后代选择器可用了来寻找特定元素或元素组的后代.另外还有ID选择器和类选择器.ID选择器用#替代,类选择器用.替代.

#id{}
<p><span id="id">Harry Knowles</span></p>
.class{}
<p><span class="class">Harry Knowles</span></p>

通用选择器

可能是所有选择器中最强大却最少使用的.作用就像通配符,它匹配所有的元素.用型号代替.最常用的操作就是去除浏览器的padding和margin

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

子选择器

后代选择器可以选择一个元素的所有后代,而子选择器只选择元素的直接后代,即子元素.

<div id="mu">
    <p>Harry Knowles</p>
    <div>
        <p>Harry Knowles</p>
    </div>
</div>

//对于以上的代码,写成子选择器则最终背景颜色变化的只有第一个p标签.
#mu>p{
    margin-top: 10px;
    background-color: #cccc00;
}
//但是写成这样,也就是后代选择器,两个都有效
#mu p{
    margin-top: 10px;
    background-color: #cccc00;
}

相邻同胞选择器 可以定位同一个父元素下某个元素之后的元素

直接看代码理解

<h2>这是一个标题</h2>
 <p>Harry Knowles</p>
<p>Harry Knowles</p>

对于以上的代码如何用相邻同胞选择器让第一个p标签变色呢.

h2 + p{
    margin-top: 10px;
    background-color: #cccc00;
}

属性选择器

根据某个属性是否存在或者属性的值来寻找元素.如果属性有多个值,用空格分开

<h2 title="标题">这是一个标题</h2>

//使用属性选择器改变h2的背景颜色
h2[title]{
    background-color: #cccc00;
}

—————————————————–华丽的分割线—————————————————————–

第二章能看的东西就这么多.我觉得内容太少了就把我看视频的笔记拿出来给大家看看

下面给出属性选择器另外一些写法.
*= 包含XXX
^= 首字母为xxx
$= 结束字符xxx

一个示例

<h2 title="a">这是一个标题</h2>
<h2 title="bba">这是一个标题</h2>
<h2 title="ab">这是一个标题</h2>

//比如这个会使第一个h2的标签背景变色,其他不变,另外两个可以试一下
h2[title~="a"]{
    background-color: #cccc00;
}

结构性伪类选择器

first-line 某个元素的第一行
first-letter:某个元素首个字母

<p>这是第一行的内容<br/>这是第二行</p>

//这里p元素的第一个标签背景会改变,第二个不变
p:first-line{
    background-color: #cccc00;
}

//这里第一个p元素的第一个字符会变成红色
p:first-letter{
    color: #dc143c;
}

x:before{ //在某元素之前添加
content:
}

<ul>
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
    </ul>

//这里将会在ul列表的上方添加一个"加的内容"的文字
ul:before{
    content: "加的内容";
}

其他一些选择器

root:绑定到页面的根元素中如果设置了root,那么body的作用域就只有内容区域,反之body沾满全屏()
not:如果想对某个结构元素使用样式,但想排除这个结构下面的子结构元素
empty:指定当前元素中内容为空白时使用的样式

x代表元素名称
x:first-child{}
x:last-child{}
x:nth-child(position){} 从上往下数包括父级和子级 position可以是数字也可以是奇偶数等等可以表示位置的词语奇数(odd) 偶数(even)
x:nth-of-type(){}
x:nth-last-child(position){}从下往上数
nth-last-of-type 同上类似

这里写出root,not,x中的第三个,第四个示例.其他的一看便知.

root:

//以下的代码将会看到整个屏幕背景是黄色,body所设置的图片背景只会作用在<div>所占的空间
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        :root{
            background-color: fuchsia;
        }
    </style>
</head>
<body background="1.jpg">
    <div>哈喽,root</div>
</body>
</html>

not

    <div><p>哈喽,root</p></div>
    <div><h1>哈喽,root</h1></div>
    <div><h2>哈喽,root</h2></div>

 //以下代码将会使除了p标签之外的其他标签变色
div *:not(p){
            color: fuchsia;
        }

x:nth-child(position){}

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

//以下代码将会使第二个li标签也就是2的文字变色.
//PS:一开始我以为X的部分要写ul,并且position从0开始.这里并不是,锁着这里是有先决条件的.必须是同一个父元素下.
li:nth-child(2){
            color: fuchsia;
        }

x:nth-of-type(){}

       <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
//以下代码将会使li标签中奇数li标签字体变色.偶数为even.这里括号的条件并不局限于奇数和偶数
li:nth-of-type(odd){
            color: fuchsia;
        }

选择器的内容大概就这些.

香蕉你个布呐呐

关注

1
点赞
踩
0

收藏

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

这一篇是对精通CSS:高级Web标准解决方案第二章的学习总结. 将会有以下内容: (1).常用的选择器. (2).高级选择器 (3).新的CSS3选择器最常用的选择器类型是类型选择器和后代选择器.类型选择器用来寻找特定类型的元素,比如段落或者标题元素.有时候也被称为元素选择器或简单选择器.p{color:black}h1{font-weight:bold}后代选择器可用了
复制链接

扫一扫