为什么我的样式表没有覆盖引导程序? [英] Why isn't my stylesheet overwritting bootstrap's?

问题描述

我读了数以百万计的时间，如果您在自己的 CSS 样式表中定义引导类，您将覆盖它们，因此您创建的元素将具有您想要的预定义样式.

虽然这对一半的页面是正确的，但我使用 form-control 类的输入按钮不起作用，我无法弄清楚原因，因为任何人否则有这个问题.

这是我的问题的片段:

var searcher = document.getElementById('buscador');searcher.addEventListener("点击", function(){var master = searcher.parentNode;searcher.removeChild(searcher.childNodes[0]);searcher.style.animationName = "expandismo";searcher.style.animationDuration = "1s";设置超时(功能(){master.removeChild(搜索者);var barraSearch = document.createElement('input');barraSearch.setAttribute('type', 'text');barraSearch.setAttribute('id', 'barraSearch');barraSearch.setAttribute('class', 'form-control');barraSearch.setAttribute('placeholder', 'Buscar...');var spanCheto = document.createElement('span');var botonCheto = document.createElement('button');var secondSpan = document.createElement('span');spanCheto.setAttribute('class', 'input-group-btn');botonCheto.setAttribute('class', 'btn btn-default');secondSpan.setAttribute('class', 'glyphicon glyphicon-search');secondSpan.setAttribute('aria-hidden', 'true');botonCheto.appendChild(secondSpan);spanCheto.appendChild(botonCheto);master.appendChild(barraSearch);barraSearch.focus();}, 1000);}, false);

.container-fluid{文本对齐:居中；}#顶级车道{白颜色;背景图片:网址(城市背景.jpg)；背景尺寸:100% 100%；最小高度:400px；}#botlane{}#headone{边距顶部:130px；颜色:黑色;文本阴影:0px 0px 12px 白色，0px 0px 8px 白色，0px 0px 3px 白色，0px 0px 5px 白色；font-family: "Times New Roman", Times, monospace;字体大小:60px；}#buscador{颜色:#595959；宽度:40px；高度:40px；边框半径:18px；背景颜色:浅灰色；光标:文本；}#buscador:悬停{背景颜色:浅灰色；不透明度:1；}#buscador:活跃{背景颜色:白色；}.输入组{宽度:100%；文本对齐:居中；}.form-control{宽度:70%；边框半径:18px；背景颜色:浅灰色；高度:40px；padding-left: 10px;字体大小:20px；颜色:黑色;}.form-control:focus{框阴影:0px 0px 5px #66d9ff;框阴影:0px 0px 10px #66d9ff;框阴影:0px 0px 8px #66d9ff;框阴影:0px 0px 12px #66d9ff;}@keyframes expandismo{从{宽度:40px}到{宽度:70%}}

<头><meta charset="utf-8"><title>价格冲浪常见问题</title><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script><!-- 最新编译和缩小的 CSS --><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz"crossEuK6ys><!-- 可选主题--><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPmgJponys"cross.><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.min.css"><!-- 最新编译和缩小的 JavaScript --><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7"cross<link rel="stylesheet" type="text/css" href="wean1.css"><身体><div class="container-fluid" id="toplane"><h1 id="headone">PRICE SURFER 常见问题</h1><div class="input-group"><button id="buscador"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>

<div class="container-fluid" id="botlane">

<script type="text/javascript" src="wean1.js"></script></html>

解决方案

.container-fluid .input-group .form-control{/*你的CSS*/}

这是因为引导程序使用两个类获取 .form-control 并且这种类型的选择 .input-group .form-control 比 更强>.form-control

.input-group .form-control{}

使用这个网站来计算哪个选择器更强.

检查此屏幕截图，第一个选择器有 3 个点，而第二个只有两个点，因此无论您将第一个选择器放在哪里，第一个选择器都比第二个强.每个id有100分，class有10分，标签有1分

