HTML中的css选择器

选择器

浏览器通过选择器为满足条件的HTML元素添加CSS样式，简言之，选择需要的标签，设置满足需求的样式属性。

标签选择器、类选择器、ID选择器

这三类选择器对应相应的标签、标签中的类属性、标签中的ID属性：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>/**标签选择器：标签+{}；在此设置的标签属性，浏览器打开此页面时，选择所有此标签进行属性设置**/span{color: greenyellow;}/**类选择器：.+类名+{}；在此设置的类属性，浏览器打开此页面时，选择所有此类进行属性设置，优先级高于标签选择器**/.class_txt{color: red;}/**id选择器：#+id名+{}；在此设置的id属性，浏览器打开此页面时，选择此id进行属性设置，优先级高于类选择器和标签选择器**/#id_txt{color: blue;}</style></head><body><!-- 浏览器选择span标签，进行属性设置，此处为绿色字体 --><span>qiang</span><!-- 浏览器选择class_txt类属性，进行属性设置，此处为红字体 --><span class="class_txt">zhog</span><!-- 浏览器选择id_txt的id属性（在同一个页面中，id属性应唯一，不能重复），进行属性设置，此处为蓝字体 --><span class="class_txt" id="id_txt">shou</span><span>666</span></body>
</html>

效果：

分组选择器

如果HTML文档多个CSS样式表内的部分样式相同，则可以通过定义一个分组选择器以简化CSS样式代码，该选择器的选择器名由多个选择器组成，使用逗号分隔。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>/**分组选择器：标签或属性1+，+标签或属性2+，+...+标签或属性3+{}**/span,a,.class_txt,#id_txt{color: greenyellow;}/**标签选择器**/h5{color: red;}/**标签选择器**/h6{color: blue;}</style></head><body><!-- 浏览器选择满足分组选择器中的选择，进行属性设置，此处均为绿色字体 --><span>国</span><a>庆</a><h5>节</h5><h6>快</h6><!--类属性优先级依旧高于标签 --><h5 class="class_txt">乐</span><!-- id属性优先级依旧高于标签和类属性 --><h6 class="class_txt" id="id_txt">！</span></body>
</html>

结果：

后代选择器

后代选择器（descendant selector）又称为包含选择器，用于为特定的HTML子元素添加CSS样式

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">/**后代选择器：父代选择器1 子父代选择器2 子父代选择器3 …子代选择器+{}；(选择器之间空格隔开) **/h2 span{color: greenyellow;}/**后代选择器：父代选择器1 子父代选择器2 子父代选择器3 …子代选择器+{}；(类选择器不需要空格) **/span .class_txt{color: red;}/**后代选择器：父代选择器1 子父代选择器2 子父代选择器3 …子代选择器+{}；(id选择器不需要空格) **/span #id_txt{color: blue;}</style></head><body><h2><!-- 浏览器选择满足后代选择器中的h2下span标签，进行属性设置，此处span为绿色字体 --><span>国</span><!-- 浏览器选择满足后代选择器中的span中class_txt类，进行属性设置，此处span为红色字体 --><span class="class_txt">庆</span><!-- 浏览器选择满足后代选择器中的span中的id_txt，进行属性设置，此处span为蓝色字体 --><span class="class_txt" id="id_txt">节</span><!-- 浏览器选择满足后代选择器中的span中class_txt类，进行属性设置，此处span为红色字体 --><span class="class_txt">快</span><span>乐</span></h2><!--  未设置，默认黑色 --><h1><span>！</span></h1></body>
</html>

效果：

通配符选择器

通配符选择器匹配HTML文档中的任何HTML元素

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>*{margin: 0px;padding: 0px;}/*进行通配符属性设置，在此我们使内容与页面边间距为0*/</style></head><body><h4>国庆节快乐！</h4></body>
</html>

设置前：

设置后：

伪类选择器

<html><head><meta charset="UTF-8"><title></title><style>/*设置初始a标签状态，见图1*/a{text-decoration: none;font-family: 华文彩云;font-size: 20px;}/*向未被访问的链接添加样式，见图1*/a:link{color: greenyellow;}/*向以被访问的链接添加样式，见图2*/a:visited{color: purple;}/*向链接添加鼠标浮于其上时的样式，见图3*/a:hover{text-decoration:underline;color: orangered;}/*向未正被激活链接添加样式，见图4*/a:active{font-size: 30px;}</style></head><body><a href="https://blog.csdn.net/qiangzhogshou/article/list/2?">qiangzhogshou的博客</a></body>
</html>

图1：

图2：

图3：

图4：

注意：若:link、:visited、:hover和:active一起使用，:hover 必须被置于 :link 和 :visited 之后，:active 必须被置于 :hover 之后，即:link -> :visited -> :hover -> :active
简记四种常用的伪类选择器：l（link）ov（:visited）e ---- h（hover）a（active）te

HTML中的css选择器相关推荐

html页面选择指定条件在下方显示,如何从符合特定条件的HTML中找到CSS选择器？...
我想解析任何给定的链接,看看是否有任何CSS选择器的属性可能部分或完全匹配特定的关键字.如果我的关键字是print,我希望给定链接中的每个CSS选择器都在其中的任何位置打印,它可能出现在name,id ...
在selenium中使用css选择器进行元素定位（一）
大家在使用selenium元素定位的时候,通常更多使用的是XPATH,css定位方式用得比较少但有时候css定位方式还是有一些优势的, 优势1:一般情况下定位速度要比XPATH快优势2:语法要比X ...
jQuery 中的 CSS 选择器
#id id 选择器 $("#myDiv").css(...); 元素标签选择器 $("div") * 通用符选择器匹配所有元素 $("*&quo ...
scrapy中使用css选择器罗列下一级的所有标签
使用: .css('dl>*') 即为罗列dl标签的下一级所有标签例子 <dt id='dt_id'><dl>a</dl><dl>b</d ...
Python scrapy 中的css选择器提取 a 标签的 href值
response.css(".copyright-area a::attr(href)").extract()[0]
【网络爬虫入门04】彻底掌握BeautifulSoup的CSS选择器
[网络爬虫入门04]彻底掌握BeautifulSoup的CSS选择器广东职业技术学院欧浩源 2017-10-21 1.引言目前,除了官方文档之外,市面上及网络详细介绍BeautifulSoup ...
Css学习总结（4）——CSS选择器总结
1:通用选择器 * { margin:0; padding:0; } *选择器是选择页面上的全部元素,上面的代码作用是把全部元素的margin和padding设为0,最基本的清除浏览器默认样 ...
利用CSS选择器爬取豆瓣上的图书
利用CSS选择器爬取豆瓣上的图书主要技术:熟练掌握requests.BeautifulSoup 爬取图书链接 "https://book.douban.com/latest?icn=ind ...
css选择器优先级顺序是什么？css基本选择器的介绍
CSS选择器是编写CSS代码时的一个核心概念,我们在设计网页页面时,使用css对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器.而HTML页面中的元素就是通过CSS选 ...