您的位置：首页 > Web前端 > CSS

HTML/CSS选择器的使用

2020-06-08 05:47 691 查看

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

</style>

</head>

<body>

<!--

网页分成三个部分：

结构（html）

表现（css）

行为（JavaScript）

css样式：

——层叠样式

——网页其实是一个多层的结构，通过css可以分别为网页的每一层设置样式

——而最终我们只能看到网页的最上面一层

——总之：css用来设置网页中元素的样式

1.第一种方式：（内联样式/行内样式）一对一

在标签内部可以通过style属性设置样式元素

<p style="color: blue;font-size: 60px;">标签内部可以通过style属性设置样式元素</p>

<p>局限性太小</p>只能针对一个标签生效

到时候数多的时候不方面修改

2.第二种方式：（内部样式表）一对多

在<head> <style> p{设置样式}</style> </head>标签里面添加style标签

通过选择器来选中元素来设置其的各种样式

可以为多个标签设置样式，并且修改的时候修改同一处即可

内部样式表只能对本页面起作用（不能用到别的页面）

3.第三种方式（外部样式表）

可以将css样式编写一个外部的文件.css

然后通过link标签来引入外部的css文件(想用就引入就可以)

意味着只要想使用这些样式的网页都可以对其进行引用

使用样式可以在不同页面之间进行复用

将样式编写到外部的css文件中，可以使用到浏览器的缓存机制

从而加快网页的加载速度，提高用户的体验效果

css语法：

/* css的注释 */

1.选择器p 声明块{}

选择器：

通过选择器可以选中页面中的指定元素

比如 p标签的作用就是选中页面中的所有元素p{}

声明块：

通过声明块来指定要为元素设置的样式

声明块是一个一个声明组合

声明是一个名值对结构

一个样式名对应一个样式值，名和值之间可以连接以；结束

1.元素选择器（标签）

根据标签来选择指定中的元素

语法：标签名{}

例子：p{} h1{} div{}

2.id选择器（设置属性id来选择#）

如果单独设置该标签：可以使用元素的id属性值来单独设置

语法：#id属性值{}

例子：#box{} #red{}

<h1 id="biaoqian">#id属性值{}</h1>得出#biaoqian{}

class和id类似：id不可以重复，class可以重复

例如：<p class="blue">1</p>

例如：<p class="blue">2</p>

3.类选择器（class来选#）：

根据元素的class属性值选中的一组元素可以重复使用

语法：.class属性值{}

class可以在一个元素中使用多次

<h1 class="biaoqian abc">.id属性值{}</h1>得出.biaoqian{}.abc{}

区分：

id:<h1 id="biaoqian">#id属性值{}</h1>得出#biaoqian{}

class:<h1 class="biaoqian">.id属性值{}</h1>得出.biaoqian{}

id命名不可以重复，class命名可以重复（类选择器）

4.通配选择器（*）

作用：选中页面中的所有元素

语法：*{}

一下实现所有的效果

5.复合选择器

1.交集选择器（div.red{}）

作用：同时选择符合多个条件的元素

语法：选择器1选择器2选择器n{}：元素选择器.类选择器

例如：即的有div又得有red

<div class="red"></div>css样式：div.red{}

2.选择器分组（并集选择器）

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

语法：选择器1，选择器2，选择器3，选择器n{}

例如：h1,span{实现同种样式}

在css中：h1,span,,,,{}不同标签用逗号隔开就可以

6.元素关系（嵌套）

1.父元素

-直接包含子元素的叫父元素

2.子元素

-有父元素的元素叫子元素（两层）

3.祖先元素（爷父孙）

-直接或间接包含后代的元素

一个元素的父元素也是他的祖先元素

4.后代元素

-直接或间接被包含的子元素

根元素的下面元素

5.兄弟元素

-具有相同父元素的是兄弟元素

7.子元素选择器

作用：选中指定父元素的指定子元素

语法：父元素>子元素

例如：div>span{}没有class的时候

例如：div.box>span{}有class的时候