I read millons of time that if you define a bootstrap class in your own CSS stylesheet you will overwrite them so your created element will have your predefined style as you want.

While this is true to half of the page, my input button using the class form-control it just won't work, and I can't figure it out the reason why, as anybody else is having this problem.

Here's a snippet with my issue:

var searcher = document.getElementById('buscador');

searcher.addEventListener("click", function()
{
	var master = searcher.parentNode;
	searcher.removeChild(searcher.childNodes[0]);
	searcher.style.animationName = "expandismo";
	searcher.style.animationDuration = "1s";
	setTimeout(function(){
		master.removeChild(searcher);
		var barraSearch = document.createElement('input');
		barraSearch.setAttribute('type', 'text');
		barraSearch.setAttribute('id', 'barraSearch');
		barraSearch.setAttribute('class', 'form-control');
		barraSearch.setAttribute('placeholder', 'Buscar...');
		var spanCheto = document.createElement('span');
		var botonCheto = document.createElement('button');
		var secondSpan = document.createElement('span');
		spanCheto.setAttribute('class', 'input-group-btn');
		botonCheto.setAttribute('class', 'btn btn-default');
		secondSpan.setAttribute('class', 'glyphicon glyphicon-search');
		secondSpan.setAttribute('aria-hidden', 'true');
		botonCheto.appendChild(secondSpan);
		spanCheto.appendChild(botonCheto);



		master.appendChild(barraSearch);
		barraSearch.focus();

	}, 1000);
	
}, false);

.container-fluid
{
	text-align: center;
}
#toplane
{

	color: white;
	background-image:  url(citybackground.jpg);
	background-size: 100% 100%;
	min-height: 400px;
}
#botlane
{

}
#headone
{
	margin-top: 130px;
	color: black;
	text-shadow: 0px 0px 12px white, 0px 0px 8px white, 0px 0px 3px white, 0px 0px 5px white;
	font-family: "Times New Roman", Times, monospace;
	font-size: 60px;
}
#buscador
{
	color: #595959;
	width: 40px;
	height: 40px;
	border-radius: 18px;
	background-color: lightgrey;
	cursor: text;
}
#buscador:hover
{
	background-color: lightgrey;
	opacity: 1;
}
#buscador:active
{
	background-color: white;
}
.input-group
{
	width: 100%;
	text-align: center;
}
.form-control
{
	width: 70%;
	border-radius: 18px;
	background-color: lightgrey;
	height: 40px;
	padding-left: 10px;
	font-size: 20px;
	color: black;
}
.form-control:focus
{
	box-shadow: 0px 0px 5px #66d9ff;
	box-shadow: 0px 0px 10px #66d9ff;
	box-shadow: 0px 0px 8px #66d9ff;
	box-shadow: 0px 0px 12px #66d9ff;
}
@keyframes expandismo
{
	from{width: 40px}
	to{width: 70%}
}

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Price Surfer FAQ</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
		<!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

	<!-- Optional theme -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.min.css">

	<!-- Latest compiled and minified JavaScript -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
	<link rel="stylesheet" type="text/css" href="wean1.css">
	
</head>
<body>
<div class="container-fluid" id="toplane">
	<h1 id="headone">PRICE SURFER FAQ</h1>
	<div class="input-group">
		<button id="buscador"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
	</div>
</div>
<div class="container-fluid" id="botlane">
	
</div>
<script type="text/javascript" src="wean1.js"></script>
</body>
</html>

解决方案

.container-fluid .input-group .form-control{
   /* yous css*/
}

This is because the bootstrap get the .form-control with two clases and this type of selection .input-group .form-control is stronger then just .form-control

.input-group .form-control{

}

Use this website to calculate which selector is stronger .

Check this screenshot the first selectors have 3 points and the second has only two so doesn't matter where you place the first selectors are stronger than second. Every id has 100 points , classes have 10 points and tags have 1 point

这篇关于为什么我的样式表没有覆盖引导程序?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！