CSS温习：选择器 &etc

最新推荐文章于 2024-09-27 10:45:57 发布

qq_14959033

最新推荐文章于 2024-09-27 10:45:57 发布

阅读量433

点赞数

文章标签： css

本文链接：https://blog.csdn.net/qq_14959033/article/details/50152851

版权

本文详细介绍了CSS中选择器的使用，包括属性选择器（如[id], [class]）和特定值匹配（例如[title^=f], [title$=rd]）。此外，还讲解了伪类选择器，如目标伪类(:target), 元素状态伪类(:hover, :active, :checked)和结构伪类(:first-child, :last-child)。同时，提到了否定伪类(:not)的应用。伪元素选择器如:first-letter和:first-line以及内容生成（:before, :after）和计数器等内容也被涵盖。最后，讨论了CSS多列布局及浏览器兼容性问题。" 129829098,5891101,Python asyncio.Protocol实现socket断线重连,"['Python', '网络编程', 'asyncio']

摘要由CSDN通过智能技术生成

属性选择器
将元素属性用于选择器中，从而获取指定元素属性或者值得元素
语法：
[属性] : 具备指定属性的所有元素全部匹配出来
元素[属性] : 匹配具备属性的指定元素
p[id] : 匹配具备id属性的p元素
div[class] :
元素[属性1][属性2] :
p[id][class] : 匹配出所有即具备id属性，又具备class属性的p元素
元素[属性=值] :
input[type="text"] : 匹配type的值为text的input元素
元素[属性~=值] :
input[class ~= second] :
<input class="first second" />
<input class="myseconddiv" />

~= : 包含指定的数据（独立）
= : 只有指定的数据
元素[属性^=值] : 匹配指定属性以指定值开始的指定元素
p[class^=f] : 匹配class以f开始的p元素
<p class="first"></p>可以匹配
<p class="fast"></p>可以匹配
<p class="second"></p>不能匹配
元素[属性*=值] : 属性包含值元素
p[class*="valid"];
<p class="myvalid"></p>
元素[属性$=值] : 匹配属性以指定值结束的元素
元素[属性!=值] : 匹配属性不等于具体值得元素

  <style>
	.important{font-weight:bold;}
	.warning{color:red;}
	/*1、具备id属性的段落 更改为 1px solid red*/
	p[id]{border:1px solid red;}
	/*2、id属性的值为summary的段落，背景颜色为pink*/
	p[id=summary]{background:pink;}
	/*3、class属性中包含warning单词的段落，字体大小为20磅 pt*/
	p[class~=warning]{font-size:20pt;}
	/*4、title属性以f开头的段落，字体大小为15磅*/
	p[title^=f]{font-size:15pt;}
	/*5、title属性中包含con的段落，字体大小为20磅*/
	p[title*=con]{font-size:20pt;}
	/*6、title属性以rd结尾的段落，字体大小为25磅*/
	p[title$=rd]{font-size:25pt;}
  </style>

<body>

  <!-- 属性选择器 -->
  <p id="intro">带有id属性的段落</p>
  <p id="summary">id属性额值为summary的段落</p>
  <p class="important warning">class属性的值为单词列表，其中有warning的段落</p>
  <p title="first">title属性值为first的段落</p>
  <p title="second">title属性值为second的段落</p>
  <p title="third">title属性值为third的段落</p>
 </body>

=======