例如：div>p>span{}子元素的子元素——父-子（父）—子

8.后代选择器（p元素中的span，div中的span儿子也是后代）

作用：选中指定元素中的后代元素

语法：祖先后代

例如：div span{}空格隔开

例如：div p span{}空格隔开——后代的后代

9.兄弟选择器

语法：前一个+下一个

例如：p+span{}//紧挨着的span标签，中间有其他的都不行

例如：<p>p是div的子元素

<span>p是span的子元素</span>

</p>

<span> span和p是兄弟元素</span>

语法：前一个~下一个：表示这个兄弟下边的所有元素

例如：p~span{}后面都会显示

10.属性选择器

作用：

语法：标签[属性名]：p[title]{}

例如：<p title="鼠标选中显示的文字abc"></p>

语法：更加具体的标签[属性名=属性值]：p[title=abc]{}、p[title=zzz]{}针对性比较好（等于该标签）

例如：<p title="鼠标选中显示的文字zzz"></p>

语法：以属性值开头的所有属性[属性名^=属性值]：p[title^=abc]{}(^=以这样的开头就行)

例如：<p title="abc开头的都会显示该样式"></p>/<p title="abcef开头的都会显示该样式"></p>两个都可以实现

语法：以属性值结尾的所有属性[属性名￥=属性值]：p[title￥=abc]{}css样式一下实现两个（￥=以这样的结尾就行）

例如：<p title="abc结尾的都会显示该样式"></p>、<p title="edfabc结尾的都会显示该样式"></p>两个都可以实现

语法：以属性值有的字母的所有属性[属性名*=属性值]：p[title*=e]{}css样式一下实现两个（*=有就行）

例如：<p title="abce结尾的都会显示该样式"></p>、<p title="edfabc结尾的都会显示该样式"></p>两个都可以实现

11.伪类选择器：（伪类：不存在的类，特殊的类）

作用：描述一个特殊的状态

语法：ul>li:first.child{始终标记在第一个元素}：在ul的子元素li的第一个子元素，相当于标识第一个的一个关键字

语法：ul>li:last.child{始终标记在最后一个元素}

语法：ul>li:nth.child（第几个）{始终标记在第（）个元素}

特殊值：

n，第n个 n的值是0到正无穷

2n或even 表示的是偶数位

2n+1或odd 表示的奇数位

注意：考虑的是里面所有的元素进行排序的

所以:相同类型的排序有自己的语法：

ul>li：first——of——type

ul>li：last——of——type

ul>li：nth——of——type

ul>li:not(:nth-chlid(3)){除了第三个都会显示}

ul>li+tab/回车也可以自动生成

<ul>

</ul>

12.超链接的伪元素

<a href="www.baidu.com">访问过点链接</a>

<br>

<a href="www.baidu123.com">没访问过的链接</a>

设置超链接的是否访问过的效果：

a:link{}//:link用来表示没访问过的连接（表示正常的链接）

a:vislted{}//用来表示访问过的链接来设置效果（其他效果设置不了，隐私保护）

a：hover{}设置鼠标移入的时候的效果

a:active{}表示鼠标点击的效果

区分：

link和vislted是a超链接自己拥有的

hover和active所有标签都可以用

12.伪元素选择器：：

作用：表示我们的页面中并不真实存在的元素：假想一个元素来设置样式

伪元素：：开头

p：：first-letter{

p标签的第一个字母；相当于加了一个span，但是不存在，所以说是伪元素

}

p::first-line{

第一行设置效果

}

p::selection{

表示鼠标选中内容来设置样式

}

但是通过content加文字，同时好处就是添加特殊的字符，不管内容多长都开加在起始位置和末尾位置

例如

div::befor{div的befor

content：文字（没有办法选中）

元素的起始位置

}

div::after{iv的after

content：文字（没有办法选中）

元素的最后位置

}

-->

<!-- <div class="box">div是p的父元素，是span的祖先元素

<p>p是div的子元素

<span>p是span的子元素</span>

</p>

<span> span和p是兄弟元素</span>

</div> -->

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航