【CSS 17】attribute selector 属性选择器 设置无class或id的表单样式

这篇具有很好参考价值的文章主要介绍了【CSS 17】attribute selector 属性选择器 设置无class或id的表单样式。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

attribute selector 属性选择器

可以设置带有特定属性或属性值的 HTML 元素的样式
[attribute] 选择器用于选取带有指定属性的元素

/*选择所有带有 target 属性的 <a> 元素*/
a[target] {
	background-color: hotpink;
}

[attribute=“value”] 选择器用于选取带有指定属性和值的元素

/*选取所有带有 target="_blank" 属性的 <a> 元素*/
a[target="_blank"] { 
  background-color: yellow;
}

[attribute~=“value”] 选择器选取属性值包含指定词的元素

/*
选取 title 属性包含 "flower" 单词的所有元素
下面会匹配以下属性的元素:title="flower"、title="summer flower" 以及 title="flower new",但不匹配:title="my-flower" 或 title="flowers"
*/
[title~="flower"] {
	border: 5px solid yellow;
}

[attribute|=“value”] 选择器用于选取指定属性以指定值开头的元素

/*
选取 class 属性以 "top" 开头的所有元素
值必须是完整或单独的单词,比如 class="top" 或者后跟连字符的,比如 class="top-text",像class="topcontent"这种就不行
*/
[class|="top"] {
	background: yellow;
}

[attribute^=“value”] 选择器用于选取指定属性以指定值开头的元素

/*
下例选取 class 属性以 "top" 开头的所有元素
值不必是完整单词
*/
[class^="top"] {
  background: yellow;
}

[attribute$=“value”] 选择器用于选取指定属性以指定值结尾的元素

/*
下例选取 class 属性以 "test" 结尾的所有元素
值不必是完整单词
*/
[class$="test"] {
	background: yellow;
}

[attribute*=“value”] 选择器选取属性值包含指定词的元素

/*
下例选取 class 属性包含 "te" 的所有元素
值不必是完整单词
*/
[class*="te"] {
	background: yellow;
}

设置表单样式
若需为不带 class 或 id 的表单设置样式,属性选择器会很有用文章来源地址https://www.toymoban.com/news/detail-531604.html

<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
	width: 150px;
	display: block;
	margin-bottom: 10px;
	background-color: yellow;
}

input[type=button] {
	width: 120px;
	display: block;
	margin-left: 20px;
}

</style>
</head>
<body>

<h1>添加表单样式</h1>

<form name="input" action="" method="get">
	Firstname:<input type="text" name="Name" value="Bill" size="20">
	Lastname:<input type="text" name="Name" value="Gates" size="20">
	<input type="button" value="Example Button">
</form>

</body>
</html>

到了这里,关于【CSS 17】attribute selector 属性选择器 设置无class或id的表单样式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • CSS选择器-CSS3属性

    持续更新… 1、CSS3的概念和优势 CSS3是CSS技术的升级版本,CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂,所以,把它分解为一些小的模块,更多新的模块也被加入进来。这些模块包括:盒子模型、列表模块、超链接方式、语言模块、

    2024年02月11日
    浏览(42)
  • 【css】属性选择器

    有些场景中需要在相同元素中获取具有特定属性的元素,比如同为input,type属性有text、button,可以通过属性选择器设置text和button的不同样式。 代码: 渲染效果:

    2024年02月13日
    浏览(37)
  • 4 CSS属性选择器

    4 属性选择器 属性选择器是通过元素的属性及属性值来选择元素的。下面介绍属性选择器的用法。 第一种用法 示例如下: 运行结果: 第二种用法 示例如下: 运行结果: 第三种用法 示例如下: 第四种用法 执行结果: 第五种用法 执行结果: 总结如下:

    2024年02月12日
    浏览(32)
  • css3 - 属性选择器

    2024年02月14日
    浏览(44)
  • CSS基础选择器及常见属性

    HTML只关注内容的语义,可以做简单的样式,但是做出来可能会丑。 CSS 是 层叠样式表 ( Cascading Style Sheets ) 的简称。CSS也是一种标记语言,主要用于设置 HTML 页面中的 文本内容 (字体、大小、对齐方式等)、 图片的外形 (宽高、边框样式、边距等)以及 版面的布局和外观显

    2024年02月11日
    浏览(39)
  • Java selenium 通过直接设置表单元素的 value 属性来填写 Vue / React 表单

    以下是一个通过直接设置表单元素的 value 属性来填写 Vue 表单并提交的示例代码。 这段代码会通过直接设置表单元素的 value 属性来填写 name 和 email 字段,然后点击提交按钮。需要注意的是,在设置 value 属性后还需要手动触发相应的事件(如 input 事件),以确保表单数据被

    2024年01月20日
    浏览(43)
  • idea中实现Serializable提示生成serialVersionUID(序列化id)设置(在Setting找不到Serializable class)

      首先,创建一个javabean文件,并实现java.io.Serializable. 要想IDEA自动生成序列号,就要在IDEA设置中进行一个设置 首先-File -Setting-—Editor —Inspections  ,在搜索框输入 Serializable  然后勾选下面这两个系统就会有提示了。 在这里,一定要看清楚,勾选serializable class without \\\"serialVe

    2024年02月11日
    浏览(52)
  • 新版Selenium使用Python对web页面多个相同Class Name属性的元素进行选择&新老版本对比

    在使用新版的Selenium对网页代码中存在相同class name属性的元素进行定位,在定位的过程中发现使用先前的定位方法已经无法成功对所要操作组件进行定位,这是什么问题呢?下面为大家进行解答。 大概为了统一编写格式,方便阅读理解,新版本的Selenium出来后,摒弃了旧版的

    2024年02月04日
    浏览(48)
  • CSS基础方法——引入方式、属性、基础选择器

    CSS 主要用于设置 HTML 页面中的文本样式(字体、大小、颜色、对齐方式……)、图片样式(宽高、边框样式、边距……)以及版面的布局和外观显示样式。 行内样式 写在标签中,通常不使用,只做了解 内部样式 写在head中,通常使用这种方法,配合选择器进行使用 css在使用

    2024年01月23日
    浏览(39)
  • 【前端】深入解析CSS:选择器、显示模式、背景属性和特征剖析

    CSS(层叠样式表)作为前端开发的核心技术之一,为网页赋予了美观和交互性。本文将深入探讨CSS的复合选择器、元素显示模式、背景属性以及其三大特征,帮助读者更好地理解和应用CSS。 后代选择器 又称为 包含选择器 ,可以选择父元素里边子元素,其写法就是把外层标签

    2024年02月11日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包