Can I override bootstrap's defaults in a single css selector?

Question

I want to get rid of outlines in Firefox, however they're pointed more deeply than my style.css in bootstrap3.css so I need to update them all.

I've tried the following:

<link href="{{ URL::to('home_assets/css/bootstrap.min.css') }}" rel="stylesheet" media="screen">
<link href="{{ URL::to('home_assets/css/style.css') }}" rel="stylesheet" media="screen">

Example below didn't work because Bootstrap 3 points more deeply.

//bootstrap
a.carousel-control 
{
    outline: thin dotted;
}

//my css
body {
    outline: none !important;
}

Result: a.carousel-control has thin dotted outline.

I need to do something like to remote outline. (and it works)

a.carousel-control 
{
    outline: none;
}

The problem is, then I need to point everything in markup deeply so it overrides bootstrap. I need to encapsulate most of Bootstrap's css.

Is there a functionality like this in CSS, so I can manage them from a single place?

body {
    outline: none !override-previous; //pseudo
}

Any hacks or tricks to manage them in a single place? (no javascript, css expressions are okay though)

Ps. I need this for my dev environment because I keep outlines as default on production to help blind users. They're annoying for me, though.

Answer 1

You can try

*{
outline: none !important;
}

and please add this after your bootstrap.css file so that it'll override.